深入UGUI Mask组件原理和性能深度优化

对于一款游戏UI系统必不可少,UGUI是现在项目组中实现UI系统的大多数解决方案,使用广泛。UGUI提供的组件很多,外部很多厂商也提供了很多UGUI的第三方插件,而客户端开发人员往往过度关注项目进度实现功能,对各个组件仅仅停留在“会使用”这个基本层面上,并没有对组件本身的实现原理、优缺点以及性能方面做深入了解。 

该课程以性能备受争论的Mask组件为例,从Mask组件的实现原理入手,深入到CPU、GPU和GC上Mask产生的影响,然后给出解决方案,最后给出在UI上使用3D模型,如何使用Mask原理对其进行遮罩处理。 

  1. Mask组件实现原理以及存在的问题
  2. Mask组件的性能以及优化(CPU、GPU、GC)
  3. 如何用Mask组件来给3D Object做遮罩 

作者于洋,Unity技术专家、引擎组组长。曾就职于人人网、Kabam、竞技世界。从事游戏开发十余年,经历了从Flash到Unity的游戏开发过程,长期从事游戏渲染和性能优化相关工作,对PBR、云、雾、地形、URP管线等有深入研究,曾参与过《Legacy of Zeus》、《荒岛求生》、《mythwar puzzle》等游戏的渲染和性能优化工作,乐于分享渲染和优化的相关技术。


目录 

1|概述
2|Mask组件实现原理以及存在的问题
3|Mask组件的性能以及优化
4|如何用Mask组件来给3D Object做遮罩
5|结论


本篇转载自《深入UGUI Mask组件原理和性能深度优化》的第1节。 

1|概述 

遮罩不是一种可见的UI控件,而是一种修改控件子元素外观的方法。遮罩将子元素限制(即“掩盖”)为父元素的形状。因此,如果子项比父项大,则子项仅包含在父项以内的部分才可见。 

拥有Mask组件的UI控件,可以限制其子对象的显示范围,即当子对象的显示范围明显大于父对象的显示范围时,游戏视图就只显示父对象范围内的子对象,其他部分自动隐藏。 

我们在Canvas下面新建一个2D UI Image,选择一个带有形状图案的Sprite,在该物体上Add Mask Component,这样,它就变成了一个遮罩物体。以该物体作为父对象,在其下面新建一个2D UI Image作为子物体,选择一个Sprite,这样就完成了一个简单的Mask组件的使用,结果如下图:
深入UGUI Mask组件原理和性能深度优化_第1张图片

注意到Mask组件里有个选项“Show Mask Graphic”,官方的描述“是否应在子对象上使用Alpha绘制遮罩(父)对象的图形?”

意思就是是否绘制出Mask组件上的Image图形,如下图:

勾掉后,就不会再绘制出该Image,具体有关的性能问题,在后续会详细讨论。 

以上基本介绍了一下UGUI Mask组件以及最基础的使用方法,在使用方法上,大家作为Unity的开发人员肯定是特别熟悉。 

但是在实际游戏开发中,我们不仅仅要关注于项目的功能开发进度,如果游戏的性能不能满足要求,经常出现卡顿、闪退等问题,用户体验严重下降,就算开发出再好的游戏玩法也没办法满足玩家的体验需求。 

性能优化是游戏项目开发中一个重要且必须的元素。而即便在硬件设备高速发展的今天,随着用户和项目的需求的持续增长,对游戏特效、画质、高度复杂且真实的场景的需求也在逐渐榨干硬件性能,无论大公司还是小公司,无论研发团队有多么丰富的开发经验,性能优化这件事永远是一个非常棘手而又无法绕开的问题。 

那么我们在进行游戏开发的时候,对项目中所使用到的组件、库、插件、Unity built-in的功能的过程当中,要时刻警惕其性能问题:有没有给项目带来严重的性能下降?如果出现了性能下降了,是由于使用了哪个功能导致的?有没有其他的方案可以作为替代? 

Mask组件就是其中之一,我们在使用的时候要不断地进行性能评估。 你是否在实际开发中有过下面几个疑问:

  1. 在使用了Mask组件之后,DrawCall为何增加特别严重?这些DrawCall的来源是哪里?
  2. 使用Mask组件做遮罩的视觉效果其实并不理想,有锯齿?
  3. 网上说的使用Mask组件的子对象没办法和外界做合批处理,低层的原因是为什么?
  4. 如何对Mask组件进行优化以满足自己项目的性能要求? 

接下来的章节会一一详细解答这些问题。


以上就是《深入UGUI Mask组件原理和性能深度优化》的第1节,此篇文章比较适合从事游戏开发的Unity客户端开发人员、希望提升渲染和性能优化能力的人以及对性能优化感兴趣的同学。 

读完全篇后你会深入了解UGUI源代码和实现逻辑,并掌握Mask组件对模板缓冲区的使用。 

作者的另一篇文章《移动端GPU性能深度优化分析》也同时上线,组合购买仅需19.9元。

你可能感兴趣的:(uimaskcpugpu3d)