NGUI系列教程一

NGUI是Unity的一个插件，使用它来制作你的游戏UI必定将事半功倍。为什么这么说呢？首先我们说说GUI与NGUI的区别，GUI是Unity自带的绘制界面工具，它的成像原理是基于表层的，所以执行效率非常的低，并且没有提供复杂的UI的接口，就算开发者硬着头皮写上去只能让UI的执行效率更低。然而NGUI 完全依赖与3D就好比在游戏世界中的摄像机直直的照射在一个平面中，在平面之上再去绘制自己的UI，所以它的执行效率会非常高。

NGUI是一款收费的插件，在Asset Store中大家可以看到价格。在未购买正版的前提下我们可以通过两种方法来使用NGUI，第一种：使用官方提供的免费版本，但是这个版本中有NGUI的水印，无法正式发布不过完全可以作为学习使用。第二种：使用别人购买过的正版插件，在互联网中有朋友放出NGUI的插件。

这里提供免费版本NGUI的下载地址,是2.6.4版本的NGUI

http://pan.baidu.com/s/1f30Sc

首先导入NGUI package。在unity工程窗口中点击右键选择 Import package -> custom package，选择你下载的NGUI插件，导入完成后效果如图:

 

１．选择菜单NGUI -> Open the UI Wizard,弹出创建UI对话框。点击Layer窗口右边对应的按钮，弹出层选择对话框，在这里我们选择AddLayer

 

新建Layer窗口中，我们新建一个叫NGUI的Layer，添加Layer之后

再次回到UITool窗口，更改界面Layer为NGUI

 

 

在下面的Camera选项中有None，Simple2D，Advanced3d选项，分别用于创建不带camera的界面（这里如果已经有一个UI界面，我们只是想添加一个新的界面，可以选择这个），简单的2D界面（此选项没有Z轴效果），高级3D界面（此选项下的界面有Z轴效果，并且可以3D旋转，以此选项创建的UI有自适应分辨率的功能）。

 

在这里我们先创建一个Simple2D界面，选择好之后点击下面的Create Your UI按钮，创建一个UI。程序会自动为我们创建一个有节点层级关系的一些物体，如图，分别是UI根节点，，一个相机节点，一个锚点节点，和一个用于盛放按 钮等UI的Panel节点我们现在可以不用管这些节点的功能和作用，只要记住Panel节点即可，以后我们创建的所有按钮等UI都放在Panel层级下。

UI ROOT(2D)：看着名字我想搞程序的都应该知道是啥意思吧？界面根节点、入口点。

Camera ：NGUI生成的摄像机对象，它将直直的照射在锚点面板。

Anchor：界面的锚点，影响UI的显示位置。它下面会挂着面板。

Panel：面板，摄像机照射着它，它下面会挂一些控件，比如标签、按钮、精灵、拖动条等等。

创建UI元素，选择菜单NGUI -> Open the Widget Wizard,弹出创建UI元素对话框

 

首先是Atlas窗口，Atlas就是一个大的图片，里面用于存放我们需要用到的各种图标。在后面我们将讲解怎么创建自己的Atlas,Font是我们创建UI时用到的字体，Template可以允许我们选择要创建的UI类型，包括Label，Spirit等等，如图

我们可以使用NGUI自带的一些Atlas，如图是NGUI自带的一些Atlas，其中带有Font字样的是字体Atlas。

 

这里Atlas我选择Fantasy Atlas，Font选择Fantasy Atlas –Font Normal，在项目窗口中选择Fantasy Atlas拖到Atlas中，选择Fantasy Atlas –FontNormal，拖放到Font中，

 

在Template中，我们选择 Spirit，Spirit选项让我们选择需要创建的图标，这里我们选择smooth，Pivot默认的center ,然后确保AddTo右边的选项是我们要添加到的Panel中，如果不是，我们可以在Inspector中点击选中panel，NGUI会自动为我们切 换。最后点击AddTo，NGUI会在Panel节点下创建一个名称为Sprite (Smooth)的spirit。属性窗口如图：

 

 

1.      这里的atlas，Spirit，Pivot都是刚才创建的时候已经选择好的，如果不满意可以在这里修改。

Depth可以控制我们的图标向前或者向后偏移，例如如果我们想要某个图标在另一个图标的上方，我们可以把它的Depth设置更大。

Correction主要用于修正因图标像素是奇数而出现的问题。

Color Tint可以在图标颜色的基础上为图标着色，

Clipboard是剪贴版的颜色，当我们选择一个Cilpboard颜色后，点击Paste可以将颜色粘贴到ColorTint的颜色上。

Spirit Type表示要创建的Spirit平铺方式，包括Simple，Sliced，Tiled，Filled。如果图标较小，我们需要平铺很大，但是又不想看出重复，可以选择sliced。

这里我们选择sliced，Fillcenter选择默认。然后修改Spirit的缩放值。我们可以选择不同的SlicedType查看不同选项的效果。如图所示:

 

其中前三种选项大致一样，只有第四种Filled选项下又包括Fill Dir（填充方向），FillAmount（填充量），Invert Fill（反转填充）三个选项，这三个主要用于修改填充为360旋转填充，水平，垂直填充等，大家可以自己试验一下效果。

 

 声明: 本文由(zqcyou)原创编译，转载请保留链接: NGUI系列教程一