Unity学习笔记(09)：UGUI的Image节点和Sprite精灵图、实现进度条加载动画_unity image sprite

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;
        }
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59