NGUI基本控件的使用教程与实例.pdf

《NGUI基本控件的使用教程与实例.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、NGUI控件的使用教程一、建立UI环境1.创建一个新的场景（NewScene）。2.选择并删除场景里的MainCamera。3.在NGUI菜单下选择CreateaNewUI，会打开UI创建向导。4.在创建向导中你能更改UI的基本参数。现在我们选Defaultlayer，点击CreateYourUI按钮。5.就这样,你的UI便创建好了。注意：如果在一个已存在NGUI的项目中你要跳过第二步，并且你要选择一个不同的UI层，你还要确保非GUI相机不渲染UI层。在做具体UI控件之前,我们看看UI向导为我们做了什么。1.在UIRoot(2D)对象上有个UIRoot脚本

2、。这个脚本会重新调整游戏对象符合你的屏幕高度，有自动和手动选择高度。让你制定小部件在像素中的坐标，并且和游戏世界中的剩余对象相比依旧相对来说较小。2.Camera对象包含Camera和UICamera脚本。UICamera脚本包含NGUI的事件系统（eventsystem）。3.Anchor包含UIAnchor脚本。虽然这个脚本可以附加给控件，但在这里可以避免Windows机器上半个像素偏移的问题。4.Panel对象有UIPanel脚本，UIPanel是一个容器，它将包含所有UI小部件，并负责将所包含的部件组合优化，以减少绘制命令的调用。同时，你可能还注意

3、Panel(仪表板)GameObject现在已经被选中了。也就是说下面添加的所有部件都将在作为它的子对象。对应的场景在插件中的Tutorial1-Scene中有：二、Sprite（片控件）现在让我们添加一些控件,在NGUI菜单中选择NGUImenu->CreateaWidget。这个向导会指导你建立一些基本的控件。需要选择所使用的图片集Atlas和字体集Font。因为是新建的项目，所有按下Atlas和Font按钮没有效果，相反会自动展示最近使用的元素。你想要做的事情是拖拽你想用的Atlas和Font进入到按钮旁边的区域。我们这里先选择Atlas为SciFi

4、Atlas，字体为SciFiFont-Normal。接下来就是模板的问题。你通过在一堆模板中选择来挑选你想创建什么样的部件。注意我说的是“模板”。这个的模板只是为了方便而帮助你开始创建，当你真正使用NGUI的时候，你会经常花很多的时间来复制粘贴整个的小部件而不仅仅是用这个向导。现在，让我们创建第一个控件。1.假设我们Atlas选择的是SciFiAtlas，我们给Sprite选择Dark。2.点击AddTo按钮，(如果按钮是灰色的，那是因为你没有选择Atlas）。.如果你不知道怎么找到它：在项目窗口有一个搜索栏，输入scifi即可。3.你的Sprite现在已经

5、创建并选中了。不过它非常小，当你使用NGUI的时候，你总需要通过Transform来移动部件，放缩它们，旋转他们。一个非常重要的事情是同一个atlas中的控件不会使用Z轴，不过，你可以调整Depth参数来做前后的调整，如果后面项目结束的时候你用了多个atlase（或者多个UI面板），那么你就可以去调整Z轴变换。原因很简单：这允许你创建完全平滑的窗口，你可以转向一侧，而且在绘制的时候部件的顺序也不会被搞乱。在前往下一章的学习之前，你可以尝试添加更多的控件，比如加入一个SlicedSprite(一个含有9个切片的Sprite，创建固定边框的控件最佳选择)，一个

6、TiledSprite(一个Sprite缩放填充整个自定义区域)和FilledSprite(每个Sprite都会有一个单独的参数来控制哪些是可见的，常被用来做进度条或者滚动条)。如果你找不到它们也没关系，后面的教程将讲解它们。对应的场景在插件中的Tutorial2-Spirit中有：三、SlicedSprite（固定边框片）1.选择中Panel对象，用控件向导从atlas中添加一个"Dark"的SlicedSprite。不知道什么叫9-slicing？2.调整缩放为(500，500，1)。3.添加另外一个SlicedSprite并设置缩放为(500，40，

7、1)。4.更改第二个sprite的位置到(0，230，0)。5.更改Sprite的Dark为Light。6.向下图一样调整两个sprite的颜色直到你喜欢它们位置。7.调整Depth，让彩色的sprite在SlicedSprite前面。现在看上去有点像是小窗口了。对应的场景在插件中的Tutorial3-SlicedSprite中有：四、TiledSprite（重复平铺片）1.选择Panel对象，添加TiledSprite，并选择Honeycombsprite。2.设置它的位置为(0，-19，0)和缩放为(494，457，1)。3.需要设置深度调整前后次序，

8、将它往后调直到刚好在背景的前面。同时不要忘了调整窗口背景的深度（往