NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene)。 4.在创建向导中你能更改UI的基本参数。现在我们选Default layer,点击Create Your UI 按钮。 注意: 如果在一个已存在NGUI的项目中你要跳过第二步,并且你要选择一个不同的UI层,你还要确保非GUI相机不渲染UI层。 在做具体UI控件之前,我们看看UI向导为我们做了什么。 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。 一个非常重要的事情是同一个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?查看这里 对应的场景在插件中的Tutorial 3 - Sliced Sprite中有: NGUI教程:步骤4-Tiled Sprite 1.选择Panel对象,添加Tiled Sprite,并选择Honeycomb sprite。 你可以在任何时候通过选择Panel对象中的Debug Info的Geometry项然后在场景中点击你的部件来检验生成的几何网格。 添加了这么多东西,目前依旧仅调用了一次绘画指令。 对应的场景在插件中的Tutorial 4 - Tiled Sprite中有:
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]代表红色,插入[-]来还原到原来的颜色,在这之间的文本都会变为红色。。 对应的场景在插件中的Tutorial 5 - Label中有: NGUI教程:步骤6-Button 现在,你应该可以很容易的创建一个看上去像是按钮的东西了,但还不知道如何让它接受点击事件。 不过这很简单,任何带有碰撞的事件都会收到它应有的事件。 所以,一个最简单的按钮你只需要在NGUI下选择Attach a Collider给控件:NGUI menu -> Attach a Collider。 但是幸运的是,NGUI中已经嵌入了按钮模板,让我们看看。
你能看到按钮不再像是一个简单的GameObject了,实际上有多个部分。 因为按钮事实上是有几个部分组成的:一个是背景,一个是标签,还有一些脚本来处理按钮的事件。 这就是NGUI的特性,多个小组件像积木一样组合成强大的控件。
对应的场景在插件中的Tutorial 6 - Button中有: NGUI教程:步骤7-Slider
你可以选择滑块的游戏对象进行颜色和尺寸的调整,但是经验建议你不要去调整控件对象下面的子对象。 这样当你旋转它们的时候可以保持它们的尺寸,并且内部的部件可以在坐标下继续工作。当然你也可以尝试再做一个垂直滑块。 对应的场景在插件中的Tutorial 7 - Slider中有: NGUI教程:步骤8-Checkbox 接下来我们来做复选框:
1.点击蒙版用"X",背景用"Dark"。 如果你每一步都操作正确了,你不可能同时选中两项:因为选中了“Radio Button Root”参数之后你的复选框就会变成了单选按钮,并且他们通过同一个根目录放在了一组:就是那个你指定的Transform对象。 可以用来由复选框状态来启用禁用指定的组件或者游戏对象。 对应的场景在插件中的Tutorial 8 - Checkbox中有: NGUI教程:步骤9-Input 现在我们来创建一个输入框。任何文本标签通过添加碰撞盒UIInput脚本都可以变成输入框,当然如果有背景的话会更好看一些。 不过幸运的是,Input模板已经为我们做好了这一切: 目前唯一不支持Flash平台,因为Unity Flash还没增加IME输入支持。 对应的场景在插件中的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取决于你的想象力。:)
对应的场景在插件中的Tutorial 10 - 3D中有: |
|
来自: dengqingwu > 《Unity3D》