LGUI 2.X 新特性

最新推荐文章于 2022-03-17 11:58:43 发布

lf2007hf

最新推荐文章于 2022-03-17 11:58:43 发布

阅读量1.2k

点赞数 3

分类专栏： LGUI UE4 Prefab

本文链接：https://blog.csdn.net/lf2007hf/article/details/98736400

版权

LGUI 同时被 3 个专栏收录

10 篇文章 10 订阅

订阅专栏

UE4

9 篇文章 0 订阅

订阅专栏

Prefab

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

未使用过LGUI插件的同学可先看看这个博客：在UE4里制作3D UI（一）

LGUI经过将近一年的升级和优化之后终于迎来了2.0版本，新版本在提高性能和稳定性还有工作流程方面做了很多改动。

工作流程

1、去掉UIPanel改为Canvas
UIPanel只是作为一个渲染主体，它本身不参与渲染。但是UIPanel却白白占用了一个层级。
所以在LGUI 2.x版本中加入了LGUICanvas组件，如下图：
在这里插入图片描述
DrawcallCount：统计此Canvas和整个场景的Canvas中的Drawcall数量，以方便做Drawcall优化
RenderMode：渲染模式，可选择渲染到世界空间或屏幕空间（屏幕空间UI在2.x版本中的变化请看本篇的#性能#中的第一项）
PixelPerfect：勾选之后可防止不足一像素渲染导致的模糊问题
SortOrder：此Canvas相对于其他Canvas的渲染排序
ClipType：此Canvas的裁剪类型
DynamicPixelsPerUnit：动态生成的贴图的像素比例。比如此Canvas下的一个尺寸为12的字体如果看起来不清楚，可以把DynamicPixelsPerUnit属性改为2，那么这个字体就会以24的尺寸渲染贴图。
AdditionalShaderChannels：一般世界空间的UI需要光照的情况下可以勾选Normal、Tangent
DefaultMaterials：如果需要使用自定义的材质就可以修改这个属性，一般情况下都不需要修改
OverrideParameters：如果此Canvas的上层还有Canvas，可以通过这个flag来决定哪些参数需要重写，否则就继承

2、WorldOutliner扩展：快捷操作
LGUI 2.x版本在WorldOutliner中新增了一列“UI”，如下图：
在这里插入图片描述
这其实是LGUI Tools的快捷版本，可以直接在WorldOutliner中对Actor操作。

3、Prefab操作优化
Unity本身就是用的Prefab工作流程所以在Unity中有很多配套设施可以让Prefab使用起来很方便。而UE4原生是蓝图的工作流程，所以LGUI的Prefab用起来不那么顺。但是在LGUI 2.x之后对Prefab的工作流程做了很多小改进，我们来看看：
3.1、当一个Actor被选中之后，可以直接用这个Actor创建出Prefab并保存为Asset
在这里插入图片描述
3.2、选中一个Actor然后再从ContentBrowser中拖拽个PrefabAsset来创建实例，就会自动把创建的Actor放到选中的Actor底下作为子物体
3.3、不同的Prefab实例化之后的Actor会用不同的颜色图标来区分

3.4、实列之后的Prefab，其所有的Actor都可以通过快捷按钮来操作到Prefab
在这里插入图片描述

4、WorldOutliner扩展：保持层级开关
我开始是习惯使用Unity的，后来使用UE4的过程中就发现个很不爽的操作——每次打开场景或测试Play之后，UE4的Actor的层级开关就会全都自动打开？！而Unity就不会有这样的问题。
由于LGUI是基于组件的工作流程，也会有大量的Actor组合层级，如果Actor层级总是全部自动打开就会导致WorldOutliner很乱，想找到目标的Actor就像大海捞针。
所以LGUI 2.x版本就解决了这个问题，如下图。在LGUITools菜单中有个Preserve hierarchy state（保持层级状态），勾上之后每次保存场景就会把层级开关的状态也一起保存起来，下次打开场景的时候就会自动还原层级状态，同样在点击Play之后和Stop之后都会还原WorldOutliner中的Actor层级状态。是不是很方便啊！
在这里插入图片描述

性能

1、屏幕空间UI渲染
2.x版本最大的性能突破是屏幕空间UI的处理。
在LGUI1.x版本的时候，屏幕空间UI的实现方式是通过SceneCapture2D渲染世界空间的3D UI然后把渲染之后的RenderTarget放到屏幕空间，这种方式有两个很大的问题，一是SceneCapture2D性能很差，在移动端特别影响整体性能，二是SceneCapture2D渲染的RenderTarget的Alpha混合效果并不能完全还原美术设计（比如白色字体在黑色背景下会显得更粗，而黑色字体在白色背景下会显得更细，貌似跟linear color space有关，我懒得深究原因了，如果各位同学知道原因的话也可以指出，谢谢！）。
为了解决1.x版本以上两点问题，在2.x版本直接抛弃了SceneCapture2D渲染屏幕空间UI的方式，而是把所有UI元素直接渲染到屏幕的RenderTarget上！
但是这样做了之后会不会导致创建屏幕空间UI的流程变了呢？其实完全不用担心，只需要把LGUICanvas中的RenderMode属性改为ScreenSpaceOverlay就可以了，此Canvas下的所有的UI就会自动渲染到屏幕空间！

2、字体贴图打包到Sprite图集
在LGUI 1.x版本中，每个LGUIFont字体都有独立的字体贴图，这样会导致个问题就是，如果图片和字体交叉出现，那么每一次交叉都会产生两个Drawcall，最终导致Drawcall数量变得很多而且难以优化。那么在LGUI 2.x版本中就可以解决这样的问题。
LGUI 2.x的版本中，UIFont多了一个属性叫Packing Tag，如下图
在这里插入图片描述
Packing Tag属性和UISprite中的Packing Tag属性名和作用一样，都是找到使用此Packing Tag的图集然后把字体或图片打包到图集上。如果UIFont和UISprite有同样的Packing Tag那么字体贴图就会打包到同样的图集上。这样做之后图片和字体无论怎样交叉都是使用的同一张贴图，所以就只会产生一个Drawcall，优化起来简直了！