Unity50GUI分析.docx

《Unity50GUI分析.docx》由会员分享，可在线阅读，更多相关《Unity50GUI分析.docx（68页珍藏版）》请在第壹文秘上搜索。

1、I-UnityGUI介绍2.GUI俎件2-1.CanvasandUGUIRenderi但Order2-2.AchorandCenter2-3.RectTransform2-4,Text2-5.image2-6.RawImageandMask2-7.8utton28.ToggleandToggleGroup2-9.Slider2-10.ScrollBarandScroIIRect2-11.Dropdown2-12.lputFleld2-13.EventSystem2-14.Selectable2-15.lSpecialEfficacy3.GUI应用实例3-1.她戏起先界面32嬉戏菜单界面3-3.

2、角色面板和背包系统34关卡选择界面4.总结I-UnityGUI介绍在UNlTY中运用GUl组件来完成嬉戏Ul的绘制工作.对于一个娴戏来说,Ul界面是至关，K要的个元索，玩家对于款嬉戏的第印象大多数就来源干这款地戏的Ul界面做得如何,虽然嬉戏的Ur玩性很用要,但是不行否认Ul元素是嬉戏的第一出面相，所以做好嬉戏的Ul界面也就是意味着你国胜利更进一步.除fUNITY自带的GUl系统我们也可以借助第三方的GUI插件来提高开发效率.例如，ASSETSToRE中的第三方GUI插件,致fit特别丰富,能师满意各种GUl制作的需求,Tc三tMe*RoMrttxtxtmuoMCUIDouchard*$65Vo

3、iKM1.omalefttdrtcx1.xientiDAtGUIOodNUrrat4*N1.SGWorMFefttKAi.IjAAwtxlenso*CUIKronrauMaim*Xt11SWEfMi1.ExttmiaiSgExtensiCMSCUlISOUISrVleSS3CxiEdSCUIMttiSMefWevncnt(4033ZDtelogt4UnorCxtenyoASCWWdCmtqouHTt*177UNtyUGuIRDStloC(XIESlOAvCUlCUBmtno*3eJqavCUAES(Uo6*M;SlSFWtoaCUIFarwvtdnorximuocCWvw,OvnerNcM(d

4、ncrUtcnkiensCUKrOmC1Ome(M$RUtVfUlMotkM3UMnvOMCWMeOoebOflTtim*7SIOWjiidelrroCWUteM*o$；CwISKKJCho*zWSlOHMMfTeuCWC411Mdg*tIntcrMtnv*IAfSSOScoreFIMIMmUniawEs”NFCOmitowwmsTufnTheCimeOnUlU-BucDryC一二：一CWCivmMXItcmPowrtWHTM1.rCSS0付tktns0AS3KUeUAf/()IW第三方插件在运用的过程中有可能会存在一些小问题，UNnY内附的GUI系统一假就不会出现类似的何题，但是第三方插件有

5、时候用起来的确更加便利一些，有利也有弊，如有须要的开发者可以在资源商店自行购买相关插件,以使提高开发效率。2.GUI组件2-1.Canvas以及UGUI渲染依次Canvas的RenderMode行,:种模式.分别是OveriayrCamererWorIdSpace第一种模式的状况下，这个模式将Ul元素放到场景的最上面消染,假如疥幕缩放或变更了辨利率，CanVaS会自动变更尺寸去匹配其次种模式下,这个和SCreenSPaCe-OVeHay模式类似,但在这个渲染模式下Canvas是被放在一个指定摄像机前面肯定的距离上.Ul元素是被这个摄像机渲染的,也就意味籽摄像机相关的设置会影响Ul的显示.假如掇

6、像机设以为透视模式，Ul元素就会渲染为透视，而透视后的招曲程度由摄像机的视域确定。假如解林变更了大小政者变更了辨别率，或者摄像机的视景体变更1.Canvas梆会力动变更尺寸去匹配RectTransformGO.PosXPosYPosZ5042S036.16274WidthHeight1008500IoRlAnchorsPivotX05-Y05-RotabonScale0YoiZ-oiiiZlICanvasRenderModeEventCameraQO.WoddSPJNone(Camera)OSorting1.ayerOrderin1.ayerIDef3tI0第三种模式的状况下,这种泡染模式会将

7、CanVaS当作场景中任何的其它对象样对待.Canvas的尺寸可以用RectTransform进行手动调整，Ul元素的遮挡效果由3D位置确定.对于须要将Ul作为场俄中的一部分或者作为剧情化界面的状况特别有用下面来介绍下,UGUl的演染依次unity从上面的例子可以很宜现地看出，后被添加的UI元素G优先显示在窗口上.暇如想要变更显示依次,只须要调换两个组件的名字即可.2-2.锚点和中心点如图所示，屏幕中间的花懈形态图标就是锚点，图片中间的政圈就是中心点。白色的边框对应的就是Game视图。先来说一下锚点的作用：拖动式中个花期,除了对角花粉以外的花也位置就可以被变更锚点的其中一个作用就是使得图片4个

8、地到对应锚点的距离不会变更,无论怎么拖动视图，图片大小会被变更,但是锚点与顶点之间的距离是不会被变更的.还有另一个约束就是.悔点到再布4条边的距离百分比不会变更.如下所示：假如没有锚点的约束，那么有可能你的嬉戏会跑到视图外边，这样会导致-R要控件的无失，再比如说，鞍如须要设置一个妫戏背景图片,那么就必须要将图片的四个角和四个锚点分别重合.这样,无论你忽么变更群幕大小.背班图片都会自适应屏幕大小.所以说,悔点是不行或缺的组件.再来说一下中心点的作用：中心点是适应图片大小,不足屏幕大小.图片左卜角是眼标(0,0)，右上角是(1,1),图片的旋转和缩放就是自适应你的中心点.可以依据自己的备求,设置中

9、心点再依据该点对图片进行相关操作。2-3.RectTransformfT.MImageTag;uU9tdRotationScalePosPosYPojZ16410WidthHeight236213I匚3Ry三一一丫0TlXO0Z01YlZl；1.ayerUlRcctTransformCtnttriAnchorsPivotCStaticImage(Script)CanvasRendcrcrSourceImage.unity3d-logoColor夕MaterialNone(Material)ORaysstTarget闻ImageTypeSimple1PreserveAspedSetMativeS

10、i:_JAddComponent我们可以发觉几乎每个Ul元素都自带RectTransform组件，由此我们可以看出这个组件的重整性.下面就来介绍一下这个组件的一些属性.新建一个Ul组件的时候，锥点是合在一起的，与中心点更合.在这种状况下，假如想要移动Ul位置，变更Ul大小只要相应变更参数即可，此时的位词和大小信息如下所示：但是,但变更描点位置.那么面板显示会发生变更.如下:RectTransfonncustom1.eftTopPoZ27.00003710RightBottom12.99997予I套iR25.95Button此时Ieft就是25.95.意思就是Ul的左边界就是左边两个播点连线的距

11、禹,其他方向也是同理，这里的属性面板变更很简洁被我们忽视,肯定要留意.RcctTransformcntPosXPosYPosG0.e16410WidthHeight236213二IRl.MImageCJStaticTagUnu49d;1.ayerUl:AnchorPresetsShift:AlsosetpivotAlt:Alsosetposition量回回匝回iEalIk叵曲回leftcntrright匚画画回一团下面主要来介绍一下这个面板这是一个锚点的功能面板，例如你选择left和top的交集按钮，加么久懑味帘锚点被锁定在画布的左上角，这样无论你怎么拖动视图大小，图片跑离画布的左边界和上边界

12、的用离是周定不变的,如图所示：然后锚点的面板中还有一列是StretCh.这是用来让Ul元素适应画布大小的，按住AlT键位,点击相应的适应键位，Ul则会相应变更大小适应画布，如图所示；面板中还有个POVit属性，这是轴心坐标，相应的Ul元素可以用着釉心旋转，如图所示:接下来的Rotation则是常规的旋转，当你把视图调到3D,那么Ul就可以像常规物体科用莉相应轴旋转，重点说一下Seale,它和Width,Height是有区分的.不要混消.Width,Height别里单个Ul元素本身的缩放,并不会变更其他Ul元素的大小,而Scale则是相对于画布中的全部Ul元素而言的，当你变更SCaIe大小，全部

13、的Ul元素整体都会变更大小，所以要区分两者，2-4.Text内容Text:该文本梃里可以钻入内容，CharacterFont:可以导入并选择想要的字体类型FontStyIe:设世字体类型Normal,Bold,Italic,BoldandItalicFontSize:字体大小1.ineSPaCing:字体行间矩RiChText:是否运用副文本Unity例如运用副文本可以设置文本内容的不同颜色,ParagrapfAIignment:左边三个是设跟水平对齐方式，右边三个是设置垂直对齐方式HorizontalOVemOW:设置文本内容的换行和溢出VerticalOverflow:设置文本内容的截断和溢出BestFit:文本内容自适应文本框的大小Color:左体文本的字体颜色通过AddComponent还可以为文本添加阴影等效果，可以自己裳试.OInspector=E.QImage1.jSt