NGUI v301 官方详解 Example 1 - UIAnchor

首先本人是菜鸟，接触NGUI不到半个月，英文水平很渣，如果错误恳请指出。

看着网上搜得到的教程慢慢做下来的，网上的教程都是2.X的，到现在的3.X很多东西已经改变

改变到让我跟着教程，有时候一头雾水，还好得到了Ak师傅的指点，让我节省了很多时间。

一方面为了复习，一方面也希望通过这个记录方式让更多的人少走弯路。

先申明环境(根据我短暂的经验unity 4.X 和 NGUI 3.X 应该都可以适应此文)

Unity  4.3.1f1(已安装)

NGUI 3.0.1(已导入到项目)

概述

这个练习是教会大家使用NGUI UIAnchor 进行排版和对齐，

当然也会简单的介绍如何使用NGUI进行场景以及添加label,spirte物体

第一步：在unity里面创建2D场景 File -> New Scene

第二步：保存场景  File -> Save Scene as (会弹出对话框，自己选择保存的名称及位置)

第三步：删除刚刚创建的场景 Hierarchy 主摄像机

第四步：创建NGUI的 2DUI

1、打开NGUI的界面向导  NGUI-> Open -> UI Wizard 

2、设置Camera 为 Simple 2D  然后点击 Create Your UI

第五步：调整 NGUI的层次结构 将 Anchor 位置与 Panel 的位置对调 实现下图效果

第六步：创建背景（另外附上个人啰嗦的个人经验）

1、打开 NGUI的 小工具向导 NGUI -> Open -> Widget Wizard

2、将 打开的下工具向导拖动到 Inspector 窗口里面（这样是为了便捷以后的操作，个人方法不喜勿喷）

3、添加背景  按照图片所显示的设置 然后点击Add to

4、调整刚刚添加的Sprite背景大小让他铺满整个摄像机照射

第七步：创建假按钮 spirte+lable（没有添加碰撞器）

1、添加按钮背景并调整大小

2、添加label并调整大小

3、设置 深度 

主背景 0 按钮背景1 按钮文字 2

深度是什么概念？

因为2D场景都在同一个平面，也就是Z轴是同样的，就会产生一个覆盖的问题

到底先显示谁，在NGUI里面是用深度控制

也就是每个小工具下面的 Depth 数值越高代表显示的越在最上面，就会优先显示

4、这样就完成了如下效果

第八步：熟悉对齐方式并进行练习

这个地方应该有疑问，为什么制作的按钮显示在中间而不在别的地方？

我们选中 Achor 可以在 inspector 里面看到 Side （我姑且理解为他在摄像机里面的位置）

默认创建是 Center 我们调整他的设置  我们可以看到 场景里面的位置按照我们想要的进行调整了

但是又有一个疑问，为什么靠左右 只显示一半？

因为默认是 Sprite 物体的中心进行排版 我们修改他的  Relative Offset X，Y 的值即可

最后的效果图我就不列了，大家自己创建九个，每个都设置一下就当练习了