zoukankan      html  css  js  c++  java
  • NGUI系列教程七(序列帧动画)

    今天我给大家讲一下如何使用NGUI做序列帧动画。本节主要包括两方面内容,分别是使用UIspirit和使用UITexture 做序列帧动画。废话不说了,下面开始。
    还要在啰嗦一句,首先大家要准备一些序列帧的素材图片,最好是大图和小图各一套。我们先来将使用UISpirit做序列帧动画,这个方法只适合使用小图。
    在使用UISpirit 之前大家还要把准备好的序列帧图片做成Atlas,如何做Atlas,大家可以参考系列教程四,这里就不多说了。建好自己的Atlas之后就可以开始着手做了。废话终于完了。

    1. 老规矩,新建一个场景,新建一个2D UI ,在Panel节点下新建一个UISpirit,图片选择序列帧的第一帧图片。

    2.如何让Spirit动态换图片,是我们要解决的重要问题。只要UIspirit能够根据时间动态的换图片就可以做到播放序列帧动画。其实很简单,最重要的就是UISpirit的Name属性。我们只要能够动态改变UISpirit的SpiritName,就可以实现动态换图的功能。
    代码如下

    public bool ActivateWait = false;
     
        float fireRate = 0.2f;
        int i = 0;
        float nextFire;
        string[] ActivatorTexture = new string[] { "activity00", "activity01", "activity02", "activity03", "activity04", "activity05", "activity06", "activity07", "activity08", "activity09", "activity10", "activity11" };            //这里存放我们需要调用的序列帧的名称,这种方法比较笨拙,
    //只适合使用图片较少的情况,当图片很多的情况下,我们可以使用代码控制名称,思路是前面的名称一样,后面的名称代表序列帧编号,我们只要
    //在代码中根据编号加上前缀名称就可以得到所需序列帧的全名。具体使用参见下面的Texture序列帧动画。
        void Awake()
        {
            this.GetComponent<UISprite>().enabled = false;
        }
     
        // Use this for initialization
        void Start()
        {
     
        }
     
        // Update is called once per frame
        void Update()
        {
            if (ActivateWait)
            {
                this.GetComponent<UISprite>().enabled = true;
                if (i < ActivatorTexture.Length)
                {
                    if (Time.time > nextFire)
                    {
                        nextFire = Time.time + fireRate;
                         this.GetComponent<UISprite>().spriteName= ActivatorTexture;
                        i++;
                    }
                }
                else
                {
                    i = 0;
                }
            }
            else
            {
                this.GetComponent<UISprite>().enabled = false;
            }
        }

    这里重要的代码其实就只有一句 this.GetComponent<UISprite>().spriteName= ActivatorTexture; 根据i的索引,动态的改变Spirit的名称。
    其余的是控制播放序列帧的节奏和是否播放序列帧。如图是我使用此方法做的等待的进度条效果。

    3.第二种方法,使用UITexture做序列帧动画。新建一个UITexture,拖放需要做动画的序列帧的第一帧到Texture槽中,关于它的参数,在以前的系列教程中都已经解释的很清楚了,大家可以参考以前的教程。使用UITexture做序列帧动画的关键在于动态改变它的Texture。关键代码:UITexture.mainTexture 。

    这里说明一点就是使用该方法做序列帧动画之前,需要把所有的序列帧图片放到Resources目录下。我们在运行的时候动态调用需要的Texture。还有一点需要注意的是,当图片很多的时候,我们还需要动态卸载已经加载的图片资源,避免挤爆内存。使用的方法是 : Resources.UnloadUnusedAssets();


    4.有了上面的知识之后,我们就可以动手写出下面的代码了:
    using UnityEngine;
    using System.Collections;
    
    public class AnimateTexture : MonoBehaviour
    {
    
        public string SequenceName_Gewei = "Comp 1_0000";
        public string SequenceName_Shiwei = "Comp 1_000";
        public string SequenceName_Baiwei = "Comp 1_00";
        public int currentFrame;
        public int TargetFrame=0;
        public UITexture TextureUI;
        float timeElipsed = 0.0f;
        
        float fps = 20;
        //public List<Texture2D> ani;
    
        public int SequenceNum;
            
    
        void Awake()
        {
            if (TextureUI == null)
            {
                TextureUI = this.GetComponent<UITexture>();
            }      
    
        }
    
        // Use this for initialization
        void Start () 
        {
        }
        
        // Update is called once per frame
        void Update () 
        {
            
                AutoPlayTexture();
            
    
        }
    
        void AutoPlayTexture()
        {
            timeElipsed += Time.deltaTime;
            if (timeElipsed >= 1.0 / fps)
            {
                timeElipsed = 0;
    
    
                if (currentFrame < SequenceNum)
                {
                    currentFrame++;
                }
                else
                {
                    currentFrame = 0;
                }
                DynamicLoadUnload(currentFrame);
            }
            
        }
    
        
        //This function can dynamic  load Unload textures from 0 to at least 1000,param currentFrame play;
        void DynamicLoadUnload(int curframe )
        {
            //plane.renderer.material.mainTexture=ani[currentFrame];
            if (curframe < 10)
            {
                TextureUI.mainTexture = (Texture2D)Resources.Load(SequenceName_Gewei + curframe.ToString(), typeof(Texture2D));
            }
            else if (curframe >= 10 && curframe < 100)
            {
                if (curframe % 50 == 0)
                    Resources.UnloadUnusedAssets();
    
                TextureUI.mainTexture = (Texture2D)Resources.Load(SequenceName_Shiwei + curframe.ToString(), typeof(Texture2D));
            }
            else
            {
                if (curframe % 50 == 0)
                    Resources.UnloadUnusedAssets();
    
                TextureUI.mainTexture = (Texture2D)Resources.Load(SequenceName_Baiwei + curframe.ToString(), typeof(Texture2D));
            }
        } 
            
    }

  • 相关阅读:
    PostMan-NewMan运行参数
    shell脚本学习简单记录笔记
    android开发okhttp-4.9.1源码大致流程解读
    android开发获取键盘高度以及判断键盘是否显示(兼容分屏模式)
    Android开发The style on this component requires your app theme to be Theme.AppCompat (or a descendant)的解决方法
    Linux开发Ubuntu安装man手册
    Android开发源码解读四大组件源码解读简单梳理
    Android开发涉及到的AMS类和ActivityThread类源码解读
    Android开发为什么主线程可以一直运行而不会退出来
    前端CryptoJS加密、后端解密代码实现参考
  • 原文地址:https://www.cnblogs.com/martianzone/p/3380375.html
Copyright © 2011-2022 走看看