Unity笔记——4.UI模块基础及优化

基本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