zoukankan      html  css  js  c++  java
  • 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

    SpriteImport

    导入纹理时,将纹理类型Texture Type设置为Sprite(2D and UI)后,下方会出现一些Sprite的属性

    • Sprite Mode
    • Sprite Tag
    • Pixel Per unit
    • pivot

    SpriteEditor

    并且会有一个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

  • 相关阅读:
    python有哪些好的学习资料或者博客?
    运维角度浅谈MySQL数据库优化
    MySQL高可用性之Keepalived+Mysql(双主热备)
    Python 开发者节省时间的 10 个小技巧
    PHP 加密的几种方式
    17种常用的jQuery全屏焦点图代码
    13种酷炫的html5 3D图片切换代码
    14款微信小游戏源码下载
    Ext js框架模拟Windows桌面菜单管理模板
    10款 非常酷炫的网站首页焦点图 兼容ie浏览器
  • 原文地址:https://www.cnblogs.com/sylvan/p/13797638.html
Copyright © 2011-2022 走看看