基本UI元素
构成UI元素的组件中包括显示推向和字符串的可视组件Visual Component以及控制交互UI元素的交互组件Interaction Component
可视组件Visual Component
图像Image
在图像Image组件中有Source Image、Color、material、Image Type等属性
图像类型Image Type
Simple
当Image Type属性设置为Simple时,组件会适应Rect Transform的范围来显示Sprite,当调整Rect Transform的大小时,精灵将直接拉伸显示
图片类型设置为Simple时,会有一个保持长宽比Preserve Aspect Ratio的属性,未勾选保持长宽比属性时,精灵会无视其原本的长宽比直接铺满显示在Rect Transform的范围内,勾选后,可以保持精灵原始的长宽比以最大尺寸显示在Rect Transform组件范围内
Set Native Size选项可以重置精灵为原始尺寸(等倍像素)
Sliced
当Image Type属性设置为Sliced时,显示的是在Sprite Editor中切片后的精灵,切片操作将图像分为9个区域,只4个角的尺寸保持不变,四边以及中心部分其余进行拉伸显示
图片类型设置为Sliced时,会有一个填充中心Fill Center属性,来确定是否对图像的中心部分进行渲染
Tiled
当Image Type属性设置为Tiled时,会以精灵为一个图样,像贴瓷砖一样在Rect Transform范围内铺满排列显示,图样的基准点时Rect Transform的左下方
当使用的精灵使用Sprite Editor设置了切片时,将会介于Sliced和Tiled之间进行显示,精灵的四角不变,四边进行拉伸,中心进行平铺排列,中心部分图样的基准点也位于左下方
和Sliced一样,设置后会有一个Fill Center属性来决定是否显示中心部分
Filled
当Image Type属性设置为Filled时与Simple一样会在Rect Transform的范围内进行显示,同样有保持长宽比Preserve Aspect Ratio的属性和Set Native Size的选项
除了和Simple相同的属性,设置为Filled图像类型之后,可以通过Fill Method属性、Fill Amount属性、和Clockwise属性对如何进行涂抹和涂抹多少进行设置
其中,Fill Method可以选择Horizontal、Vertical、Radial90、Radial180、Radial360
Sprite Editor
导入纹理时,将纹理类型Texture Type设置为Sprite(2D and UI)后,下方会出现一些Sprite的属性
- Sprite Mode
- Sprite Tag
- Pixel Per unit
- pivot
并且会有一个Sprite Editor的选项,在Sprite Editor中选中精灵后,所选精灵周围会出现显示范围的蓝色长方形、用于设置精灵切片的绿色小手柄和轴心位置的标志,Sprite Editor窗口右下角会出现所选中精灵的Name、Position、Border、Pivot等信息
当Sprite Mode设置为Multiple时,可以在Sprite Editor窗口的上方的Slice选项卡中可以选择自动生成、Grid By Cell Size或者Grid By Cell Count来生成新的精灵
Sprite Packer
纹理图集功能的模式可以在Project Settings | Editor中设置Sprite Packer的模式来启用Sprite Packer,模式有:
- Disabled,禁用Sprite Packer功能
- Enabled For Builds,构建时生成纹理图集
- Always Enabled,Play模式和构建模式下都生成纹理图集
设置过Sprite Packer的模式后,在Project面板中选择纹理,设置Import Settings的Packing Tag,之后就会在设置的模式下,将设置了相同Packing Tag的纹理汇集到一个纹理图集中(Sprite Packer所生成的纹理图集最大为2048像素*2048像素)
从Windows菜单中选择Sprite Packer,可以打开Sprite Packer窗口,可以在Sprite Packer窗口中确认生成的纹理图集
文本Text
在Unity中创建一个Text游戏对象,其上附加的有Rect Transform组件、Canvas Render组件和Text组件
Text组件包含的属性:
-
Horizontal Overflow属性可以选择包裹Wrap和溢出Overflow,选择Wrap时会将超出范围的文本自动换行显示,选择Overflow时不做换行显示
-
Vertical Overflow属性,设置文本过长无法容纳于文本范围的高度时的换行方法,可以选择截断Truncate和溢出Overflow,选择Truncate时将不会显示超出范围的文本,而溢出则仍然显示
-
Best Fit属性,当勾选Best Fit属性时会忽略在Font Size属性中设置的值,会介于设置的最大值和最小值之间进行显示
-
Rich Text属性,勾选后可以使用与HTML标记语言相似的格式来修饰文本
交互组件Interaction Component
按钮Button
按钮Button是一个附加了Image组件和Button组件的游戏对象,其下包含一个Text的子对象,Text子对象用于显示按钮标签的文本
切换开关Toggle
切换开关时一个附加了Toggle组件的游戏对象,其下包含一个Background子对象(其下包含了Checkmark子对象)和Label子对象
切换开关组Toggle Group
切换开关组是一个附加了Toggle Group组件的游戏对象,在一组Toggle的Group属性中设置为此Toggle Group
滑块Slider
滑块Slider是一个附加了Slider组件的游戏对象,其下包含一个Background子对象、一个Fill Area子对象(其下包含一个Fill子对象)、一个Handle Slide Area子对象(其下包含一个Handle子对象)
滚动条Scrollbar
滚动条Scrollbar是一个附加了Image组件和Scrollbar组件的游戏对象,其下包含了Sliding Area子对象(其下包含一Handle子对象)
滚动视图ScrollRect
滚动视图是一个附加了Scroll Rect组件、Image组件、Mask组件的游戏对象,其下包含了一个Scroll Content的子对象
自动布局系统Auto Layout System
布局元素Layout Element组件虽然拥有自身尺寸的决定性信息,如最小尺寸、推荐尺寸、自适应尺寸,但是并不直接改变自身的尺寸,而是基于这些尺寸决定性信息由布局控制器计算并设置
当使用自动布局系统时,布局控制器可以自动控制的属性称之驱动属性Driven Property,手动无法变更该属性
布局元素Layout Element
布局元素Layout Element指由布局控制器来控制位置和大小的UI元素,通过为附加了Rect Transform组件的游戏对象添加Layout Element组件来布局元素提供决定其尺寸的信息
-
最小尺寸Minimum Width/Height,当没有足够的空间分配给布局元素时,因为设置了最小尺寸,所以会为了使最终尺寸不小于设置的最小尺寸而超出布局范围
-
推荐尺寸Preferred Width/Height,在由足够的空间时,布局元素会被以推荐的尺寸进行显示,当空间不够时,会调整为布局元素在自身的Rect Transform中以推荐尺寸显示
-
自适应尺寸Flexible Width/Height,当布局空间有空余时,为布局元素分配的空余的相对尺寸,默认值为1
布局控制器Layout Controller
布局控制器基于布局元素提供的信息(最小尺寸、推荐尺寸、自适应尺寸),首先将布局元素按最小尺寸进行布局,如果空间足够则使用推荐尺寸,如果仍有剩余空间时,则基于布局元素的自适应尺寸进行布局,布局控制器包括:Content Size Fitter、Aspect Ratio Fitter和Horizontal、Vertical以及Grid Layout Group三种布局组
Content Size Fitter
Content Size Fitter时为所附加的布局元素设置尺寸限制的布局控制器,可以固定布局元素的最小尺寸或推荐尺寸
Content Size Fitter组件包括Horizontal Fit属性以及Vertical Fit属性,分别用于指定适合布局元素宽度、高度的尺寸,它们的选项有一下三种:
- UnConstrained,不自动设置布局元素的尺寸
- Min Size,使用布局元素的最小尺寸自动设置宽度或高度
- preferred,适应布局元素的推荐尺寸自动设置宽度或高度
Aspect Ratio Fitter
Aspect Ratio Fitter组件是为布局元素设置宽高比限制的布局控制器,可以固定布局元素的宽高比,可以忽略最小尺寸、推荐尺寸等布局信息
Aspect Ratio Fitter组件中有Aspect Mode属性用于指定决定布局元素位置和尺寸的方法,以及Aspect Ratio属性,用于设置布局元素的宽高比
Aspect Mode可以选择:
- None,不自动设置布局元素的位置和尺寸
- Width Controls HeightHeight Controls Width,基于布局元素的宽度或高度自动设置高度或宽度
- Fit In Parent,自动设置布局元素的宽、高、位置、锚点,来适应父元素的内测
- Envelope Parent,自动设置布局元素的宽、高、位置、锚点,来适应父元素的外侧
布局组Layout Group
布局组Layout Group是可以控制多个布局元素位置和尺寸的布局控制器,主要有Horizontal Layout Group、Vertical Layout Group以及Grid Layout Group
Horizontal/Vertical Layout Group
Horizontal Layout Group组件和Vertical Layout Group组件都有Padding、Spacing、Child Alignment、Child Force Expand属性
- Padding,设置子布局元素到布局组内部的编剧
- Spacing,设置子布局元素之间的间距
- Child Alignment,设置子布局元素的对其位置
- Child Force Expand,勾选后,如果布局组有空余,则会扩大布局元素以消除布局组内的空余,扩大的子布局元素是按照布局元素设置的自适应尺寸来决定的
Grid layout Group
Grid Layout Group组件是把布局元素以网格状进行排列放置的布局组,与上两个布局组不同的是Grid Layout Group忽略布局元素的最小尺寸、推荐尺寸、自适应尺寸,而为布局元素设置cell size属性中指定的尺寸
- Padding,设置子布局元素到布局组的边距
- Cell Size,cell size属性的X、Y分别表示宽高
- Spacing,设置子布局元素之间的间距
- Start Corner,设置开始放置子布局元素的位置
- Start Axis,设置开始放置子布局元素的方向
- Child Alignment,设置子布局元素的对其位置
- Constraint,为网格的列数和行数设限,Constraint设置为Flexible时,网格的列数和行数没有限制,Fixed Column Count和Fixed Row Count通过设置Constraint Count分别为网格的列数和行数设限
优化UGUI
对画布进行分组
画布组件主要任务有:一、管理在层次窗口中绘制UI元素的网格并发出渲染这些UI元素的Draw Call;二、将材质相同的网格合并进行批处理,来降低Draw Call数
当画布或者其下的子对象发生变动时,画布就需要对其下所有的UI元素重新生成网格(只是改变UI元素的颜色属性时不需要重新生成画布),之后才能发出Draw Call,所以在单个画布中构建整个游戏的UI并且UI频繁发生变化会导致CPU的使用率大幅上升
所以,可以采用使用多个画布的解决方案,基于游戏时UI的更新频率进行分组,完全静态、偶尔动态、连续动态,将分好组的UI分别放到不同的画布中,这样可以极大的减少UI变动时重新生成网格的工作量
通过画布组或者isActive属性来隐藏UI
通过画布组或者isActive属性来隐藏UI,不要通过控制单个UI元素的alpha来隐藏,因为当UI元素Color属性的alpha值为0时,仍会发出Draw Call,如果要隐藏UI元素可以更改其isActive属性
当使用了CanvasGroup组件时,也可以通过CanvasGroup组件控制其下所有UI元素的alpha透明度,设置画布组的alpha值为0来隐藏UI元素并且不发出Draw Call
画布组,创建一个空的游戏对象在上面附加一个CanvasGroup组件,之后将多个需要统一管理的UI元素设置为其子UI元素,就可以通过画布组CanvasGroup组件的属性来同意修改其子UI元素的属性,当画布组被嵌套时,可以通过Ignore Parent Groups属性来忽略父级画布组中设置的属性
通过禁用父画布来隐藏UI元素
当使用UI的布局系统时,因为频繁的禁用和启用其子UI元素,会导致不断的布局污染,可以选择禁用这些子UI元素的画布组件设置画布组件的enable属性为false(需要注意的是,设置画布组件为false时,画布组建对象下的UI元素虽然隐藏了,但是子UI对象上的Monobehaviour方法还是会继续运行,禁用画布只是停止了UI渲染和交互)
禁用掉无交互的UI元素的Raycaster Target
UI元素具有Raycast Target选项,允许该UI元素通过单击、触摸或者其他行为进行交互,当任一交互行为发生时,GraphicRaycaster组件执行一个for循环来对像素到边界框进行检查,确定交互的是哪一个UI元素,当禁用掉无需交互UI的Raycast Target选项后,就减少了GraphicRaycaster组件需要进行迭代的数量
避免在UI系统上使用Animator组件
如果在UI系统中使用Animator组件,那么运行时的每一帧,Animator组件都要改变UI元素的属性,导致不断的画布污染,不断的重新生成网格消耗更多的CPU
优化ScrollRect组件
ScrollRect组件是用来制作滚动视图的UI元素,滚动其他UI元素时画布需要不断的定期重新生成它们,所以需要通过对多种方式尽量优化ScrollRect组件的性能
-
确保使用RectMask2D
-
在ScrollRect组件上禁用Pixel Perfect
-
手动停用ScrollRect活动
REF
文档
https://docs.unity3d.com/Manual/com.unity.ugui.html
书籍
Unity游戏优化、精解UGUI