NGUI是Unity的一个插件,使用它来制作你的游戏UI必定将事半功倍。为什么这么说呢?首先我们说说GUI与NGUI的区别,GUI是Unity自带的绘制界面工具,它的成像原理是基于表层的,所以执行效率非常的低,并且没有提供复杂的UI的接口,就算开发者硬着头皮写上去只能让UI的执行效率更低。然而NGUI 完全依赖与3D就好比在游戏世界中的摄像机直直的照射在一个平面中,在平面之上再去绘制自己的UI,所以它的执行效率会非常高。
NGUI是一款收费的插件,在Asset Store中大家可以看到价格。在未购买正版的前提下我们可以通过两种方法来使用NGUI,第一种:使用官方提供的免费版本,但是这个版本中有NGUI的水印,无法正式发布不过完全可以作为学习使用。第二种:使用别人购买过的正版插件,在互联网中有朋友放出NGUI的插件。
这里提供免费版本NGUI的下载地址,欢迎大家和MOMO一起学习
下载地址: http://www.tasharen.com/get.php?file=NGUI
插件下载完毕后打开Unity开始导入插件,首先在Project视图中右键选择Import Package->Custom Package->ngui_free.unitypackage(刚刚下载至本地的插件)导入完毕后,请刷新一下你的工程确保Unity导航菜单栏中出现NGUI的菜单项,Unity的版本不同可能导致NGUI导入时不存在菜单项,也可以退出Unity在重新进入即可。
首先在新创建的Unity工程中删除Hierarchy视图中原有的摄像机对象,在Unity导航栏菜单中选择NGUI->Create a New UI。可以理解为创建摄像机,并且这个摄像机直直的照射在平面中,该平面就是我们的UI平面。如下图所示,点击Create a New UI 菜单项后弹出UI Tool工具栏。Layer下拉列表表示摄像机的显示层,用过摄像机的都应当清楚吧? Camera下拉列表设置摄像机的朝向是2D 还是3D,最后直接点击Create Your UI即可创建一个新的界面。
接着NGUI会自动帮我们在Hierarchy视图中生成如下的对象关系。
UI ROOT(2D):看着名字我想搞程序的都应该知道是啥意思吧?界面根节点、入口点。
Camera :NGUI生成的摄像机对象,它将直直的照射在锚点面板。
Anchor:界面的锚点,影响UI的显示位置。它下面会挂着面板。
Panel:面板,摄像机照射着它,它下面会挂一些控件,比如标签、按钮、精灵、拖动条等等。
接着我们开始创建界面组件,在Unity导航菜单栏中选择NGUI-> Create a Widget创建小部件,然后选择字体与图像集合,这里先选择它自带的图像集合,后面我们在学习如何制作自己的图像集合。接着选择贴图的模板最后完成创建即可,这里我们创建一个简单的贴图。
(点击图片查看大图)
OK下面我们将材质绑定在刚刚创建的Simple Texture身上。如下图所示,Transform中是名对象的变换。
P:X、Y、Z坐标
R:X、Y、Z轴的旋转
S :X可理解为图片宽,Y理解为图片高
刚刚我们创建的模板为Simple Texture,NGUI会帮我们绑定UITexture脚本。
Material:添加的材质对象,为了让材质显示的更加清晰,我们设置材质的着色器为Unlit/Texture
Depth:表示深度,就好比UI绘制的先后顺序,数值越高越先绘制,它主要应用于Sprite精灵(后面详细说),在Simple Texture中设置无效,不过可以通过修改Z轴坐标的形式来更改绘制顺序。
Color Tint: 设置颜色,用于没有贴图的材质。
Correction:自动设置图片宽高,就好比本例中我的图片宽高是128X128,点击该按钮后会自动修改Transform中S的X = 128与Y = 128。
Pivot:贴图显示的锚点,没什么大问题。
Preview:是否在监测面板视图中预览下方我的头像贴图。
继续创建一个Simple Texture 绑定在面板中,男生和女生的头像都显示了出来 嚯嚯。如图所示最后的效果图。
OK接着我们创建一个简单的按钮,Fantasv Atlas是NGUI 资源包中自带的一组图像集合。下一篇文章中我会介绍如何自定义这个图像集合,Template中选择Button,Background选择“NGUI”,“NGUI”是Fantasv Atlas图片集合中的一个图像,我们用他做为我们的按钮背景。
然后编写简单的脚本来监听这个按钮的点击事件、这段代码的意思就是点击按钮后删除女生头像。
Test.cs
1 2 3 4 5 6 7 8 9 10 11 12 |
using UnityEngine; using System.Collections; public class Test : MonoBehaviour { void OnClick () { Destroy(GameObject.Find("Texture1")); } } |
OnClik()方法当点击按钮时调用,前提是在UICamera脚本绑定的对象或子对象中,并且该对象具有Box Collider组件。
如下图所示,项目的结构如下。点击按钮后女生头像消失!
Button background是按钮背景图像,它是由精灵组成
Label是标签框,可以写入文本内容。
NGUI真的挺给力的!好玩!好用!有意思!哇咔咔!!
- 本文固定链接: https://www.xuanyusong.com/archives/891
- 转载请注明: 雨松MOMO 于 雨松MOMO程序研究院 发表
你推荐的那篇“很棒的文章”,貌似链接失效了……
地方的
不好意思~雨松大大~最近都看你的文章正在使用NGUI但遇到csharp.dll.mdb is denied~所以不能build and run~想請問有甚麼方法嗎~還是要重新導入ngui再把原本的東西package丟入?~請教一下~
抱歉没遇到这个问题哈。。