NGUI Sprite精灵与精灵动画的使用

原创文章如需转载请注明：转载自雨松MOMO程序研究院本文链接地址:NGUI研究院之Sprite精灵与精灵动画的使用（二）

         学习了几天Unity3D强大的NGUI插件，MOMO觉得NGUI中最大的亮点之一就是Sprite精灵。我们先说说精灵是什么东西？它可以在一张大图中去截取一部分（大图就是整体图像集合，而截取的小图就是一个精灵），然后起一个精灵的名称，使用时通过精灵的名称就能直接绘制，并且精灵还可以播放动画。总之真的非常强大。本节我们学习如何创建自己的精灵文件。

首先我们在Project中创建一个Prefab对象，默认给它Transform变换属性，暂时我们给Prefab对象起名为MySprite。接着给Prefab挂上图像集合组件。在Unity导航菜单栏中选择Component->NGUI->UI->Atlas（图像集合）即可。

常用的属性介绍：

Coordinates ：UI坐标单位，用默认Pixels（像素）就行。

Pixel Size：像素的长度单位1。

Add/Delete：添加与删除精灵。

first就是当前精灵的名称，如果已添加了多个精灵都会出现在Sprite下拉列表中。再往下就是设置该精灵在大图的显示区域以及坐标，下图中我们可看到已经在整个大图中框选了一个区域，就是绿色的矩形，矩形中就是当前精灵中的内容。

 

 

         下面我们将这张图片分为4块完全相等的精灵，接着我们学习在代码中如何控制这些精灵的绘制以及排序。创建脚本Test.cs并且将它挂在刚刚创建的精灵对象身上。

Test.cs

using UnityEngine; using System.Collections; using System.Collections.Generic;
public class Test : MonoBehaviour {
void Start() {
//得到精灵组件脚本 UISprite ui = gameObject.GetComponent<UISprite>();
//得到图像集合中精灵的数量 Debug.Log("精灵的数量" + ui.atlas.spriteList.Count);
//得到图像集合数组中对应角标精灵对象的名称 string name = ui.atlas.spriteList[2].name;
//设置显示精灵的名称 ui.spriteName = name;
//设置精灵的深度，数值越大绘制的越靠前 ui.depth = 2; } }

如下图所示，精灵已经在代码中动态的修改完毕，并且设置了它的深度让它靠前显示。如果想修改它的X、Y位置，直接修改Transform即可。Z轴的话修改它的深度就行，不用修改Z轴坐标。

 

 

下面我们再来学习一下精灵动画，NGUI已经帮我们封装了专门播放精灵动画的类UISpriteAnimation 专门处理精灵动画。MOMO在网上随便找了一组2D主角的行走动画，按照上面介绍的方法将整个图片导入工程中。如下图所示，这组人物的行走动画我们选区取左移动的4帧。

这里我在强调一下，需要修改修改材质的着色器，让他支持背景透明，对当前材质的着色器我们选择Unlit/TransparentColored。

 

 

        接着在Hierarchy视图中选择Sprite(NGUI)（刚刚创建的精灵对象），然后在Unity导航菜单栏中选择Component->NGUI->UI->Sprite Animation（帧动画）组件即可。此时直接运行游戏我们就会发现主角已经按照刚刚裁剪的精灵顺序动了起来，这还没有完，我们下面学习在代码中如何动态的控制精灵。

        本例我们的目的是使用NGUI在屏幕中创建一个按钮，第一次点击按钮主角播放行走动画，再次点击按钮主角动画将停止。上篇文章中我们已经学习了NGUI中按钮的相应事件，如果想在别的对象或者脚本中监听某个按钮的点击事件那么就可以使用传递消息的方式。NGUI帮我们封装了一次传递消息的类，Unity导航菜单栏中选择NGUI-》Interaction->ButtonMessage。它的原理也是使用Unity的sendMessage，有兴趣的朋友可以去看看。接着说正题，创建脚本Test.cs挂在刚刚创建的按钮上。

Test.cs

 

using UnityEngine;

using System.Collections;

using System.Collections.Generic;

public class Test : MonoBehaviour {

//播放动画与不播放

bool isPlayAnim = false;

//得到精灵对象

GameObject animObj = null;

void Start()

{

//得到精灵对象

animObj = GameObject.Find("Sprite");

}

void OnClick ()

    {

if(isPlayAnim)

{

//停止动画

isPlayAnim = false;

//销毁UISpriteAnimation组件

Destroy(animObj.GetComponent<UISpriteAnimation>());

//动画停止后设置精灵默认的帧

UISprite ui = animObj.GetComponent<UISprite>();

string name = ui.atlas.spriteList[0].name;

ui.spriteName = name;

}

else

{

//播放播放

isPlayAnim = true;

//加入播放动画组件

animObj.AddComponent("UISpriteAnimation");

//设置播放动画的速度

//1-60之间数值越大播放速度越快

UISpriteAnimation uiAnim = animObj.GetComponent<UISpriteAnimation>();

uiAnim.framesPerSecond = 10;

}

    }

}

如下图所示，运行游戏点击按钮。主角开始迈着大步开始行走了，再次点击主角将停止播放行走动画。嚯嚯。最后MOMO祝大家学习愉快啦啦啦！！  

 

把图加进prefab的步骤，选中要添加的图，再点击菜单ngui->atlas maker->Add/Update All,就可以把图build进去了