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

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
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

C#
1
2
3
4
5
6
7
8
9
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
45
46
47
48
49
50
 
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 条评论

← 早期评论
较新评论 →
  1. czl 说：
    2013 年 6 月 27 日下午 3:01

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

    回复
  2. 陈志龙 说：
    2013 年 6 月 27 日下午 2:56

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

    回复
  3. 撕扯滴青春 说：
    2013 年 6 月 4 日上午 2:03

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

    回复
  4. 463990727 说：
    2013 年 5 月 29 日下午 10:22

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

    回复
  5. 张仁杰 说：
    2013 年 5 月 27 日下午 12:45

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

    回复
  6. 463990727 说：
    2013 年 5 月 27 日上午 4:31

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

    回复
  7. 张仁杰 说：
    2013 年 5 月 21 日下午 3:59

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

    回复
  8. Roses Funeral 说：
    2013 年 4 月 23 日上午 7:41

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

    回复
  9. 薛飞 说：
    2013 年 4 月 2 日上午 2:33

    关于精灵，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开发者大会，里面没你参加，着实遗憾，见不到本尊了。

    回复
  11. 海蓝乐 说：
    2013 年 3 月 19 日上午 4:31

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

    回复
  12. naoh 说：
    2012 年 12 月 11 日上午 10:03

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

    回复
  13. naoh 说：
    2012 年 12 月 11 日上午 10:03

    为什么我没有动画？

    回复
  14. 疑问ing 说：
    2012 年 12 月 10 日上午 7:51

    和上面一样的问题

    回复
  15. 悸花microBlog 说：
    2012 年 11 月 19 日上午 8:41

    运行的时候，会出现ngui的logo和下载网址，怎么去除呢？

    回复
  16. 森涛陆 说：
    2012 年 11 月 17 日上午 2:05

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

    回复
  17. 优雅的肥仔 说：
    2012 年 11 月 15 日上午 1:54

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

    回复
  18. yjwei 说：
    2012 年 11 月 11 日下午 4:21

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

    回复
  19. red8ricker 说：
    2012 年 11 月 4 日下午 2:41

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

    回复
  20. 焦明 说：
    2012 年 10 月 24 日下午 1:25

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

    回复
← 早期评论
较新评论 →

留下一个回复

你的email不会被公开。