首页 > 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

 

如下图所示,精灵已经在代码中动态的修改完毕,并且设置了它的深度让它靠前显示。如果想修改它的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

 

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

 

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

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

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

  1. unity的路还长 说:

    雨松大大 2.6版本的NGUI怎么在一个Atlas中新建一个Sprite啊 能不能讲解一下啊 求大神指点

  2. 山里人 说:

    雨松大大 2.6版本的NGUI怎么在一个Atlas中新建一个Sprite啊 老版本的都有这个按钮的 怎么新版本找不到了

  3. 崔瑞明 说:

    我按照这个方法,制作了一个Loading的效果,但是发布到安卓手机上之后,出现问题了,只有第一张显示,之后就是i黑色的了,不能出现动画的效果?MoMo老师,求解答

  4. 在Unity导航菜单栏中选择Component->NGUI->UI->Atlas(图像集合)即可。 为什么选择Atlas时 选项是灰色的 不能选?

    • 裴志加 说:

      1 “在Project中创建一个Prefab对象,默认给它Transform变换属性”这句话很难理解,我没办法直接给Prefab一个变换属性,我做法是创建一个Empty(GameObject——CreatEmpty),将其属性归零,然后拖动到Prefab里。就不会是灰色了还有现在版本新了 按照这教程继续下去 发现没有切割的选项 add那里没有

    • 梦星魂 说:

      朋友,你要先选中游戏对象然后才添加Atlas组件的。。

  5. ruih潘志威 说:

    雨松老师 那个有个帧动画是由两千多张图组成的,动画是一个人物在动,图上的人头是挖空的,图下有个人脸的3d模型跟着动画动,那这个帧动画我如何实现呢,这是移动端的应用

  6. 卢小贱 说:

    坑爹啊!!步骤不全!!第一个例子就出现问题了~~真无语啊~~momo你就不能在一些细节的地方详细点吗~~

  7. czl 说:

    跟张仁杰同样的问题,包括Add/Delete ,后面的东西都看不到。我用的最新版本的NGUI,也就是2.6.3

  8. 陈志龙 说:

    跟张仁杰同样的问题,包括Add/Delete ,后面的东西都看不到。我用的最新版本的NGUI,也就是2.6.3

  9. 要不要这么给力。。需要什么知识点,你这都有权威的讲解,粉一个

  10. 463990727 说:

    雨松你好,请问下能否通过UISpriteAnimation控制播放帧的范围呢?比如我只想播放ui.Atlas.spriteList[0]~ ,该怎么实现呢?还有就是关于关于第三篇的动态添加列表那里的自动修改预设的旋转系数那里,能否通过ui.MakePixelPerfect()实现?我到最后还是没做出来,实在不懂了,HELP。

  11. 张仁杰 说:

    ui.atlas.spriteList ,,为什么U3D提示 缺少引用空间,并且说 UIATLS类型中 不包含spritelist的方法,求解 老师

  12. 463990727 说:

    我来稍微说一下吧,可能有误:NGUI版本:2.0.3d;UNITY3的版本:3.5.0f;在分割成4部分精灵取其一显示的例子中,很关键的一点就是prefab不但要挂载UIAtlas,还要手动拖动一个UISprite脚本给它,否则它一直在控制台里头喊:UISprite ui是空的!快点给我赋值!新手我眼泪汪汪查了半天UIAtlas是否会直接调用它里头的图集精灵,还去查动态调用UIAtlas中的UISprite的例子,一直木有看见教程里头有放UISprite脚本的,自己拖了个附上去,不知道正确否?又或者歪打误撞成功了但会引起别的问题?继续泪汪汪。

  13. 张仁杰 说:

    老师 为什么 我Unity用的4.0 NGUI用的2.5 照你写的做 怎么添加组件Component->NGUI->UI->Atlas(图像集合)即可。 常用的属性介绍: Coordinates :UI坐标单位,用默认Pixels(像素)就行。 Pixel Size:像素的长度单位1。 Add/Delete:添加与删除精灵。我上面知道Pixel Size 后面Add/Delete 是没有的 是什么原因?NGUI版本过高吗?

  14. Pingback 引用通告: 口角液

  15. Roses Funeral 说:

    大神问一下为什么我现在的NGUI不能去切割精灵啊!!出现选中框了之后不知道怎么操作了!没有切割和保存到图像集 的选项!求大神指点下!万分感激。。。unity是4. 0 NGUI2.3 2.2 2.5 都试过了。

  16. 薛飞 说:

    关于精灵,MOMO还有很多保留,这个功能摸索了一天,终于实现了MOMO的这个例子,发现MOMO少说了一些关键步骤,对于刚接触的初学者来说,很难照着完成。因为高版本NGUI用不了,总出错,目前我用的是2.0.3d版本的,我就说一下我学习的心得。1 “在Project中创建一个Prefab对象,默认给它Transform变换属性”这句话很难理解,我没办法直接给Prefab一个变换属性,我做法是创建一个Empty(GameObject——CreatEmpty),将其属性归零,然后拖动到Prefab里。2 “第一次点击按钮主角播放行走动画,再次点击按钮主角动画将停止”的前提是别在精灵里面添加Sprite Animation属性,添加的话动画停不了,因为脚本会赋予一个同样的属性。其余的小问题容易摸索出来,就不说了。我买了你那本《Unity3d游戏开发》,最后一个章节还没做,期间有时发生照着抄也实现不了的情况,现在想想很无语,因为刚开始学编程,经常拼写和命名有问题,但这个问题遇到的时候会被困扰很久,建议MOMO在以后出基础教程的时候写点对入门人士的一些建议。PS:4月20日上海这边有Unity3d开发者大会,里面没你参加,着实遗憾,见不到本尊了。

  17. 海蓝乐 说:

    大神 我卡在 new Sprite 这里 我的uniry 怎么没这个按钮 只有 clone sprite 我的unity是2.2.2版本的

  18. naoh 说:

    我用了动画组建人物没有动起来是怎么回事?

  19. naoh 说:

    为什么我没有动画?

  20. 疑问ing 说:

    和上面一样的问题

  21. 运行的时候,会出现ngui的logo和下载网址,怎么去除呢?

  22. 森涛陆 说:

    bool isPlayAnim = true;吧否则实现不了

  23. 大神请问为什么我在这一步“在Unity导航菜单栏中选择Component->NGUI->UI->Atlas(图像集合)即可”的时候“Atlas”是灰色的呢??

  24. yjwei 说:

    MOMO老师,有NGUI研究院之Sprite精灵与精灵动画的使用(二)这个工程的demo么,可以发我邮箱让我学习一下么?

  25. red8ricker 说:

    momo老师 这个 anime的顺序是怎么决定的呢 有办法反向播放么?

  26. 焦明 说:

    MOMO能找时间写一篇关于NGUI移植到android平台的博客么? 这个分辨率问题太让人头疼了

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

  28. 清若尘 说:

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

  29. 雨松MOMO 说:

    仔细检查检查吧。。

  30. AndyLee33 说:

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

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

  32. js_nj_zj 说:

    节省了好多步骤,看不懂

  33. kuku小夭 说:

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

  34. c 说:

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

  35. sunhongwei 说:

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

  36. 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定位到 rect(100,50,100,60)这样一个位置的时候应该如何做?使用anchor脚本的时候side我不太明白是什么意思。谢谢了。

  37. junfind 说:

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

  38. daixiwei15 说:

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

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

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

  41. uu 说:

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

留下一个回复

你的email不会被公开。