欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 12:06:21
...

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

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