NGUI研究院之Sprite精灵与精灵动画的使用（二） - 雨松MOMO程序研究院分享到一键分享QQ空间新浪微博百度搜藏人人网腾讯微博百度相册更多...百度分享订阅本站
专注移动互联网开发关于我们 雨松MOMO程序研究院-
首页 Unity3D频道 关于我们 我的著作 当前位置: 雨松MOMO程序研究院 > 【NGUI研究院之Unity插件】 > 文章正文
NGUI研究院之Sprite精灵与精灵动画的使用（二）时间: 2012-05-21 / 分类: 【NGUI研究院之Unity插件】 / 浏览次数: 1186
浏览数 / 58条评论个评论 发表评论 -
学习了几天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
view source01using UnityEngine;
02using System.Collections;
03using System.Collections.Generic;
04
05public class Test : MonoBehaviour {
06
07 void Start()
08 {
09
10 //得到精灵组件脚本
11 UISprite ui = gameObject.GetComponent<UISprite>();
12
13 //得到图像集合中精灵的数量
14 Debug.Log("精灵的数量" + ui.atlas.spriteList.Count);
15
16 //得到图像集合数组中对应角标精灵对象的名称
17 string name = ui.atlas.spriteList[2].name;
18
19 //设置显示精灵的名称
20 ui.spriteName = name;
21
22 //设置精灵的深度，数值越大绘制的越靠前
23 u
i.depth = 2;
24 }
25}
如下图所示，精灵已经在代码中动态的修改完毕，并且设置了它的深度让它靠前显示。如果想修改它的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
view source01using UnityEngine;
02using System.Collections;
03using System.Collections.Generic;
04
05public class Test : MonoBehaviour {
06
07 //播放动画与不播放
08 bool isPlayAnim = false;
09 //得到精灵对象
10 GameObject animObj = null;
11
12 void Start()
13 {
14 //得到精灵对象
15 animObj = GameObject.Find("Sprite");
16
17 }
18
19 void OnClick ()
20 {
21 if(isPlayAnim)
22 {
23 //停止动画
24 isPlayAnim = false;
25 //销毁UISpriteAnimation组件
26 Destroy(animObj.GetComponent<UISpriteAnimation>());
27
28 //动画停止后设置精灵默认的帧
29 UISprite ui = animObj.GetComponent<UISprite>();
30 string name = ui.atlas.spriteList[0].name;
31 ui.spriteName = name;
32
33 }
34 else
35 {
36 //播放播放
37 isPlayAnim = true;
38 //加入播放动画组件
39 animObj.AddComponent("UISpriteAnimation");
40 //设置播放动画的速度
41 //1-60之间数值越大播放速度越快
42 UISpriteAnimation uiAnim =
animObj.GetComponent<UISpriteAnimation>();
43 uiAnim.framesPerSecond = 10;
44 }
45
46 }
47
48}
如下图所示，运行游戏点击按钮。主角开始迈着大步开始行走了，再次点击主角将停止播放行走动画。嚯嚯。最后MOMO祝大家学习愉快啦啦啦！！
MOMO与MO嫂提醒您：亲，如果您觉得本文不错，快快将这篇文章分享出去吧 。另外请点击下方广告支持本站发展，谢谢！
14
您可能喜欢：
Cocos2D研究院之精灵与动画（六）Android研究院之游戏开发帧动画（三）Android研究院之游戏开发AnimationDrable动画（十八）Unity3D研究院之两种方式播放游戏视频（二十五）Android研究院之游戏开发Tween动画的实现（十九）Unity3D研究院之FBX模型的载入与人物行走动画的播放（十二）NGUI研究院之开发项目的一些使用心得比较细节（五）Unity3D研究院之感应IOS设备旋转与iPhone键盘事件（十六）Unity3D研究院之构建简单的游戏世界（三）Unity3D研究院之高尔夫球推杆游戏Demo（三十四）
友荐[?]
-
上一篇: Cocos2D研究院之初识Cocos2d（二）下一篇: Cocos2D研究院之CCNode详解（三）标签: NGUI研究院, Sprite精灵,
Unity3D研究院, 宣雨松, 游戏开发, 雨松MOMO
本文链接: NGUI研究院之Sprite精灵与精灵动画的使用（二）
版权所有: 雨松MOMO程序研究院, 转载请注明本文出处。
喜欢取消喜欢1 人喜欢
社交帐号登录：微博QQ人人豆瓣开心更多»淘宝网易搜狐百度谷歌
说点什么吧 ...不想登录？直接点击发布即可作为游客留言。发布
从新到旧排序从旧到新排序
58条评论14条新浪微博3条腾讯微博naoh
我用了动画组建人物没有动起来是怎么回事？
2012年12月11日回复 举报
naoh
因为在Prefab上需要多new出些精灵...............一直卡在这里了.............
2012年12月11日回复 举报
naoh
为什么我没有动画？
2012年12月11日回复 举报
悸花microBlog
运行的时候，会出现ngui的logo和下载网址，怎么去除呢？
2012年11月19日回复 举报
雨松MOMO
你那个是使用版本 使用版本带水印。。。
2012年11月19日回复 举报
悸花microBlog
解决了。还有个问题就是，我运行的时候，图片是灰的，不知道怎么能
调亮，我在render setting里设置了，没有作用。
2012年11月20日回复 举报
默默
运行的时候，会出现ngui的logo和下载网址，你是怎么去除的？
2012年12月22日回复 举报
森涛陆
bool isPlayAnim = true；吧
否则实现不了
2012年11月17日回复 举报
优雅的肥仔
大神请问为什么我在这一步“在Unity导航菜单栏中选择Component->NGUI->UI->Atlas（图像集合）即可”的时候“Atlas”是灰的呢？？
2012年11月15日回复 举报
雨松MOMO
你重新导入一下就好了
2012年11月15日回复 举报
优雅的肥仔
3Q``但导进去的时候系统报无法解压...我自己再看下好了
2012年11月16日回复 举报
稻长
大神，我的也是灰的，重新导入还是灰的
2012年12月15日回复 举报
Unity
你没有选中物体或者说是Prefab
2012年12月10日回复 举报
yjwei
MOMO老师，有NGUI研究院之Sprite精灵与精灵动画的使用（二）这个工程的demo么，可以发我邮箱让我学习一下么？
2012年11月12日回复 举报
雨松MOMO
工程早都不到了 呵呵
2012年11月15日回复 举报
red8ricker
momo老师 这个 anime的顺序是怎么决定的呢 有办法反向播放么？
2012年11月4日回复 举报
雨松MOMO
有办法 具体你看一下他的源码。。
2012年11月15日回复 举报
焦明
MOMO能时间写一篇关于NGUI移植到android平台的博客么？ 这个分辨率问题太让人头疼了
2012年10月24日回复 举报
雨松MOMO
安卓这东西 确实挺烦人的。。
2012年11月15日回复 举报
年华里的刺
到原因了。。。
2012年10月24日回复 举报
雨松MOMO
到了就好了
2012年11月15日回复 举报
年华里的刺
怎么人物动画停不了。destroy好像没效果一样的。组件好像没被消除，求解啊。
2012年10月24日回复 举报
清若尘
管理费用明细科目
感谢提供如此详细的教程，了好久的说
2012年10月23日回复 举报
雨松MOMO
呵呵 过奖了。。
2012年10月23日回复 举报
AndyLee33
MOMO确实节省了一些步骤，和《U3D游戏开发》那本书里一样，不过如果具备一定基础，还是方便读者顺藤摸瓜的
2012年10月16日回复 举报
雨松MOMO
也许吧 呵呵文章写的早一些了。。
2012年10月20日回复 举报
Administrator_1
看不懂啊看不懂，就第一步就出问题了，创建了一个Prefab对象，按照添加了Atlas，却没有出现你的图像显示的东西
2012年9月25日回复 举报
雨松MOMO
仔细检查检查吧。。
2012年10月20日回复 举报
曾奇凡
和上面的一样的问题
2012年11月7日回复 举报
疑问ing
和上面打工人梗刷屏
一样的问题
2012年12月10日回复 举报
js_nj_zj
节省了好多步骤，看不懂
2012年9月25日回复 举报
雨松MOMO
额。。
保护个人隐私2012年10月20日回复 举报
kuku小夭
研究过一段时间这个东西 这个可用来做切分图片，用来做拼图游戏。。
2012年9月19日回复 举报
雨松MOMO
我知道 你好像还做了一个类游戏 蛤蛤
2012年9月19日回复 举报
c
请问松哥； 在Project中创建一个Prefab对象，默认给它Transform变换属性？ 我怎么给不了？
2012年9月13日回复 举报
c
我i知道了； 要绑定一个空对象对吧；
2012年9月13日回复 举报
sunhongwei
雨松哥，您的NGUI精灵的文章，控制ui定位的脚本放到哪个位置我不太了解，中间少了一些步骤，麻
烦您以后有机会将界面操作的就截图发出来分享一下，对于我们这些刚刚接触unity3d的小盆友，您中间觉得简单的步骤，不需要说的步骤，对于我们这些新手来说很珍贵，谢谢您给我们分享这些经验。
我真的很苦恼，您给的教程很优秀，同时对于我们这些新手来说，您中间省略的步骤，您觉得很简单可以不用说，我们只要操作错了一步就很难发现哪里
的错误，苦恼的胡乱操作一通，冥思苦想一整天都弄不明白，谢谢了
2012年9月9日回复 举报
HackerSaillen
你好雨松，你的《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定位到
造梦西游3咋抓宠物rect(100,50,100,60)这样一个位置的时候应该如何做？使用anchor脚本的时候side我不太明白是什么意思。
谢谢了。
2012年9月8日回复 举报
junfind
感谢雨松MOMO的给力分享，您的关于NGUI的资料对我们这些新手来说十分宝贵
但是您的一些NGUI的文章好像省略了一些步骤，照着做出来就不对（比如NGUI精灵的那一章）
请问你可否录制成视频，这样就可以更好的帮助我们学习U3D 谢谢
2012年9月5日回复 举报
雨松MOMO
有时间的话一定， 最近实在是太忙了 不好意思啊 哥们。。。
2012年9月5日回复 举报
junfind
恩 没事的
2012年9月6日回复 举报
daixiwei15
momo 请问切图只能用手动填写区域大小的方法，不能采用像动作编辑
器一样拖动的方法吗？
2012年8月22日回复 举报
雨松MOMO
不可以的。 等待NGUI升级吧。
2012年8月23日回复 举报
呱嗒-winty小苒
请问，你那个代码的页面 是那弄出来的。。动画，不是导出Animation的窗口做的吗？
2012年8月11日回复 举报
雨松MOMO
那个代码页面？ 动画用的是animation
2012年8月12日回复 举报
淡漠默默默默沫
我想请问一下 NGUI中设置动画的最后状态只能用代码控制吗？不可以像EZGUI一样直接设置循环，结束状态吗？
诺基亚1200保密码2012年8月2日回复 举报
雨松MOMO
可以用代码控制的， 你可以看它的源码。
2012年8月2日回复 举报
淡漠默默默默沫
我看了你写的代码 可以实现 我想知道有没有其他简便的方法 因为EZGUI里面只要调整属性的参数就可以了
2012年8月2日回复 举报
雨松MOMO
EZGUI 我没有用过噢
2012年8月2日回复 举报
uu
雨松 你教程中用到的资源 以后能不能都共享一下啊 这样我们学习起来更方便哇
2012年5月22日回复 举报
雨松MOMO
好的提议，以后我尽量就共享出来 没问题哈！
2012年5月22日回复 举报
失落的宇宙
支持松松
2012年5月21日回复 举报
雨松MOMO
感谢宇宙，爬在树上的程序猿！
2012年5月22日回复 举报
失落的宇宙
不客气，不要葱、不要蒜、不要蒜苗的松松！
2012年5月22日回复 举报
ZXGoto
顶一下
2012年5月21日回复 举报
Rayna
2012年5月21日回复 举报
雨松MOMO
感谢支持哈！！
2012年5月21日回复 举报
Rayna
2012年5月21日回复 举报1
雨松MOMO程序研究院正在使用多说
naoh on 2012 年 12 月 11 日 at 上午 10:03 said:
我用了动画组建人物没有动起来是怎么回事？
naoh on 2012 年 12 月 11 日 at 上午 10:09 said:
因为在Prefab上需要多new出些精灵……………一直卡在这里了………….
naoh on 2012 年 12 月 11 日 at 上午 10:03 said:
为什么我没有动画？
疑问ing on 2012 年 12 月 10 日 at 上午 7:51 said:
和上面一样的问题
悸花microBlog on 2012 年 11 月 19 日 at 上午 8:41 said:
可可
运行的时候，会出现ngui的logo和下载网址，怎么去除呢？
雨松MOMO on 2012 年 11 月 19 日 at 上午 8:42 said:
你那个是使用版本 使用版本带水印。。。
悸花microBlog on 2012 年 11 月 20 日 at 上午 9:08 said:
解决了。还有个问题就是，我运行的时候，图片是灰的，不知道怎么能调亮，我在render setting里设置了，没有作用。
默默 on 2012 年 12 月 22 日 at 上午 6:52 said:
运行的时候，会出现ngui的logo和下载网址，你是怎么去
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论