本文出自https://www.youtube.com/watch?v=-qo3ix-qqAE，讲者为来自Virtuos Labs的Daniel Janák。
正文
无论正在读文章的您是一名UI程序员、TA还是一位游戏程序员，您多多少少都会接触到游戏开发中的UI工作。如果您还没有试过在UI中使用材质表现某些东西，这次分享一定会让您受益匪浅。
一、材质UI与布局UI的对比
我们在使用Panel分类中的Widget时会增加处理的批次，例如当我们使用Canvas Panel或者Overlay的时候，这些Widget会给子Widget定一个渲染ID，以此类推剩下的子Widget。而使用Render Transform时将会触发布局传递和布局无效化，导致一些CPU开销。
大多数人会认为，我们在UI中使用材质只是为了实现一些看起来花里胡哨的视觉效果。但我们也可以使用一些简单的材质去替换一些UI布局，提高UI的性能。因为我们的材质计算是放在GPU上的，使用材质实现了UI变换的需求，并且将多种UI Widget合并成一个材质去表现，就能省去批次处理和布局无效化的CPU消耗，从而提高并行运行效率。
我们为什么要花这么多功夫去用材质实现UI效果？因为直接给UI上动画以及各种Render Transform真的不好，并且我们最后不想让我们的UI变成下图这样：金玉其外，败絮其中。一堆的Canvas，一堆的Render Transform和一堆的Widget，性能差得一塌糊涂。
另外就是，我们有些人可能会很不情愿使用材质，或者不熟悉材质制作与使用。但当我们真正在UI中用上材质之后就会发现，我们获得了更多垂直整合，也就是一条龙服务。TA制作材质，程序员知道材质中的参数并用代码控制它等等，将工作串起来。从长远来看，这样做可以节省我们很多打磨与优化性能的时间。所以我还是十分推荐大家尝试一下UI材质。
我们可以从需求中提取我们想要的功能，然后找出能使用材质替换的功能。比如我们可以使用材质制作变换，制作UI图集或者遮罩等。
我们可以看到这个是个地图功能案例，里面有很多地图的小图标。之前的UI布局小图标是这样的，使用了Overlay作为根Widget，叠放着两张纹理。这里有4个Widget，分成2个Batch。
而这是材质的实现方法。使用了纹理叠加，可以自定义背景纹理和图案纹理，可以调整这两个纹理的角度和变换等等。
这个材质具体长这样，使用Lerp将两张纹理叠放在一起。
而那个叫做UI_Transform的函数内使用的一些功能则是来自于Epic发布的一个示例项目，叫做UI Material Lab，可以在虚幻商城免费获取：https://www.unrealengine.com/marketplace/en-US/product/ui-material-lab。并且我们可以在油管或者B站找到一些UI Material Lab的教程，这个项目已经出了一段时间了，感兴趣的小伙伴可以自行查阅。下面两张图片为UI_Transform函数的实现。
制作UI用的材质并不复杂，并且使用材质可以实现很多种视觉效果的组合，我们只需要在材质中将这些图案叠加在一起即可。
再比如上面Demo中的指南针实现，我们如果想在之前的UI布局中实现它，需要将背景复制多一份，以便于让这个条状背景UI能够循环可视。
而在材质中实现背景就能避免复制多一份的操作，这里使用了之前制作的UI_Transform函数中的Repeat布尔，启用之后就能循环背景内容。
我们使用了简单的材质与材质实例来布局我们的UI，在性能上，一个UI可能没有多大区别，但如果我们在项目中的所有UI都使用这种方案，我们将能得到巨大的性能提升。我们对这两种UI进行了性能对比，发现数据如下，具体的数据取决于项目的规模以及目标平台。但这种程度的性能提升将大大提高玩家在与UI交互时的游戏体验，比如减少打开某些菜单的卡顿感、提高UI的视觉表现流畅度等。
下面是一些额外的统计数据，材质布局UI确实减少了很多Batch与Widget。
结语
所以我们需要从开始制作UI的时候就应该考虑上性能问题，因为在一个项目中，性能消耗是累加上去的，单独一个UI很难看出差别。并且之前没有想过要使用材质制作UI元素的小伙伴们可以从现在开始，尝试使用材质制作UI，提高UI的视觉与性能表现。希望这次的分享能够对您有所启发，调整制作UI时的思路，祝创作愉快，工作顺利。
近期焦点
扫描下方二维码，关注后点击菜单栏按钮“更多内容”并选择“联系我们”获得更多虚幻引擎的授权合作方式和技术支持。
长按屏幕选择“识别二维码”关注虚幻引擎
“虚幻引擎”微信公众账号是Epic Games旗下Unreal Engine的中文官方微信频道，在这里我们与大家一起分享关于虚幻引擎的开发经验与最新活动。
