posts - 311, comments - 0, trackbacks - 0, articles - 0
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理
看了以上几个教程,估计大家对NGUI的前几个实例有所了解,建议自己做一遍,这样可以加深对它的理解。接下来,我将详细描述创作可拖拽窗口的制作过程。在这里我分四步来完成:一、制作和布局界面;二、制作gui的动态效果和拖拽功能;三、制作灯光效果;
一、        制作和布局界面。

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

调整该层次结果,使得CameraPanel脱离,并且CameraPanel也脱离UI Root3D)删除AnchorUIRoot3D),创建一个Scene空的游戏对象,reset一下,再创建一个3DUI空游戏对象,reset一下,再创建一个Window
游戏对象,reset一下,同时Panelreset一下,最后调整它们之间的层级结构,(不断地reset是为了更好地定位各个元件),Window3DUI等这些空物体只是为了方便管理场景中的元素而已,同时把Camerapostionz值设置为-1.7,这样可以使得GUI和摄像机之间有一定的距离,并设置摄像机的near0.01,其结果为:
 
选择Panel,为其添加一个带有法线贴图的背景,选择Create a new widget窗口,选择TemplateTiledSprite模板,SpriteHoneyComb作为背景,其参数如下,设置完成之后点击Add to,为该gui添加一个Tiled Sprite,作为
景,保证该按钮后面的值为panel

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

    为了看到法线贴图的效果,选择Panel,勾选Normals,并为场景添加一盏平行光,调整光线的角度,最终效果如图所示:
为该窗口添加一个窗口的边框,选择Create a new Widget对话框,选择TemplateSlicedSprite模板,SpriteButton作为背景,设置参数之后,点击Add To创建一个Sliced Sprite,创建完之后,选择该Sliced Sprite,设置其Dept-1Color Tint为绿色,大小为x=498y=515,比背景稍微大一些,可以看到在窗口的边缘出现了绿色的边框,如图所示:

为窗口添加一个顶栏,选择Create a new Widget对话框,设置参数之后,点击Add To,创建一个Sliced Sprite。创建完之后,选择该Sliced Sprite,调整它的位置和大小,参数和效果如图所示:
创建窗口标题。选择Create a new Widget对话框,选择TemplateLabel,点击Add to,为窗口创建一个Label,在Label的文本输入框中输入Example Draggable Window,并在场景编辑窗口中调整它的位置,其参数和最终结如下图所示:

用同样的方法,为其添加另外一个Label,或者直接使用Ctrl+D复制出一个出来,修改它的文字内容,设置它的line width460,调整它的位置,结果如图所示:
创建Logo图标。选择Create a new Widget对话框,选择template中的spriteSpriteNGUI,选择Add to,为窗口添加一个Logo图标,调整它的位置,最终效果如图所示:
创建两个Checkbox。同样选择Create a new Widget对话框,选择template中的checkboxbackground设置为DarkCheckmarkX,最后点击Add to,为窗口添加一个Checkbox。选择Checkbox中的Label,把文本修改为EnableAutoYaw。再选择Checkbox中的Background,把Color Tint选择为蓝色。调整该Checkbox的位置。接着,使用ctrl+D复制出另外一个Checkbox,把这个checkbox里面的文本修改为Enable DragTilt,放置在右边,最后效果如图
示:
创建两个按钮。选择Create a new Widget对话框,选择template中的Buttonbackground选择Button,最后点击Add to,为窗口添加一个按钮。选择该按钮下的label,修改文本为Hello,选择其下的background,设置Color Tin为蓝色,放置在合适的位置。接着使用Ctrl+D,复制出另外一个button,并把其下的label的文本设置为World,放置在合适的位置。最终效果如图所示: