首页 > 代码库 > NGUI中Button与原生2D精灵的混合使用

NGUI中Button与原生2D精灵的混合使用

一些废话

每一篇的首段都是这个“一些废话”,原因是我太能逼逼了,不逼逼一些废话我就觉得难受。这是我第四篇关于Unity的博文,前两篇还是去年写的,“从一点儿不会开始”系列,类似教程和学习笔记的博文,这个系列还会继续的,我没有太监。。。如果真的有朋友觉得能因此得到一点点的帮助,那就太太开心了。

最近在(shan)做(zhai)一个小游戏,UI刚开始用的是原生2D,用着用着发现NGUI似乎更省事儿(“为什么刚开始你不用NGUI?”“我擦我刚开始那会儿还不会好么。。。”),然后之前原生2D写的又不想完全删了重新搞。研究了一些时间,发现可以这么搞(高手就别看了,给一些类似我这样的菜鸟看着玩儿的)。

 

实现

NGUI 的 Button组建为我们提供了很多方便的事件,这里就不一一赘述了。

我这次主要是想做这样一个Button:普通状态的时候用第一张图片,按下的时候用第二张图片,这样看起来有个按下的效果。其实NGUI的Button组建原生是支持上述功能的,如图:

 

是的,Sprites集合中提供了四种状态时候呈现的样子。

但是,它必须是NGUI中的Sprite类型的,要想用,就必须将想用到的按钮制作成NGUI的图集,然后添加进来。

想想,如果我们确实有一张一张的PNG或其他格式的图片,直接制作成一个NGUI的图集确实没任何问题。

然而,加入我们只有一张本身就是图集的PNG呢?我们想要的按钮图片只是这张PNG中的一部分。这怎么做呢?还做成NGUI图集,然后慢慢切成单个的一个一个的小的NGUI的Sprite?呵呵,累死你!!!

 

Unity2d 为我们提供了一个非常方便的截取精灵的工具:Sprite Editor,如图:

将上述的PNG图集设置为 Sprite,Multiple,点击 Sprite Editor按钮。

然后就进来了,点击自动切割就切割好了。(这个工具太直观了,就算你第一次用,随便看看也就回了,这里就不在多废话说怎么用了)

 

切割了两个我想制作按钮的图片后。一切就都简单了。

在Hierarchy视图中创建一个空物体。再将刚刚的两个按钮图片一次添加为其的子物体。正常现实的那个设置为Active,按下才显示的那个Active为false。

如图:

 

然后给空物体添加NGUI的UIButton组建,再添加一个碰撞体并勾选上IsTrigger。

 

接下来我们就要写几行代码了。用来实现上上上上述功能“正常一张图、按下一张图”。

using UnityEngine;using System.Collections;public class NGUIButtonControl : MonoBehaviour{    public GameObject NormalStyle;    public GameObject PressedStyle;       void OnPress (bool isPressed)    {       if(PressedStyle !=null)       {           PressedStyle.SetActive(isPressed);       }       if(NormalStyle != null)       {           NormalStyle.SetActive(!isPressed);       }           }}

哎呦,太特么简单了好么。

好了,把这个脚本挂载到空物体上。并将空物体的两个子对象(就是那两个原生2D切出来的精灵)分别赋给该脚本的NormalStyle和PressedStyle。

最终该空物体的组件如图:

 

好了。这就完成了。点击一下试试吧。: )

 

总结

这种方法一般适用于手中的资源不方便制作成NGUI的图集(“为什么不方便?”“废话我又不是美工,我这张图是从别人的包里考出来,啊不,从网络上下载的,就是一整张图集”),

然后又想实现按钮按下、抬起、等等效果的场景下。

主要是利用Unity提供的Sprite Editor工具来切割成一个一个原生2D的精灵。与NGUI为我们提供的UIButton脚本共同配合使用。

 

好了,又写这么多,其实真正内容几行代码,几句话就能概括。没办法,我就是爱逼逼逼逼逼逼。

另外说一句:阿里巴巴现在入职不给股票了。呵呵呵呵。