首页 > 代码库 > 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脚本共同配合使用。
好了,又写这么多,其实真正内容几行代码,几句话就能概括。没办法,我就是爱逼逼逼逼逼逼。
另外说一句:阿里巴巴现在入职不给股票了。呵呵呵呵。