zoukankan      html  css  js  c++  java
  • 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脚本共同配合使用。

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

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

  • 相关阅读:
    Oracle列转行函数使用
    JavaScript笔记整理
    23种设计模式之桥梁模式
    23种设计模式之状态模式
    23种设计模式之解释器模式
    23种设计模式之备忘录模式
    23种设计模式之访问者模式
    23种设计模式之观察者模式
    23种设计模式之组合模式
    23种设计模式之适配器模式
  • 原文地址:https://www.cnblogs.com/petto/p/3906200.html
Copyright © 2011-2022 走看看