【UE4】使用UMG创建UI，了解内部机制及相应优化方法

声明：http://www.gc-conf.com/ 视频中内容笔记                            2020.9.9

        在UE4中创建UI时使用的UMG（Unreal Motion Graphics）可能会遇到各种问题，例如如何使用它以及面临什么样的问题。在本次演讲中，将讨论这些问题的解决方案，然后介绍有效利用UMG的更好的方法和优化方法。

Youtube视频页面

https://www.youtube.com/watch?v=x67C_RqRVrg

UE4创建的UI及优化方法

●目标

        ● 可以使用UMG构建有效的UI

        ●可以应用UI优化方法

●对象

        ●UMG 美术

        ●程序和优化工程师，TA

●范围

        UE 4.25

 

 

今日主题

●设计

        ●布局设计            …艺术

        ●类设计                …工程师

●机制/内部实现原理

        ●生命周期            …工程师

●优化

        ●选项                …艺术，工程师

        ●调试                …艺术，工程师

 

首先设计部分

布局设计

布局设计后顾之忧

• 重用
• 好看
• 没有浪费

 

概述

●Widget窗口小部件

小型功能单元中的显示元素

●User Widget用户小部件

通过组合Widget创建的显示元素⇒Main Widget主小部件，Sub Widget子小部件

如下图解释Widget 

如下图解释User Widget 

布局 按钮组 攻击按钮

 

布局设计的挑战

●放置小部件的条件是什么？

●如何使用不同的小部件？

●如何重复使用小部件？

●如何重用动画？

 

问题1：放置小部件的条件是什么？

●注意放置小部件的原因

放置它，以便您可以解释使用它的原因

●请注意布局在不断变化

支持布局更改和多平台

 

小部件放置示例：

管理多个子Widget的图层

模糊背景（模糊效果）

将锚应用于子Widget

填充子Widget

使范围达到指定大小

用按钮填充宽度

覆盖暂停菜单上的选项屏幕

Main Widget放置示例

Switcher（切换显示对象）

Named Slot（显示在上层）

Safe Zone（可变布局显示）

 

Sub Widget放置示例

缩放整体

管理多个子Widget

垂直布置内容

因为弹出窗口的描述字段以固定大小显示

 

练习2：如何使用不同的小部件？

●可以实现功能的

选择可以实现您想要做的事情

●良好的扩展性

选择一种对更改（如添加和删除内容）有较强抵抗力的方法

●成本低

即使具有相同的功能，根据Widget的成本也会有所不同

 

 

小部件的不同用法

示例：多个子小部件的层管理

Canvas Panel vs Overlay

示例：滚动显示和操作

Scroll Box vs List View

练习3：如何重用小部件？

●扩展小部件

根据内容轻松使用Widget

●合并小部件

为您的内容创建一个新的Widget

 

Widget (Text Block)

[问题]

每次都需要调整文本设置

轻松设置文本字体和大小的示例

https://unrealengine.com/marketplace/zh-CN/product/umg-style-classes

停止一遍又一遍地创建按钮，滑块和其他小部件。使用此插件可根据样式类（类似于您从CSS所知的样式类）构建它们。

Widget (Button)

[问题]

更多具有相似功能和设计的按钮

例如，我想重复使用具有“OK／Cancel”选项的相同按钮...

 

选择并重写放置在子Widget上的共享Widget

 

练习4：如何重用动画？

●仅使用通用Widget替换资源

始终使用通用的Widget动画

●使用父子关系应用动画

对父Widget进行更改，例如缩放比例和颜色

 

动画重用

仅使用通用Widget替换资源

 

在共享的Widget中准备动画