首页 >Unity3D频道 >【NGUI研究院之Unity插件】 > NGUI研究院之Sprite精灵与精灵动画的使用（二）
2012
05-21

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下拉列表中。再往下就是设置该精灵在大图的显示区域以及坐标，下图中我们可看到已经在整个大图中框选了一个区域，就是绿色的矩形，矩形中就是当前精灵中的内容。

 

NGUI研究院之Sprite精灵与精灵动画的使用（二） - 雨松MOMO程序研究院 - 1

 

         下面我们将这张图片分为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研究院之Sprite精灵与精灵动画的使用（二） - 雨松MOMO程序研究院 - 2

 

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

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

 

NGUI研究院之Sprite精灵与精灵动画的使用（二） - 雨松MOMO程序研究院 - 3

 

        接着在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祝大家学习愉快啦啦啦！！

 

NGUI研究院之Sprite精灵与精灵动画的使用（二） - 雨松MOMO程序研究院 - 4

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《NGUI研究院之Sprite精灵与精灵动画的使用（二）》有 100 条评论

较新评论 →
  2. 年华里的刺说：
    2012 年 10 月 24 日上午 6:40

    怎么人物动画停不了。destroy好像没效果一样的。组件好像没被消除，求解啊。

    回复
  3. 清若尘说：
    2012 年 10 月 23 日上午 1:23

    感谢提供如此详细的教程，找了好久的说

    回复
  6. AndyLee33说：
    2012 年 10 月 16 日上午 8:46

    MOMO确实节省了一些步骤，和《U3D游戏开发》那本书里一样，不过如果具备一定基础，还是方便读者顺藤摸瓜的

    回复
  7. Administrator_1说：
    2012 年 9 月 25 日上午 9:02

    看不懂啊看不懂，就第一步就出问题了，创建了一个Prefab对象，按照添加了Atlas，却没有出现你的图像显示的东西

    回复
  8. js_nj_zj说：
    2012 年 9 月 25 日上午 3:03

    节省了好多步骤，看不懂

    回复
  9. kuku小夭说：
    2012 年 9 月 19 日上午 9:26

    研究过一段时间这个东西 这个可用来做切分图片，用来做拼图游戏。。

    回复
  10. c说：
    2012 年 9 月 13 日上午 6:52

    请问松哥； 在Project中创建一个Prefab对象，默认给它Transform变换属性？ 我怎么给不了？

    回复
  11. sunhongwei说：
    2012 年 9 月 9 日下午 3:30

    雨松哥，您的NGUI精灵的文章，控制ui定位的脚本放到哪个位置我不太了解，中间少了一些步骤，麻烦您以后有机会将界面操作的就截图发出来分享一下，对于我们这些刚刚接触unity3d的小盆友，您中间觉得简单的步骤，不需要说的步骤，对于我们这些新手来说很珍贵，谢谢您给我们分享这些经验。我真的很苦恼，您给的教程很优秀，同时对于我们这些新手来说，您中间省略的步骤，您觉得很简单可以不用说，我们只要操作错了一步就很难发现哪里 的错误，苦恼的胡乱操作一通，冥思苦想一整天都弄不明白，谢谢了

    回复
  12. HackerSaillen说：
    2012 年 9 月 8 日上午 8:09

    你好雨松，你的《Unity3D游戏开发》已经看过了，写的很好。我在学习NGUI的时候，你的教程给了我很宝贵的经验，不过本人愚笨，有几个问题还是想请教你，如果有时间，麻烦你不吝赐教了。1.我在创建完字体之后，每次保存场景，系统都会发出警告说有对象泄露，原文如下：Cleaning up leaked objects in scene since no game object, component or manager is referencing them Mesh has been leaked 1 times. Texture2D has been leaked 2 times.这是怎么回事？2.如果我想精确定位我的UI的话该怎么做？比如说我想把我的UI定位到 rect(100,50,100,60)这样一个位置的时候应该如何做？使用anchor脚本的时候side我不太明白是什么意思。谢谢了。

    回复
  13. junfind说：
    2012 年 9 月 5 日上午 8:52

    感谢雨松MOMO的给力分享，您的关于NGUI的资料对我们这些新手来说十分宝贵但是您的一些NGUI的文章好像省略了一些步骤，照着做出来就不对（比如NGUI精灵的那一章）请问你可否录制成视频，这样就可以更好的帮助我们学习U3D 谢谢

    回复
  14. daixiwei15说：
    2012 年 8 月 22 日上午 3:07

    momo 请问切图只能用手动填写区域大小的方法，不能采用像动作编辑器一样拖动的方法吗？

    回复
  15. 呱嗒-winty小苒说：
    2012 年 8 月 11 日上午 3:03

    请问，你那个代码的页面 是那弄出来的。。动画，不是导出Animation的窗口做的吗？

    回复
  16. 淡漠默默默默沫说：
    2012 年 8 月 2 日上午 6:16

    我想请问一下 NGUI中设置动画的最后状态只能用代码控制吗？不可以像EZGUI一样直接设置循环，结束状态吗？

    回复
  17. uu说：
    2012 年 5 月 22 日上午 8:56

    雨松 你教程中用到的资源 以后能不能都共享一下啊 这样我们学习起来更方便哇

    回复
较新评论 →

留下一个回复

你的email不会被公开。 必填项已用 * 标注。