Unreal Engine 5.8 的 3D UI 系统

DreamGUI

控件是带矩形、锚点和轴心的对象,由 Canvas 合批绘制——可以铺在屏幕上,也可以以任意角度挂在关卡里,点击检测照样准确。一棵界面树就是一个可继承的 Widget Blueprint,用 .dui 文本或 UMG 风格的设计器编写,两边改的是同一个类;自带控件库、补间动画、按玩家的输入与手柄导航。

  • DreamGUI1.0.0
  • UE5.8
  • 自动化测试2400+
  • LicenseMIT
DreamGUI 形象:一位银发少女坐在半空,指尖点向悬浮的界面面板

DreamGUI · UI in the world

往下看

长什么样

一个 .dui 文件,就是一个界面类

下面是一整个设置页:一个库提供样式和 Row 组件,rows 一行一个实例,按钮的点击路由到用户控件上的函数,提示文字的显隐绑定到一个变量。编译后它就是一个普通的 Widget Blueprint;在设计器里改它的属性,改动会写回这份文本。

WBP_Settings.duiDreamUI
class /Game/UI/WBP_Settingsuse "UI/Library.dui" as uiVerticalBox Root : ui.Page {    Spacing = 24    Text Title : ui.Heading { Text = "Settings" }    rows ui.Row : ui.Wide (Label, Value) {        "Subtitles",  "On"        "Difficulty", "Normal"        "Vibration",  "Off"    }    Native.Button Apply {        Text { Text = "Apply" }        OnClicked -> HandleApply    }    Text Hint : ui.Note {        Shown <- bDirty        Text  = "Unsaved changes"    }}

编译成 /Game/UI/WBP_Settings,屏幕上、关卡里都能用

UDreamUIBPLibrary::AddWidgetOfClassToViewport(this, WBP_Settings)

工作流

写一棵树,放到屏幕或世界里

同一个类,既能是屏幕上的一层,也能是关卡里的一块面板。屏幕根、射线检测器和事件系统都按需创建,不用额外搭建。

  1. Author

    用 .dui 写节点、样式、组件、视图模型、绑定、if / for 和时间轴;在设计器里改属性,改动会写回文本里那一行,两边不会分叉。

  2. Compile

    .dui 编译进 UDreamWidgetBlueprint,生成的类是 UDreamUserWidget:可以继承,可以嵌套进另一棵树,按名字拿到子节点。

  3. Place

    屏幕上一行代码加到视口;拖进关卡就是 ADreamWorldWidgetActor,可以选 DreamGUI 自己的渲染器,也可以走引擎管线吃后处理和深度。

  4. Interact

    每个本地玩家有自己的指针、焦点和输入目标;Tab 与手柄导航、模态与弹出层、拖放和提示都在输入模块里,动画交给补间和 timeline。