Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
程序员文章站
2022-05-30 12:06:21
...
2D模式:
选择Single模式:
Packing tag是指定打包标签 相同的标签在打包时会被打包在同一个文件中 以节省显存
Filter Mode是缩放模式
Point(no filter)无缩放 比如放大两倍 则将像素复制两倍
Image Type是缩放模式:
当图片尺寸放大时
- Simple模式是简单的拉伸 伸长
- Tiled模式是平铺 将图片分成多个同样的图
-
slice模式是图片按照九宫格缩放
类似于聊天气泡 只拉伸图片的一部分
且九宫格较为省资源
在Sprite Editor里指定拉伸区域:
拖动点以修改边框:
Ctrl+S保存即可生效:
-
Filled是指定区域显示
Fill Method是填充方式
Horizontal是竖着切
Vertical是横着切
Fill Origin是
Fill Amount是比例参数
Clockwise是切换顺时针或逆时针
若勾选 则为顺时针
若不勾选 则为逆时针
实现进度条功能:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class clock_bar : MonoBehaviour {
Image image; // Image对象
float totalTime; // 总时间
float nowTime; // 当前时间
bool isRunning = false; // 是否运行
// 若要将组件的属性绑定到编辑器 需要在组件类中加上public修饰符
public bool playOnload = false;
// Use this for initialization
void Start () {
image = GetComponent<Image>();
// 若勾选了Play Onload
if (playOnload)
{
// 启动
showTimeAction(15.0f);
}
}
public void showTimeAction(float totalTime)
{
image.fillAmount = 1.0f; // 当前时间是满的
this.totalTime = totalTime; // 为总时长赋值
this.nowTime = 0; // 初始化当前时间
isRunning = true; // 开启倒计时动画
}
// Update is called once per frame
void Update () {
// 未开启倒计时动画
if (!isRunning)
{
return;
}
nowTime += Time.deltaTime; // 已走过的时间不断累积
float per = nowTime / totalTime; // 不断重新计算过去时间的百分比
// 若已走过时间超过总时间
if (per>1.0f)
{
// 百分比设为1
per = 1.0f;
}
// 计算剩余时间的百分比
per = 1.0f - per;
image.fillAmount = per; // 为fill amount赋值 改变游戏中进度条的比例
// 结束
if (nowTime>=totalTime)
{
isRunning = false;
}
}
}