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

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

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

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

时间: 2024-08-02 15:10:53

NGUI中Button与原生2D精灵的混合使用的相关文章

关于NGUI与原生2D混用相互遮盖的问题心得

哎呦操终于弄得差不多了,赶紧记下 别又忘了. Native2D自己可以使用Sort Layer来排序,每层又有不同的Order In Layer,这样每一个精灵就能自然而然调节谁来遮盖谁了. 但NGUI一起混用就不行了. 被折磨很久,得出以下几点结论. 1.NGUI处于Sort Layer中的Default层,且Order In Layer为0. 2.把原生2D精灵设置在Default且Order In Layer为0的时候,与NGUI处在同一位置,此时调节Z轴就好了.Z越小越在上. 3.优先级

Unity3D在NGUI中使用mask

过程是这样的:最近一直想做一个头像的mask效果,后来发现原来unity的mask需要用shader来写,网上找了不少资料,也能实现,不过大多数都是用render texture作为相机投影的texture.然后把这个相机的图像作为一个material,然后在ngui中创建一个texture,把这个material赋给texture.怎么说呢,这种方式虽然也能实现,但是必须要创建一个相机,对于一个大型项目来说有点不切实际.一个头像加个mask多简单的一件事,肯定有更好的办法. 最终还是找到了一种

将Unity中的世界坐标转换成NGUI中的坐标

将Unity中的世界坐标转换成NGUI中的坐标,比如可用于自制血条等.代码如下: 1 using UnityEngine; 2 using System.Collections; 3 public class Healthbar : MonoBehaviour { 4 public GameObject TargetObject; //目标物体.这里是指Cube 5 public Camera worldcamera; //世界相机. 6 public Camera guiCamera; //U

android中button点击两次才响应onclick方法

页面上刚好有EditText   而此时焦点在EditText上  我们点击button时会出现这种情况: 第一次点击好像是获取焦点,第二次才是点击事件 xml文件中button增加android:focusableInTouchMode="false"

Android中Button的五种监听事件

简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activity本身作为事件监听器,实现onClickListener5.外部类作为监听器 ButtonListenerActivity.class public class ButtonListenerActivity extends AppCompatActivity implements View.On

Android GridView中Button点击事件onItemClick不能响应

今天在捣鼓一个类似于百度贴吧的东西.布局:上面是个ActionBar标题栏,然后是一个GridView布局,在Java代码中动态加载关注的贴吧,一切就绪中,很愉快的弄好了! 现在需要点击选项进入某个贴吧,那么问题来了—— GridView中Button点击事件onItemClick不能响应. 所以,主要的猫腻还是在com.android.internal.R.attr.buttonStyle这个里面,查看这个xml文件,Button设置多了两个属性如下:<item name="androi

html中button自动提交表单?

在ie中,button默认的type是button,而其他浏览器和W3C标准中button默认的属性都是submit

安卓ViewPager中Button点击事件弹出Dialog

首先页面采用ViewPager,在第一个页面中有一个按钮,要求点击这个页面上的按钮弹出一个对话框. 先贴出效果图: 分析难点:1.在ViewPager中,共有四个选项卡页,找到第一个页面中Button按钮.先贴出代码: 1 package com.example.acountrecorder; 2 import java.util.ArrayList; 3 import java.util.HashMap; 4 import java.util.List; 5 import com.exampl

html中&lt;button&gt;标签的type

HTML的<button>标签的type主要都三种可选值,reset.submit.button. 其中reset为重置按钮,用于清除form表单的数据:submit为提交按钮,点击后会对form表单做提交操作(除去其他因素):button为单纯按钮类型,一般会对该类型的<button>添加js脚本的点击触发事件. 这里重点要说的是,一般来讲,应该始终为<button>按钮规定 type 属性.但是如果<button>按钮未写明type,不同的浏览器会做不同