NGUI的使⽤教程与实例（⼊门）（1）
NGUI教程：步骤1-Scene
1.创建⼀个新的场景（New Scene）。
2.选择并删除场景⾥的MainCamera。
3.在NGUI菜单下选择Create a New UI，会打开UI创建向导。
4.在创建向导中你能更改UI的基本参数。现在我们选Default layer，点击Create Your UI 按钮。
5.就这样，你的UI便创建好了。
注意：如果在⼀个已存在NGUI的项⽬中你要跳过第⼆步，并且你要选择⼀个不同的UI层，你还要确保⾮GUI相机不渲染UI层。
在做具体UI控件之前，我们看看UI向导为我们做了什么。
1.在UI Root (2D)对象上有个UIRoot脚本。这个脚本会重新调整游戏对象符合你的屏幕⾼度，有⾃动和⼿动选择⾼度。让你制定⼩部件在像素中的坐标，并且和游戏世界中的剩余对象相⽐依旧相对来说较⼩。
2.Camera对象包含Camera和UICamera脚本。UICamera脚本包含NGUI的事件系统（event system）。
3.Anchor包含UIAnchor脚本。虽然这个脚本可以附加给控件，但在这⾥可以避免Windows机器上半个像素偏移的问题。
4.Panel对象有UIPanel脚本，UIPanel是⼀个容器，它将包含所有UI⼩部件，并负责将所包含的部件组合优化，以减少绘制命令的调⽤。
同时，你可能还注意Panel(仪表板)GameObject现在已经被选中了。也就是说下⾯添加的所有部件都将在作为它的⼦对象。
对应的场景在插件中的Tutorial 1 - Scene中有：
NGUI教程：步骤2-Spirit
现在让我们添加⼀些控件，在NGUI菜单中选择NGUI menu -> Create a Widget。
这个向导会指导你建⽴⼀些基本的控件。需要选择所使⽤的图⽚集Atlas和字体集Font。
因为是新建的项⽬，所有按下Atlas和Font按钮没有效果，相反会⾃动展⽰最近使⽤的元素。
你想要做的事情是拖拽你想⽤的Atlas和Font进⼊到按钮旁边的区域。我们这⾥先选择Atlas为SciFi Atlas，字体为SciFi Font-Normal。
接下来就是模板的问题。你通过在⼀堆模板中选择来挑选你想创建什么样的部件。
注意我说的是“模板”。这个的模板只是为了⽅便⽽帮助你开始创建，当你真正使⽤NGUI的时候，你会经常花很多的时间来复制粘贴整个的⼩部件⽽不仅仅是⽤这个向导。现在，让我们创建第⼀个控件。
1.假设我们Atlas选择的是SciFi Atlas，我们给Sprite选择Dark。
2.点击Add To按钮，(如果按钮是灰⾊的，那是因为你没有选择Atlas）。.如果你不知道怎么到它：在项⽬窗⼝有⼀个搜索栏，输⼊scifi即可。
3.你的Sprite现在已经创建并选中了。不过它⾮常⼩，当你使⽤NGUI的时候，你总需要通过Transform来移动部件，放缩它们，旋转他们。
⼀个⾮常重要的事情是同⼀个atlas中的控件不会使⽤Z轴，不过，你可以调整Depth参数来做前后的调整，如果后⾯项⽬结束的时候你⽤了多个atlase（或者多个UI⾯板），那么你就可以去调整Z轴变换。原因很简单：这允许你创建完全平滑的窗⼝，你可以转向⼀侧，⽽且在绘制的时候部件的顺序也不会被搞乱。
在前往下⼀章的学习之前，你可以尝试添加更多的控件，⽐如加⼊⼀个Sliced Sprite(⼀个含有9个切⽚的Sprite，创建固定边框的控件最佳选择)，⼀个Tiled Sprite(⼀个Sprite缩放填充整个⾃定义区域)和Filled Sprite(每个Sprite都会有⼀个单独的参数来控制哪些是可见的，常被⽤来做进度条或者滚动条)。如果你不到它们也没关系，后⾯的教程将讲解它们。
对应的场景在插件中的Tutorial2 - Spirit中有：
NGUI教程：步骤3-Sliced Sprite
1.选择中Panel对象，⽤控件向导从atlas中添加⼀个"Dark"的Sliced Sprite。不知道什么叫9-slicing？
2.调整缩放为(500，500，1)。
3.添加另外⼀个Sliced Sprite并设置缩放为(500，40，1)。
4.更改第⼆个sprite的位置到(0，230，0)。
5.更改Sprite的Dark为Light。
6.向下图⼀样调整两个sprite的颜⾊直到你喜欢它们位置。
7.调整Depth，让彩⾊的sprite在 Sliced Sprite前⾯。
现在看上去有点像是⼩窗⼝了。
对应的场景在插件中的Tutorial 3 - Sliced Sprite中有：
NGUI教程：步骤4-Tiled Sprite
1.选择Panel对象，添加Tiled Sprite，并选择Honeycomb sprite。
2.设置它的位置为(0，-19，0)和缩放为(494，457，1)。
3.需要设置深度调整前后次序，将它往后调直到刚好在背景的前⾯。同时不要忘了调整窗⼝背景的深度（往后调点）。
玩⼀玩这个spirit。试试看当你重新缩放它的时候会发⽣什么，也可以按照⾃⼰的意愿调整它的颜⾊使他看起来更好。
你可以在任何时候通过选择Panel对象中的Debug Info的Geometry项然后在场景中点击你的部件来检验⽣成的⼏何⽹格。
添加了这么多东西，⽬前依旧仅调⽤了⼀次绘画指令。
对应的场景在插件中的Tutorial 4 - Tiled Sprite中有：
NGUI之Sprite
  Sprite（精灵）是NGUI中很常⽤的⼀个Widget，它有四种类型
    1. Simple Sprite（简单精灵）：最基本的展⽰图⽚
    2. Sliced Sprite（切⽚精灵）：它有9个切⽚（⼀般是⽤来创建边框的）
    3. Tiled Sprite（填充精灵）：它是⽤来填充transform中的整个区域的（和PC电脑桌⾯背景的填充⼀个道理）
    4. Filled Sprite（加满精灵）：它有额外的参数来控制有多少是可见的（⼀般⽤来做进度条和滑动条）
  其中FilledSprite需要重点说⼀下，有2个重要的参数
    1. Fill Dir：控制显⽰的⽅式
    2. FillAmount：控制显⽰多少的度
    这个说不清楚，⾃⼰试试就⽴马知道了（选⼀个Fill Dir然后拖动Fill Amount就可以看到效果了）
NGUI教程：步骤5-Label
1.像前⾯讲的⼀样⽅法，选择Panel对象并在部件导航模板中添加⼀个Label控件。
2.在点击Add To 按钮之后你的标签应该已经添加到了场景中并且已经被选中了，如果Add To按钮为灰⾊不可⽤，是因为你没有指定字体Font，可以从Project⾯板中给Font栏指定"SciFi Font-Normal"。
3.在Inpector⾯板给刚添加的UILabel的Text项添加⼀些⽂本。⽐如Hello World!
4.移动标签位置到(0，234，0)，让它出现在标题栏上。
你也可以创建⼀个不同的Label并且使⽤不同的字体。花点时间研究植⼊颜⾊的功能，可以使⽤16进制的值描述不同颜⾊（直接从PS中粘贴）。
以[FF0000]代表红⾊，插⼊[-]来还原到原来的颜⾊，在这之间的⽂本都会变为红⾊。。
因为使⽤了相同的字体相同的材质，所有整个场景依旧是⼀个DrawCall。
对应的场景在插件中的Tutorial 5 - Label中有：
说明：此处 Label 的字体有SciFi Font - Header 和 SciFi Font - Normal 之分。
(在属性⾥没看到调整字体⼤⼩的选项，貌似能缩放调整? --ME)
NGUI教程：步骤6-Button
现在，你应该可以很容易的创建⼀个看上去像是按钮的东西了，但还不知道如何让它接受点击事件。
不过这很简单，任何带有碰撞的事件都会收到它应有的事件。
所以，⼀个最简单的按钮你只需要在NGUI下选择Attach a Collider给控件：NGUI menu -> Attach a Collider。
但是幸运的是，NGUI中已经嵌⼊了按钮模板，让我们看看。
和前⾯⼀样，我们选择Panel，⽤使⽤向导创建⼀个Button。
你能看到按钮不再像是⼀个简单的GameObject了，实际上有多个部分。
因为按钮事实上是有⼏个部分组成的：⼀个是背景，⼀个是标签，还有⼀些脚本来处理按钮的事件。
这就是NGUI的特性，多个⼩组件像积⽊⼀样组合成强⼤的控件。
1.UIButtonColor当⿏标悬停在按钮或者按下的颜⾊。
2.UIButtonScale当⿏标悬停在按钮上时按钮放⼤。
3.UIButtonOffset当按下按钮时按钮向右下的位移。
4.UIButtonSound当按钮按下时播放声⾳。
（在⽰例 Tutorial 6 - Button 中有演⽰ --ME）
当然还有其他组件，⽐如UIButtonPlayAnimation 和 UIButtonMessage，就需要你⾃⼰摸索了。
你也可以添加⾃定义事件（MonoBehaviour），让它处理更多的事件。
void OnHover (bool isOver) – Sent out when the mouse hovers over the collider or moves away from it. Not sent on touch-based devices.
void OnPress (bool isDown) – Sent when a mouse button (or touch event) gets pressed over the collider (with ‘true’) and when it gets released (with ‘false’, sent to the same collider even if it’s releas
ed elsewhere).
void OnClick() — Sent to a mouse button or touch event gets released on the same collider as
OnPress. UICamera.currentTouchID tells you which button was clicked.
void OnDoubleClick () — Sent when the click happens twice within a fourth of a second. UICamera.currentTouchID tells you which button was clicked.
void OnSelect (bool selected) – Same as OnClick, but once a collider is selected it will not receive any further OnSelect events until you select some other collider.
void OnDrag (Vector2 delta) – Sent when the mouse or touch is moving in between of OnPress(true) and OnPress(false).
void OnDrop (GameObject drag) – Sent out to the collider under the mouse or touch when OnPress(false) is called over a different collider than triggered the OnPress(true) event. The passed parameter is the game object of the collider that received the
OnPress(true) event.
void OnInput (string text) – Sent to the same collider that received OnSelect(true) message after typing something. You likely won’t need this, but it’s used by UIInput
void OnTooltip (bool show) – Sent after the mouse hovers over a collider without moving for longer than tooltipDelay, and when the
tooltip should be hidden. Not sent on touch-based devices.
void OnScroll (float delta) is sent out when the mouse scroll wheel is moved.
void OnKey (KeyCode key) is sent when keyboard or controller input is used.
对应的场景在插件中的Tutorial 6 - Button中有：
NGUI教程：步骤7-Slider
下⾯让我们添加⼀个滑块。
1.⽤Widget Tool，选择Slider模板。
2.给Foreground⽤Button sprite，给Background⽤Dark sprite。Thumb可以也⽤Button。
3.选择Panel后点击Add To按钮。
这样，⼀个滑块滚动条就做好了。
你可以选择滑块的游戏对象进⾏颜⾊和尺⼨的调整，但是经验建议你不要去调整控件对象下⾯的⼦对象。
这样当你旋转它们的时候可以保持它们的尺⼨，并且内部的部件可以在坐标下继续⼯作。当然你也可以尝试再做⼀个垂直滑块。
对应的场景在插件中的Tutorial 7 - Slider中有：
NGUI教程：步骤8-Checkbox
接下来我们来做复选框：
1.点击蒙版⽤"X"，背景⽤"Dark"。
2.创建⼀个复选框后再选择Panel对象创建⼀个新GameObject。
3.添加更多的复选框到这个GameObject。
4.在这些复选框上选择Option项。
5.运⾏⼀下程序，点击复选框。看看效果。
(在NGUI3.0.8中将UIToggle组件下将Group设置成相同的数字就会成为⼀组 --ME)
如果你每⼀步都操作正确了，你不可能同时选中两项：因为选中了“Radio Button Root”参数之后你的复选框就会变成了单选按钮，并且他们通过同⼀个根⽬录放在了⼀组：就是那个你指定的Transform对象。
还可以附件⼀些其他事件处理功能，如UICheckboxControlledComponent 和 UICheckboxControlledObject。
可以⽤来由复选框状态来启⽤禁⽤指定的组件或者游戏对象。
你可以尝试着做3个复选框来控制红，绿，蓝三个控件的显⽰和隐藏。
对应的场景在插件中的Tutorial 8 - Checkbox中有：
NGUI教程：步骤9-Input
现在我们来创建⼀个输⼊框。任何⽂本标签通过添加碰撞盒UIInput脚本都可以变成输⼊框，当然如果有背景的话会更好看⼀些。
不过幸运的是，Input模板已经为我们做好了这⼀切：
1.⽤Widget Tool创建输⼊框。
2.你可以⽤“Dark”sprite或“Highlight” sprite作为背景。
3.不断调整直到将它调试正确。
unity 教程如果你点击Play运⾏游戏，点击输⼊框就可以直接输⼊⽂字，在iOS和Android设备上则会⾃动显⽰屏幕键盘。这个输⼊框同样也⽀持Unity3.4.1新增的输⼊⽅法（IME=Input Method），让你能输⼊中⽂（译者注：测试的时候直接输⼊不显⽰中⽂，，并拖拽到Label的Font 栏）。
⽬前唯⼀不⽀持Flash平台，因为Unity Flash还没增加IME输⼊⽀持。
（ --ME）
对应的场景在插件中的Tutorial 9 - Input中有：
译者注：NGUI的中⽂输⼊需要下载单独的中⽂字体（或者⾃⼰做⼀个），，下载后拖拽到对应的Inpextor⾯板即可：
这样就可以输⼊中⽂了：
NGUI教程：步骤10-3D
上⾯的我们⼀直在做2D的界⾯，但我们也可以很容易的让它变成3D界⾯。让我们继续吧！
1.将Panel从Anchor的中解除掉，也就是说不再是Anchor的⼦物体，由UI Root作为它的⽗对象。
2.删除Anchor（本教程我们只做静⽌的UI）。
3.将摄影机改成透视投影Perspective Projection。
4.将相机的Near改为0.1和Far改为4.0。
5.将相机往后移动⼀点，⼤概在（0，0，-550）的位置。
6.给Panel⼀点⾓度，我们这⾥设置旋转为（0，345，0）。
7.为了看上去的效果更炫⽬⼀点，添加PanWithMouse到Camera。
点击运⾏游戏，并且四处移动⿏标，如果⼀切正确，你会看到⼀个效果很好的窗⼝。
注意这七步仅仅在⼀开始创建了2D UI的基础上才需要。
如果在第⼀步创建了3D UI，那么这些都不再需要了。
最后，你需要什么样的UI取决于你的想象⼒。：）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。