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脚本共同配合使用。

 

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

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