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

2D模式
Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
选择Single模式:
Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
Packing tag是指定打包标签 相同的标签在打包时会被打包在同一个文件中 以节省显存

Filter Mode缩放模式
Point(no filter)无缩放 比如放大两倍 则将像素复制两倍
Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画

Image Type缩放模式
Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
当图片尺寸放大时

  • Simple模式是简单的拉伸 伸长
  • Tiled模式平铺 将图片分成多个同样的图
  • slice模式图片按照九宫格缩放
    类似于聊天气泡 只拉伸图片的一部分
    且九宫格较为省资源
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
    在Sprite Editor里指定拉伸区域:
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
    拖动点以修改边框:
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
    Ctrl+S保存即可生效:
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
  • Filled指定区域显示
    Fill Method是填充方式
    Horizontal是竖着切
    Vertical是横着切
    Fill Origin
    Fill Amount比例参数
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画
    Clockwise切换顺时针或逆时针
    若勾选 则为顺时针
    若不勾选 则为逆时针
    Unity学习笔记(09):UGUI的Image节点和Sprite精灵图、实现进度条加载动画

实现进度条功能

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 onl oad
        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;
        }
	}
}

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


上一篇:Unity常用工作视图(下)


下一篇:python – pyglet:按下按钮时更改精灵实例的图像