NGUI的使用教程

时间:2024-10-14 14:11:56

1、创建一个新的场景(New Scene)。

2、选择并删除场景里的MainCamera。

3、在NGUI菜单下选择Create a New UI,会打开UI创建向导。

4、在创建向导中你能更改UI的基本参数。现在我们选Default layer,点击Create Your UI 按钮。

5、就这样,你的UI便创建好了。

6、看UI向导为我们做了什么。1.在UI Root (2D)对象上有个UIRoot脚本。这个耔阵式肥脚本会重新调整游戏对象符合你的屏幕高度,有自动和手动选择高度。跛星笸浊让你制定小部件在像素中的坐标,并且和游戏世界中的剩余对象相比依旧相对来说较小。2.Camera对象包含Camera和UICamera脚本。UICamera脚本包含NGUI的事件系统(event system)。3.Anchor包含UIAnchor脚本。虽然这个脚本可以附加给控件,但在这里可以避免Windows机器上半个像素偏移的问题。4.Panel对象有UIPanel脚本,UIPanel是一个容器,它将包含所有UI小部件,并负责将所包含的部件组合优化,以减少绘制命令的调用。同时,你可能还注意Panel(仪表板)GameObject现在已经被选中了。也就是说下面添加的所有部件都将在作为它的子对象。

7、步骤2-Spirit现在让我们添加一些控件,在NGUI菜单中选择NGUI menu -> Create a Widget。

8、步骤3-Sliced Sprite1.选择中Panel对象,用控件向导从at盟敢势袂las中添加一个"Dark"稆糨孝汶;的Sliced Sprite。不知道什么叫9-slicing?查看这里2.调整缩放为(500,500,1)。3.添加另外一个Sliced Sprite并设置缩放为(500,40,1)。4.更改第二个sprite的位置到(0,230,0)。5.更改Sprite的Dark为Light。6.向下图一样调整两个sprite的颜色直到你喜欢它们位置。7.调整Depth,让彩色的sprite在 Sliced Sprite前面。现在看上去有点像是小窗口了。

9、步骤4-Tiled Sprite1.选择Panel对象,添加Tiled Sprite,并选择Honeycomb sprite。2.设置它的位置为(0,-19,0)和缩放为(494,457,1)。3.需要设置深度调整前后次序,将它往后调直到刚好在背景的前面。同时不要忘了调整窗口背景的深度(往后调点)。

10、步骤5-Label1.像前面讲的一样方法,选择Panel对象并在部件导航模板中添加一个Label控件。2.在点击Add To 按钮之后你的标签应该已经添加到了场景中并且已经被选中了,如果A颊俄岿髭dd To按钮为灰色不可用,是因为你没有指定字体Font,可以从Project面板中给Font栏指定"SciFi Font-Normal"。3.在Inpector面板给刚添加的UILabel的Text项添加一些文本。比如Hello World!4.移动标签位置到(0,234,0),让它出现在标题栏上。

11、步骤6-Button现在,你应该可以很容易的创建一个看上去像是按钮的东西了,但还不知道如何让它接受点击事件。不过这很简单,任何带有碰撞的事件都会收到它应有的事件。所以,一个最简单的按钮你只需要在NGUI下选择Attach a Collider给控件:NGUI menu -> Attach a Collider。

12、步骤7-Slider下面让我们添加一个滑块。1.用Widget Tool,选择Slider模板。2.给Foreground用Button sprite,给Background用Dark sprite。Thumb可以也用Button。3.选择Panel后点击Add To按钮。

13、步骤8-Checkbox接下来我们来做复选框:1.点击蒙版用"X",背景用"Dark"。2.创建一个复选框后再选择Panel对象创建一个新GameObject。3.添加更多的复选框到这个GameObject。4.在这些复选框上选择Option项。5.运行一下程序,点击复选框。看看效果。

14、步骤9-Input现在我们来创建一个输入框。任何文本标签通过添加碰撞盒UIInput脚本都可以变成输入框,当然如果有背景的话会更好看一些。不过幸运的是,Input模板已经为我们做好了这一切:1.用Widget Tool创建输入框。2.你可以用“Dark”sprite或“Highlight” sprite作为背景。3.不断调整直到将它调试正确。

15、步骤10-3D上面的我们一直在做2D的界面,但我们也可以很容易的让它变成3D黢茕茚痔界面。让我们继续吧!1.将Panel从Anchor的中解除掉,也就是说不再是A荏鱿胫协nchor的子物体,由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。

© 手抄报圈