看了以上几个教程,估计大家对
NGUI
的前几个实例有所了解,建议自己做一遍,这样可以加深对它的理解。接下来,我将详细描述创作可拖拽窗口的制作过程。在这里我分四步来完成:一、制作和布局界面;二、制作
gui
的动态效果和拖拽功能;三、制作灯光效果;
1. 在 NGUI 菜单中,打开 Create a new UI 对话框 , 在对话框中设置 Camera 为 Advanced3D, 并点击 Create your UI ,此时在 Hierarchy 窗口中生成了对应的层次结果,如图所示:
调整该层次结果,使得 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 ,其结果为:
选择 Panel ,为其添加一个带有法线贴图的背景,选择 Create a new widget 窗口,选择 Template 为 TiledSprite 模板, Sprite 为 HoneyComb 作为背景,其参数如下,设置完成之后点击 Add to ,为该 gui 添加一个 Tiled Sprite ,作为
景,保证该按钮后面的值为 panel :
添加 Tiled Sprite 之后,把它缩放到 x=490 , y=510 ,颜色设置成黑色,如图所示:
为了看到法线贴图的效果,选择 Panel ,勾选 Normals ,并为场景添加一盏平行光,调整光线的角度,最终效果如图所示:
为该窗口添加一个窗口的边框,选择Create a new Widget对话框,选择Template为SlicedSprite模板,Sprite为Button作为背景,设置参数之后,点击Add To创建一个Sliced Sprite,创建完之后,选择该Sliced Sprite,设置其Dept 为-1,Color Tint为绿色,大小为x=498,y=515,比背景稍微大一些,可以看到在窗口的边缘出现了绿色的边框,如图所示:
为窗口添加一个顶栏,选择 Create a new Widget 对话框,设置参数之后,点击 Add To ,创建一个 Sliced Sprite 。创建完之后,选择该 Sliced Sprite ,调整它的位置和大小,参数和效果如图所示:
创建窗口标题。选择Create a new Widget对话框,选择Template为Label,点击Add to,为窗口创建一个Label,在Label的文本输入框中输入Example Draggable Window,并在场景编辑窗口中调整它的位置,其参数和最终结 如下图所示:
用同样的方法,为其添加另外一个 Label ,或者直接使用 Ctrl+D 复制出一个出来,修改它的文字内容,设置它的 line width 为 460 ,调整它的位置,结果如图所示:
创建Logo图标。选择Create a new Widget对话框,选择template中的sprite,Sprite为NGUI,选择Add to,为窗口添加一个Logo图标,调整它的位置,最终效果如图所示:
创建两个 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 ,放置在右边,最后效果如图
示:
创建两个按钮。选择 Create a new Widget 对话框,选择 template 中的 Button , background 选择 Button ,最后点击 Add to ,为窗口添加一个按钮。选择该按钮下的 label ,修改文本为 Hello ,选择其下的 background ,设置 Color Tin 为蓝色,放置在合适的位置。接着使用 Ctrl+D ,复制出另外一个 button ,并把其下的 label 的文本设置为 World ,放置在合适的位置。最终效果如图所示:
一、 制作和布局界面。
1. 在 NGUI 菜单中,打开 Create a new UI 对话框 , 在对话框中设置 Camera 为 Advanced3D, 并点击 Create your UI ,此时在 Hierarchy 窗口中生成了对应的层次结果,如图所示:
调整该层次结果,使得 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 ,其结果为:
选择 Panel ,为其添加一个带有法线贴图的背景,选择 Create a new widget 窗口,选择 Template 为 TiledSprite 模板, Sprite 为 HoneyComb 作为背景,其参数如下,设置完成之后点击 Add to ,为该 gui 添加一个 Tiled Sprite ,作为
景,保证该按钮后面的值为 panel :
添加 Tiled Sprite 之后,把它缩放到 x=490 , y=510 ,颜色设置成黑色,如图所示:
为了看到法线贴图的效果,选择 Panel ,勾选 Normals ,并为场景添加一盏平行光,调整光线的角度,最终效果如图所示:
为该窗口添加一个窗口的边框,选择Create a new Widget对话框,选择Template为SlicedSprite模板,Sprite为Button作为背景,设置参数之后,点击Add To创建一个Sliced Sprite,创建完之后,选择该Sliced Sprite,设置其Dept 为-1,Color Tint为绿色,大小为x=498,y=515,比背景稍微大一些,可以看到在窗口的边缘出现了绿色的边框,如图所示:
为窗口添加一个顶栏,选择 Create a new Widget 对话框,设置参数之后,点击 Add To ,创建一个 Sliced Sprite 。创建完之后,选择该 Sliced Sprite ,调整它的位置和大小,参数和效果如图所示:
创建窗口标题。选择Create a new Widget对话框,选择Template为Label,点击Add to,为窗口创建一个Label,在Label的文本输入框中输入Example Draggable Window,并在场景编辑窗口中调整它的位置,其参数和最终结 如下图所示:
用同样的方法,为其添加另外一个 Label ,或者直接使用 Ctrl+D 复制出一个出来,修改它的文字内容,设置它的 line width 为 460 ,调整它的位置,结果如图所示:
创建Logo图标。选择Create a new Widget对话框,选择template中的sprite,Sprite为NGUI,选择Add to,为窗口添加一个Logo图标,调整它的位置,最终效果如图所示:
创建两个 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 ,放置在右边,最后效果如图
示:
创建两个按钮。选择 Create a new Widget 对话框,选择 template 中的 Button , background 选择 Button ,最后点击 Add to ,为窗口添加一个按钮。选择该按钮下的 label ,修改文本为 Hello ,选择其下的 background ,设置 Color Tin 为蓝色,放置在合适的位置。接着使用 Ctrl+D ,复制出另外一个 button ,并把其下的 label 的文本设置为 World ,放置在合适的位置。最终效果如图所示: