NGUI基本控件的使用教程与实例图文Word文档下载推荐.docx
- 文档编号:13957332
- 上传时间:2022-10-15
- 格式:DOCX
- 页数:14
- 大小:1.04MB
NGUI基本控件的使用教程与实例图文Word文档下载推荐.docx
《NGUI基本控件的使用教程与实例图文Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《NGUI基本控件的使用教程与实例图文Word文档下载推荐.docx(14页珍藏版)》请在冰豆网上搜索。
在做具体UI控件之前,我们看看UI向导为我们做了什么。
1.在UIRoot(2D)对象上有个UIRoot脚本。
这个脚本会重新调整游戏对象符合你的屏幕高度,有自动和手动选择高度。
让你制定小部件在像素中的坐标,并且和游戏世界中的剩余对象相比依旧相对来说较小。
2.Camera对象包含Camera和UICamera脚本。
UICamera脚本包含NGUI的事件系统(eventsystem)。
3.Anchor包含UIAnchor脚本。
虽然这个脚本可以附加给控件,但在这里可以避免Windows机器上半个像素偏移的问题。
4.Panel对象有UIPanel脚本,UIPanel是一个容器,它将包含所有UI小部件,并负责将所包含的部件组合优化,以减少绘制命令的调用。
同时,你可能还注意Panel(仪表板)GameObject现在已经被选中了。
也就是说下面添加的所有部件都将在作为它的子对象。
对应的场景在插件中的Tutorial1-Scene中有:
步骤2-Spirit
现在让我们添加一些控件,在NGUI菜单中选择NGUImenu->
CreateaWidget。
这个向导会指导你建立一些基本的控件。
需要选择所使用的图片集Atlas和字体集Font。
因为是新建的项目,所有按下Atlas和Font按钮没有效果,相反会自动展示最近使用的元素。
你想要做的事情是拖拽你想用的Atlas和Font进入到按钮旁边的区域。
我们这里先选择Atlas为SciFiAtlas,字体为SciFiFont-Normal。
接下来就是模板的问题。
你通过在一堆模板中选择来挑选你想创建什么样的部件。
注意我说的是“模板”。
这个的模板只是为了方便而帮助你开始创建,当你真正使用NGUI的时候,你会经常花很多的时间来复制粘贴整个的小部件而不仅仅是用这个向导。
现在,让我们创建第一个控件。
1.假设我们Atlas选择的是SciFiAtlas,我们给Sprite选择Dark。
2.点击AddTo按钮,(如果按钮是灰色的,那是因为你没有选择Atlas)。
.如果你不知道怎么找到它:
在项目窗口有一个搜索栏,输入scifi即可。
3.你的Sprite现在已经创建并选中了。
不过它非常小,当你使用NGUI的时候,你总需要通过Transform来移动部件,放缩它们,旋转他们。
一个非常重要的事情是同一个atlas中的控件不会使用Z轴,不过,你可以调整Depth参数来做前后的调整,如果后面项目结束的时候你用了多个atlase(或者多个UI面板),那么你就可以去调整Z轴变换。
原因很简单:
这允许你创建完全平滑的窗口,你可以转向一侧,而且在绘制的时候部件的顺序也不会被搞乱。
在前往下一章的学习之前,你可以尝试添加更多的控件,比如加入一个SlicedSprite(一个含有9个切片的Sprite,创建固定边框的控件最佳选择),一个TiledSprite(一个Sprite缩放填充整个自定义区域)和FilledSprite(每个Sprite都会有一个单独的参数来控制哪些是可见的,常被用来做进度条或者滚动条)。
如果你找不到它们也没关系,后面的教程将讲解它们。
对应的场景在插件中的Tutorial2-Spirit中有:
步骤3-SlicedSprite
1.选择中Panel对象,用控件向导从atlas中添加一个"
Dark"
的SlicedSprite。
不知道什么叫9-slicing?
查看这里
2.调整缩放为(500,500,1)。
3.添加另外一个SlicedSprite并设置缩放为(500,40,1)。
4.更改第二个sprite的位置到(0,230,0)。
5.更改Sprite的Dark为Light。
6.向下图一样调整两个sprite的颜色直到你喜欢它们位置。
7.调整Depth,让彩色的sprite在SlicedSprite前面。
现在看上去有点像是小窗口了。
对应的场景在插件中的Tutorial3-SlicedSprite中有:
步骤4-TiledSprite
1.选择Panel对象,添加TiledSprite,并选择Honeycombsprite。
2.设置它的位置为(0,-19,0)和缩放为(494,457,1)。
3.需要设置深度调整前后次序,将它往后调直到刚好在背景的前面。
同时不要忘了调整窗口背景的深度(往后调点)。
玩一玩这个spirit。
试试看当你重新缩放它的时候会发生什么,也可以按照自己的意愿调整它的颜色使他看起来更好。
你可以在任何时候通过选择Panel对象中的DebugInfo的Geometry项然后在场景中点击你的部件来检验生成的几何网格。
添加了这么多东西,目前依旧仅调用了一次绘画指令。
对应的场景在插件中的Tutorial4-TiledSprite中有:
步骤5-Label
1.像前面讲的一样方法,选择Panel对象并在部件导航模板中添加一个Label控件。
2.在点击AddTo按钮之后你的标签应该已经添加到了场景中并且已经被选中了,如果AddTo按钮为灰色不可用,是因为你没有指定字体Font,可以从Project面板中给Font栏指定"
SciFiFont-Normal"
。
3.在Inpector面板给刚添加的UILabel的Text项添加一些文本。
比如HelloWorld!
4.移动标签位置到(0,234,0),让它出现在标题栏上。
你也可以创建一个不同的Label并且使用不同的字体。
花点时间研究植入颜色的功能,可以使用16进制的值描述不同颜色(直接从PS中粘贴)。
以[FF0000]代表红色,插入[-]来还原到原来的颜色,在这之间的文本都会变为红色。
因为使用了相同的字体相同的材质,所有整个场景依旧是一个DrawCall。
对应的场景在插件中的Tutorial5-Label中有:
步骤6-Button
现在,你应该可以很容易的创建一个看上去像是按钮的东西了,但还不知道如何让它接受点击事件。
不过这很简单,任何带有碰撞的事件都会收到它应有的事件。
所以,一个最简单的按钮你只需要在NGUI下选择AttachaCollider给控件:
NGUImenu->
AttachaCollider。
但是幸运的是,NGUI中已经嵌入了按钮模板,让我们看看。
和前面一样,我们选择Panel,用使用向导创建一个Button。
你能看到按钮不再像是一个简单的GameObject了,实际上有多个部分。
因为按钮事实上是有几个部分组成的:
一个是背景,一个是标签,还有一些脚本来处理按钮的事件。
这就是NGUI的特性,多个小组件像积木一样组合成强大的控件。
1.UIButtonColor当鼠标悬停在按钮或者按下的颜色。
2.UIButtonScale当鼠标悬停在按钮上时按钮放大。
3.UIButtonOffset当按下按钮时按钮像右下的位移。
4.UIButtonSound当按钮按下时播放声音。
当然还有其他组件,比如UIButtonPlayAnimation和UIButtonMessage,就需要你自己摸索了。
你也可以添加自定义事件(MonoBehaviour),让它处理更多的事件。
详细目录
▪voidOnHover(boolisOver)
–Sentoutwhenthemousetouch-baseddevices.
▪voidOnPress(boolisDown)
–Sentwhenamousebutton(ortouchevent)getspressedoverthecollider(with‘true’)andwhenitgetsreleased(with‘false’,senttothesamecolliderevenifit’sreleasedelsewhere).
▪voidOnClick()
—SenttoamousebuttonortoucheventgetsreleasedonthesamecolliderasOnPress.
UICamera.currentTouchIDtellsyouwhichbuttonwasclicked.
▪voidOnDoubleClick()
—Sentwhentheclickafourthofasecond.
UICamera.currentTouchID
tellsyouwhichbuttonwasclicked.
▪voidOnSelect(boolselected)
–SameasOnClick,butonceacolliderisselecteditwillnotreceiveanyfurtherOnSelecteventsuntilyouselectsomeothercollider.
▪voidOnDrag(Vector2delta)
–SentwhenthemouseortouchismovinginbetweenofOnPress(true)andOnPress(false).
▪voidOnDrop(GameObjectdrag)
–SentouttothecolliderunderthemouseortouchwhenOnPress(false)iscalledoveradifferentcolliderthantriggeredtheOnPress(true)event.ThepassedparameteristhegameobjectofthecolliderthatreceivedtheOnPress(true)event.
▪voidOnInput(stringtext)
–SenttothesamecolliderthatreceivedOnSelect(true)messageaftertypingsomething.Youlikelywon’tneedthis,butit’susedbyUIInput
▪voidOnTooltip(boolshow)
–Sentafterthemousethetooltipshouldbe.Notsentontouch-baseddevices.
▪voidOnScroll(floatdelta)
issentoutwhenthemousescrollwheelismoved.
▪voidOnKey(KeyCodekey)
issentw
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- NGUI 基本 控件 使用 教程 实例 图文
![提示](https://static.bdocx.com/images/bang_tan.gif)