============努力学习的分割线============
今天我给大家讲一下如何使用NGUI做序列帧动画。本节主要包括两方面内容,分别是使用UIspirit和使用UITexture 做序列帧动画。废话不说了,下面开始。
还要在啰嗦一句,首先大家要准备一些序列帧的素材图片,最好是大图和小图各一套。我们先来将使用UISpirit做序列帧动画,这个方法只适合使用小图。
在使用UISpirit 之前大家还要把准备好的序列帧图片做成Atlas,如何做Atlas,大家可以参考系列教程四,这里就不多说了。建好自己的Atlas之后就可以开始着手做了。废话终于完了。
1. 老规矩,新建一个场景,新建一个 2D UI ,在Panel节点下新建一个UISpirit,图片选择序列帧的第一帧图片。
2.如何让Spirit动态换图片,是我们要解决的重要问题。只要UIspirit能够根据时间动态的换图片就可以做到播放序列帧动画。其实很简单,最重要的就是UISpirit的Name属性。我们只要能够动态改变UISpirit的SpiritName,就可以实现动态换图的功能。
代码如下
[C#]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
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
|
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.有了上面的知识之后,我们就可以动手写出下面的代码了:
[C#]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
void
DynamicLoadUnload(
int
curframe )
{
//plane.renderer.material.mainTexture=ani[currentFrame];
if
(curframe < 10)
//这里判断当前帧
{
TextureUI.mainTexture = (Texture2D)Resources.Load(SequenceName_Gewei + curframe.ToString(),
typeof
(Texture2D));
//SequenceName_Gewei 是指序列帧的名称去掉各位数字的名称,比如全名为Texture00,那么这里的参数应该是Texture0。下面还有十位百位,
//依次类推。这里是根据名称加帧索引,获取全名的。
}
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));
}
}
|
由于完整代码比较长,这里就不贴出来了,作为附件下载帖在下面,但是需要大家付钱才能下载,这样做只是为了不让大家简单看看就行了,需要大家跟着自己动手做,自己学,授之以鱼不如授之以渔。大家可以试着自己结合上面的UISpirit的方法先自己写一下看看。这样可以让大家根据学习内容多思考,自己写出的东西才能记得牢固。不要只简单的从网上下载现成的代码用,这样对学习没好处。