NGUI例子6 拖拽

看了以上几个教程，估计大家对 NGUI 的前几个实例有所了解，建议自己做一遍，这样可以加深对它的理解。接下来，我将详细描述创作可拖拽窗口的制作过程。在这里我分四步来完成：一、制作和布局界面；二、制作 gui 的动态效果和拖拽功能；三、制作灯光效果；

一、        制作和布局界面。

1.           在 NGUI 菜单中，打开 Create a new UI 对话框 , 在对话框中设置 Camera 为 Advanced3D, 并点击 Create your UI ，此时在 Hierarchy 窗口中生成了对应的层次结果，如图所示：

图片:1.png

调整该层次结果，使得 Camera 与 Panel 脱离，并且 Camera 和 Panel 也脱离 UI Root （ 3D ）删除 Anchor 和 UIRoot （ 3D ），创建一个 Scene 空的游戏对象， reset 一下，再创建一个 3DUI 空游戏对象， reset 一下，再创建一个 Window
游戏对象， reset 一下，同时 Panel 也 reset 一下，最后调整它们之间的层级结构，（不断地 reset 是为了更好地定位各个元件）， Window 和 3DUI 等这些空物体只是为了方便管理场景中的元素而已，同时把 Camera 的 postion 中 z 值设置为 -1.7 ，这样可以使得 GUI 和摄像机之间有一定的距离，并设置摄像机的 near 为 0.01 ，其结果为：

图片:2.png

选择 Panel ，为其添加一个带有法线贴图的背景，选择 Create a new widget 窗口，选择 Template 为 TiledSprite 模板， Sprite 为 HoneyComb 作为背景，其参数如下，设置完成之后点击 Add to ，为该 gui 添加一个 Tiled Sprite ，作为
景，保证该按钮后面的值为 panel ：

图片:3.png

添加 Tiled Sprite 之后，把它缩放到 x=490 ， y=510 ，颜色设置成黑色，如图所示：

图片:4.png

      为了看到法线贴图的效果，选择 Panel ，勾选 Normals ，并为场景添加一盏平行光，调整光线的角度，最终效果如图所示：

图片:5.png

为该窗口添加一个窗口的边框，选择Create a new Widget对话框，选择Template为SlicedSprite模板，Sprite为Button作为背景，设置参数之后，点击Add To创建一个Sliced Sprite，创建完之后，选择该Sliced Sprite，设置其Dept 为-1，Color Tint为绿色，大小为x=498，y=515，比背景稍微大一些，可以看到在窗口的边缘出现了绿色的边框，如图所示：

图片:6.png

为窗口添加一个顶栏，选择 Create a new Widget 对话框，设置参数之后，点击 Add To ，创建一个 Sliced Sprite 。创建完之后，选择该 Sliced Sprite ，调整它的位置和大小，参数和效果如图所示：

图片:7.png

创建窗口标题。选择Create a new Widget对话框，选择Template为Label，点击Add to，为窗口创建一个Label，在Label的文本输入框中输入Example Draggable Window，并在场景编辑窗口中调整它的位置，其参数和最终结 如下图所示：

图片:8.png

用同样的方法，为其添加另外一个 Label ，或者直接使用 Ctrl+D 复制出一个出来，修改它的文字内容，设置它的 line width 为 460 ，调整它的位置，结果如图所示：

图片:9.png

创建Logo图标。选择Create a new Widget对话框，选择template中的sprite，Sprite为NGUI，选择Add to，为窗口添加一个Logo图标，调整它的位置，最终效果如图所示：

图片:10.png

创建两个 Checkbox 。同样选择 Create a new Widget 对话框，选择 template 中的 checkbox ， background 设置为 Dark ， Checkmark 为 X ，最后点击 Add to ，为窗口添加一个 Checkbox 。选择 Checkbox 中的 Label ，把文本修改为 Enable AutoYaw 。再选择 Checkbox 中的 Background ，把 Color Tint 选择为蓝色。调整该 Checkbox 的位置。接着，使用 ctrl+D 复制出另外一个 Checkbox ，把这个 checkbox 里面的文本修改为 Enable DragTilt ，放置在右边，最后效果如图
示：

图片:11.png

创建两个按钮。选择 Create a new Widget 对话框，选择 template 中的 Button ， background 选择 Button ，最后点击 Add to ，为窗口添加一个按钮。选择该按钮下的 label ，修改文本为 Hello ，选择其下的 background ，设置 Color Tin 为蓝色，放置在合适的位置。接着使用 Ctrl+D ，复制出另外一个 button ，并把其下的 label 的文本设置为 World ，放置在合适的位置。最终效果如图所示：