WebUIX

最小 HTML 示例

<div class="demo-shell">
  <h2>{{loc:demo.title|WebUIX Demo}}</h2>
  <button id="switch-image" onclick="SwitchImage">
    {{loc:demo.switch_image|Switch Image}}
  </button>
  <webuix-option-stepper
    id="demo-quality-stepper"
    label="{{loc:demo.graphics_quality|Graphics Quality}}"
    options="GraphicsQualityOptions"
    display-key="DisplayName"
    value-key="Value"
    data-webuix-bind-value="GraphicsQualityIndex"
    onchange="OnGraphicsQualityChanged">
  </webuix-option-stepper>
</div>

使用到游戏中

• 点击 Compile 和 Save。
• 运行时像普通 UMG 一样 Create Widget 后 Add to Viewport，也可以放进 HUD、其他 UMG 或 3D Widget 工作流。
• 多个界面需要共享同一套源码时，仍然可以引用独立 WebUIX HTML / CSS 资产；单个界面优先直接在 WebUIXUserWidget 内完成。

页面配置

模板变量

<div class="loading-screen startup-screen">
  <div class="brand">WebUIX</div>
  <div class="subtitle">{{LoadingStatus}}</div>
  <div class="bar">
    <div class="bar-fill" style="width: {{LoadingProgressPercent}}%;"></div>
  </div>
</div>

Timing 配置

Skip 配置

蓝图生命周期

在 Loading Config Blueprint 内实现这些事件和函数，可以控制开始显示、地图加载、加载完成、跳过请求、是否隐藏和是否允许跳过。

全局 Blueprint API

建议由加载管理器或 GameInstance 统一调用 WebUIX Set Loading Progress，页面只负责展示模板变量和响应生命周期事件。

WebUIX 1.6.0 新增原生圆盘菜单、更完整的浏览器风格边框支持、更快的增量更新，以及更稳定的变换 HUD 渲染。

兼容性

Win64 包已验证支持 Unreal Engine 5.0 至 5.8。现有 Widget、HTML/CSS 资源、模板、绑定和蓝图事件属性保持兼容。

支持的 HTML 标签

扩展元素：drag-area drag-cell drag-item handle radio-group radio-option checkbox-group checkbox-option dropdown dropdown-option password modal modal-title modal-footer tooltips tooltips-content animation-watch

CSS 属性速查

Pseudo-class 状态

扩展状态：:selected :open :dragging :valid :invalid :hot :occupied。部分 pseudo-state 会同步为 CSS class（.selected .open .disabled）。

资源引用

图片和音频通过 UE 资产路径引用：

<img src="/Game/UI/Icons/Sword.Sword" />

.icon { background-image: url("/Game/UI/Icons/Sword.Sword"); }
.banner { background: url(banner.png) center / cover no-repeat; }

散列图片文件（PNG、JPG）在 Cook 时嵌入到 UWebUIXHtmlDocument 的派生数据中。

filter

filter 属性对元素及其子元素的渲染结果应用图形效果。

.card {
  filter: drop-shadow(0 10dp 24dp #00000066);
}
.card:hover {
  filter: brightness(1.1) drop-shadow(0 14dp 32dp #00000088);
  transition: filter 200ms;
}
.inactive {
  filter: brightness(0.6) saturate(0.3);
}

backdrop-filter

backdrop-filter 对元素背后区域的内容应用滤镜（常用于毛玻璃效果）。

.glass-panel {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(16dp);
  border: 1dp rgba(255,255,255,.2);
  border-radius: 16dp;
}
.overlay {
  backdrop-filter: blur(8dp) brightness(0.5);
}

filter 与动画

filter 属性支持 CSS transition 和 animation 平滑过渡：

.btn {
  filter: brightness(1);
  transition: filter 150ms ease;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { filter: brightness(0.92); }

@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 4dp #38bdf844); }
  50%      { filter: drop-shadow(0 0 16dp #38bdf8aa); }
}
.glow { animation: pulse-glow 2s ease-in-out infinite; }

CSS 属性

触发时机

音效在以下 pseudo-class 激活时自动播放：

• :hover — 鼠标悬停时
• :active — 按下时（鼠标/触摸）
• :focus — 获得焦点时（Tab 导航等）

使用示例

资产路径使用 asset:/// 前缀（编辑器资源选择器自动补全）：

/* Hover: glass sound, 50ms cooldown */
.ui-hover-sound:hover {
  background-sound: url("asset:///WebUIX/WebUIX/Sound/glass_001.glass_001");
  background-sound-volume: 0.35;
  background-sound-cooldown: 0.05s;
}

/* Click: crisp click sound, higher volume */
.ui-click-sound:active {
  background-sound: url("asset:///WebUIX/WebUIX/Sound/click_003.click_003");
  background-sound-volume: 0.55;
  background-sound-cooldown: 0.05s;
}

/* Focus: focus feedback sound */
.ui-focus-sound:focus {
  background-sound: url("asset:///WebUIX/WebUIX/Sound/close_002.close_002");
  background-sound-volume: 0.28;
}

<button class="btn primary ui-hover-sound ui-click-sound ui-focus-sound">
  Confirm
</button>

CSS Transitions

支持对所有可动画属性的平滑过渡。常用可动画属性：color background-color opacity transform filter width height margin padding。

.card {
  transform: scale(1);
  filter: brightness(1);
  transition: transform 180ms ease, filter 150ms;
}
.card:hover { transform: scale(1.04); filter: brightness(1.1); }

@keyframes

@keyframes slide-in {
  0%   { transform: translateY(-24dp); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
.modal-open { animation: slide-in 200ms ease-out; }

@keyframes fade-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.loading { animation: fade-pulse 1.2s ease-in-out infinite; }

支持：timing-function、iteration-count、direction、fill-mode、delay、play-state。

animation-watch 元素

animation-watch 观察 CSS 动画状态并通过事件桥发送 JSON payload 给 Blueprint。详见扩展元素章节。

1.6 保留式动画路径

transform 和 opacity 动画可以更新保留式合成层，无需重建布局或重绘整个文档；嵌套变换 HUD 元素会保持稳定的几何与命中测试。

若要低成本切换，请保持元素挂载，只修改 show、class、opacity 或 transform；局部视觉变化不要替换整份 HTML。

快速创建

1. 创建 Blueprint，父类选择 UWebUIXComponent
2. 在 Class Settings 中填写 TagName（如 my-card）
3. 编写默认 HTML 模板和 CSS — 这构成组件内部结构
4. 实现 Construct / Tick / Destruct 事件，通过 Dom 操作内部 DOM

暴露属性与事件 — 点击"公开"即可

在 Blueprint 中编写 UFUNCTION(BlueprintCallable) 函数后，只需在函数上点击 公开到 HTML，该函数就会自动成为 HTML 中可用的 OnXxx 事件属性。同样，Blueprint 变量点击公开后，即可在 HTML 中作为自定义属性使用。

<!-- Exposed as event: bind directly in HTML -->
    <my-card title="Sword" OnCardClicked="OnSwordPicked(id)" OnRarityChanged="OnRarityUpdate(rarity)"></my-card>

    <!-- Exposed as attribute: pass values like native attributes -->
    <my-card title="Sword of Light" badge="{{Model.NewItems}}" rarity="epic" locked="true">
    <p>A legendary weapon.</p>
    </my-card>

    <!-- Exposed as function: call directly in templates -->
    <span>{{UE::CallText(GetCardStatus)}}</span>

编辑器的 HTML 代码补全会自动列出所有已注册组件的自定义属性、事件和函数，无需手动查找。

注册组件

全局：添加到 Project Settings → WebUIX → Components，所有文档可用。
文档级：添加到 UWebUIXHtmlDocument 的 Components 数组，仅该文档可用。

DOM API

Dom->GetElementById("my-id");
    Dom->QuerySelector(".my-class");
    Dom->SetAttribute("badge", "5");
    Dom->ClassListAdd("highlight");
    Dom->StyleSetProperty("color", "#ff0");
    Dom->SetTextContent("Updated!");
    Dom->AppendChild(newElement);

独立四边与线型

可使用 border、border-width/style/color，或 border-top/right/bottom/left 简写与长写。四边可混合宽度、线型和颜色，并按浏览器式角点归属绘制。

椭圆与百分比圆角

border-radius 支持一至四个角、斜杠分隔的水平/垂直半径、四角独立属性和百分比。

.panel {
  border-radius: 24dp 12dp 32dp 8dp / 16dp 28dp 12dp 20dp;
}
.avatar {
  border-radius: 50%;
}

轮廓与偏移

outline 绘制在边框外侧且不占布局空间；outline-offset 可将其向内或向外偏移。

.focused {
  outline: 2dp dashed #67e8f9;
  outline-offset: 6dp;
}

九宫格边框图片

border-image 支持 source、slice、width、outset、repeat、fill 和简写形式，可用于可缩放框体。

.frame {
  border: 12dp solid transparent;
  border-image: url("/Game/UI/Frame.Frame") 24 fill / 12dp / 0 stretch;
}

混合边框示例

每条边和每个角都可以独立配置；相邻边按确定的浏览器式归属衔接，不会改变声明的边框宽度。

.mixed {
  border-top: 4dp solid #2563eb;
  border-right: 6dp dashed #0d9488;
  border-bottom: 7dp dotted #d97706;
  border-left: 8dp double #7c3aed;
  border-top-left-radius: 18dp 12dp;
  border-top-right-radius: 8dp 20dp;
  border-bottom-right-radius: 24dp 10dp;
  border-bottom-left-radius: 12dp 24dp;
}

兼容性说明

优先使用标准浏览器语法。WebUIX 将布局尺寸与边框绘制分开处理，因此轮廓和装饰边框无需额外补偿缝隙。

上下文变量 {{变量}}

从 Widget Blueprint 或 Bridge Target 的同名属性读取值。调用 NotifyContextChanged("VariableName") 刷新。

<span>{{PlayerName}}</span>
<div style="width: {{Percent}}%;">{{Score}}</div>

数据模型 {{Model.Key}}

通过 SetModelString/SetModelNumber/SetModelBool 写入，HTML 中用 {{Model.Key}} 读取。

Widget->SetModelString("PlayerName", "Alice");
Widget->SetModelNumber("Health", 85.0f);
Widget->SetModelBool("IsAlive", true);
Widget->NotifyContextChanged();

本地化 {{loc:key|fallback}}

<span>{{loc:ui.start_button|Start Game}}</span>
<span>{{loc:hud.health|Health}}: {{Model.Health}}</span>

运行时切换语言：Widget->SetCulture("zh-Hans"); Widget->RefreshLocalization();

UE 内置统计 {{UE::FPS}}

UE::CallText / UE::CallHtml

调用 UFUNCTION 并将返回值插入 HTML 中。CallText 插为纯文本，CallHtml 插为 HTML 片段。

<h2>{{UE::CallText(GetPanelTitle)}}</h2>
<span>{{UE::CallText(FormatScore, Value=Model.Score)}}</span>
<div html="UE::CallHtml(BuildInventoryRows)"></div>

模板指令

<!-- forEach loop -->
<template foreach="item in Model.Items">
  <div class="item-row">{{item.Name}} &times; {{item.Count}}</div>
</template>

<!-- Conditional rendering -->
<template if="{{Model.IsLoggedIn}}">
  <div class="welcome">Welcome, {{PlayerName}}!</div>
</template>
<template else>
  <div class="login-prompt">Please log in.</div>
</template>

<!-- switch -->
<template switch="{{Model.Tab}}">
  <template case="inventory"><div>Inventory</div></template>
  <template case="shop"><div>Shop</div></template>
  <template default><div>Unknown</div></template>
</template>

<!-- show visibility control -->
<div show="{{Model.HasBonus}}">Bonus Active!</div>

HTML 语法

所有可见文本都可以使用 {{loc:key|fallback}}。key 是稳定的翻译 ID；fallback 是翻译还不存在时使用的源文本。

<h2>{{loc:menu.title|Main Menu}}</h2>
<button onclick="StartGame">{{loc:menu.start|Start Game}}</button>
<span>{{loc:hud.health|Health}}: {{Model.Health}}</span>

属性与组件标签

本地化也可以写在属性值里，包括 label、placeholder、title、aria 文本以及 WebUIX 扩展元素配置。

<webuix-option-stepper
  label="{{loc:settings.graphics_quality|Graphics Quality}}"
  options="GraphicsQualityOptions"
  display-key="DisplayName"
  value-key="Value"
  onchange="OnGraphicsQualityChanged">
</webuix-option-stepper>

<input placeholder="{{loc:login.name_placeholder|Player name}}" />

Key 命名

推荐使用按功能域划分的 key，这样布局变化时翻译仍然稳定。不要用行号或临时控件名作为 key。

收集与编译流程

1. 在 WebUIX HTML 源码中新增或修改 {{loc:key|fallback}}。
2. 针对目标 Engine 和 Project 运行本地化编译脚本。
3. 需要人工校对中文时，编辑 Content/WebUIX/Localization/WebUIX/zh-Hans/WebUIX.po。
4. 把更新后的 PO、archive、manifest 和 locres 一起提交，保证打包版本和编辑器显示一致。

Plugins\WebUIX\Scripts\Compile-Localization.ps1 -EngineRoot F:\UE_5.0 -ProjectPath F:\ue5\YourProject\YourProject.uproject

运行时切换语言

在 WebUIX widget 上调用 Set Culture 可以切换 UE culture 并重新加载本地化文本。如果 culture 已经由外部系统切换，只需要刷新当前文档文本时使用 Refresh Localization。

Set Culture: zh-Hans
Set Culture: en
Refresh Localization

打包检查清单

• 打包项目包含目标 culture，例如 en 或 zh-Hans。
• 游戏可切换到的每个 culture 都有对应的 WebUIX.locres。
• HTML fallback 可作为兜底文本，但正式文本应来自本地化资源。

常见问题

支持的事件

使用示例

<button OnClick="StartGame">Start</button>
<button OnClick="OpenSettings(panel='video')">Settings</button>

<input value="{{Model.SearchText}}" OnChange="OnSearchChanged(value)" />
<input value="{{Model.Name}}" OnInput="OnNameInput(value)" />

<div class="item-slot" OnClick="OnSlotClicked(id)" />
<drag-area OnDrop="OnItemDropped(event, id)" />

Bridge Object

创建 UWebUIXBridgeObject，设置 TargetObject，赋给 Widget 的 BridgeObject 属性。事件按名称路由到目标对象。

UMG 导航 (nav-order)

通过 nav-order 属性控制手柄/键盘导航顺序：

<button nav-order="10">First</button>
<button nav-order="20">Second</button>
<button nav-order="auto">Auto</button>
<div nav-order="none">Skipped</div>

基本用法

<animation-watch id="hud-watch"
  scope="subtree"
  visible-only="true"
  emit-update="true"
  update-rate="8"
  OnAnimationStart="OnHudAnimationStart"
  OnAnimationUpdate="OnHudAnimationUpdate"
  OnAnimationEnd="OnHudAnimationEnd"
  OnAnimationCancel="OnHudAnimationCancel">
  <div class="animated-card">Reward</div>
</animation-watch>

网格拖拽

<drag-area id="bag" columns="5" rows="4" count="13" gap="8dp"
  drag-anchor="center" OnDragdrop="OnBagDrop(TargetId)">
  <drag-cell class="slot">
    <span>#{{dragCell::DisplayIndex}}</span>
    <span>{{dragCell::DisplayCol}},{{dragCell::DisplayRow}}</span>
  </drag-cell>
  <drag-item id="sword" col="0" row="0" cols="2" rows="2"
    OnDragstart="OnItemDragStart" OnDragend="OnItemDragEnd">
    <b>2x2</b>
  </drag-item>
</drag-area>

模板变量：{{dragCell::DisplayIndex}} {{dragArea::UsableCount}} {{dragItem::PreviewValid}}。可通过 var-scope="Inventory" 重命名作用域。

自由拖拽（浮动面板）

<div id="panel" class="floating-panel">
  <handle class="title-bar" move_target="panel" edge_margin="0dp">
    Drag Panel
  </handle>
  <p>This panel can be moved by dragging the title bar.</p>
</div>

handle 元素通过 move_target 指定被拖拽的目标，edge_margin 限制边界。拖拽预览渲染在独立透明 RT 上，主页面纹理不会被修改。

拖拽状态 CSS

drag-cell.slot:hot { background: #38bdf833; }
drag-cell.slot:occupied { border-color: #f59e0b; }
drag-item.item:dragging { opacity: .72; transform: scale(1.04); }
drag-item.item:invalid { filter: drop-shadow(0 0 8dp #ef4444); }

radio-group / radio-option

<radio-group value="comfortable" name="Density" OnChange="OnRadioChanged(value)">
  <radio-option value="compact">Compact</radio-option>
  <radio-option value="comfortable" selected>Comfortable</radio-option>
  <radio-option value="debug">Debug</radio-option>
</radio-group>

checkbox-group / checkbox-option

<checkbox-group value="svg,animation" OnInput="OnFeaturesInput(value)">
  <checkbox-option value="svg" selected>SVG</checkbox-option>
  <checkbox-option value="animation" selected>Animation</checkbox-option>
  <checkbox-option value="ime">IME</checkbox-option>
</checkbox-group>

多选值按 DOM 顺序保存为逗号分隔字符串。

dropdown / dropdown-option

支持单选和多选（multiple="true"）。打开时菜单在内部 Popup Layer 绘制，DOM 和事件冒泡保持在 dropdown 内。

<dropdown value="rhi" placeholder="Select mode"
  OnChange="OnDropdownChanged(value)">
  <dropdown-option value="rhi" selected>RHI</dropdown-option>
  <dropdown-option value="slate">Slate fallback</dropdown-option>
</dropdown>

modal

通过 value="true|false" 控制。modal-title 和 modal-footer 自定义标签；不写 footer 则自动生成按钮。

<button modal-action="open" modal-target="settings-modal">Open</button>
<modal id="settings-modal" value="{{SettingsModalOpen}}"
  width="420dp" mask="true" close-on-click-modal="true"
  close-on-press-escape="true" lock-scroll="true"
  OnChange="OnSettingsModalChanged(value)">
  <modal-title>Settings</modal-title>
  <modal-footer>
    <button modal-action="cancel">Cancel</button>
    <button modal-action="confirm">Confirm</button>
  </modal-footer>
</modal>

tooltips

<tooltips placement="top" effect="dark">
  <button>Hover me</button>
  <tooltips-content>
    <b>Tip title</b>
    <p>Explain this setting.</p>
  </tooltips-content>
</tooltips>

password

内部管理原生 password/text 输入和眼睛切换按钮。支持 visible="true|false" show-toggle="true|false" disabled。

<password value="" placeholder="Access code"
  name="AccessCode" OnInput="OnAccessCodeInput(value)" />

标记与模板

可以直接写 radial-item，也可以通过 for 生成子项。key 用于保持重复项稳定，value 是选中值，label 会传递给事件参数；radial-center 用于自定义中心内容。

<radial-menu
  value="{{ SelectedAction }}"
  size="42%"
  hollow="true"
  inner-size="24%"
  inner-gap="8dp"
  content-radius="72%"
  start-angle="-30"
  gap-width="2dp"
  border-mode="outer"
  hover-scale="1.06"
  hover-duration="120ms"
  OnChange="OnRadialChanged(value, index, key, label)">
  <radial-item
    for="(action, index) in Actions"
    key="{{ action.Id }}"
    value="{{ action.Id }}"
    label="{{ action.Label }}"
    OnHover="OnRadialHover(value, index, key, label)"
    OnUnhover="OnRadialUnhover(value, index, key, label)">
    <img src="{{ action.Icon }}" alt="" />
    <span>{{ action.Label }}</span>
  </radial-item>
  <radial-center>{{ SelectedAction }}</radial-center>
</radial-menu>

配置属性

选择与悬停事件

在 radial-menu 上绑定 OnChange，在 radial-item 上绑定 OnHover/OnUnhover。名为 value、index、key、label 的蓝图参数会自动接收对应子项数据。

OnChange="OnRadialChanged(value, index, key, label)"
OnHover="OnRadialHover(value, index, key, label)"
OnUnhover="OnRadialUnhover(value, index, key, label)"

CSS 样式

原生几何继续负责扇区形状和命中测试；可使用普通选择器、类、transition、filter、颜色、图片和 transform 定制子项内容与交互状态。

radial-item {
  color: #d7e8fb;
  transition: transform 120ms ease-out, filter 120ms ease-out;
}
radial-item:hover {
  transform: scale(1.06);
  filter: brightness(1.12);
}
radial-item.selected { color: #67e8f9; }
radial-center { background-color: #07111b; }

性能说明

建议保持 radial-menu 挂载，只修改 value、show、class 或绑定子项数据。稳定的 key 可复用循环子项；仅选择或显隐变化时不要替换整个文档。

Project Settings 与自动检测

手柄输入系统受 Project Settings 中的 bEnableWebUIXGamepadInputSystem 总开关控制（默认开启）；bAutoSwitchInputModeByDevice（默认开启）让插件根据最近一次输入事件的设备类型（键鼠/触控/手柄）自动切换当前输入模式，无需手动调用 Enter Gamepad Input Mode / Enter Mouse & Keyboard Input Mode。方向导航按键（上下左右）默认映射到手柄 D-Pad，二维导航摇杆默认使用左摇杆。

[/Script/WebUIX.WebUIXSettings]
bEnableWebUIXGamepadInputSystem=True
bAutoSwitchInputModeByDevice=True
; GamepadInput defaults (mirrors stock UE gamepad feel):
; ConfirmKey=Gamepad_FaceButton_Bottom, CancelKey=Gamepad_FaceButton_Right
; DirectionalNavStick=Gamepad_Left2D
; NavUpKey=Gamepad_DPad_Up, NavDownKey=Gamepad_DPad_Down
; NavLeftKey=Gamepad_DPad_Left, NavRightKey=Gamepad_DPad_Right

虚拟光标与 UWebUIXGamepadCursorLibrary

手柄模式下会显示一个由摇杆驱动的虚拟光标，行为与鼠标光标一致（可以点击、拖拽、悬停触发 CSS :hover）。UWebUIXGamepadCursorLibrary 蓝图函数库提供获取/覆盖当前输入设备、获取/覆盖导航配置，以及分别为键鼠光标和手柄光标设置独立外观（内置样式或自定义贴图+热点）的静态函数，具体函数签名见下方 Blueprint API 参考。

全局按键监听事件

OnAnyKeyDown / OnAnyKeyUp 是声明在 UWebUIXElementExtension（进而被 WebUIX User Widget / Widget 继承）上的被动监听委托，键盘、鼠标和手柄输入都会触发，且不会消费事件（不影响 HTML 元素自身的正常事件处理），常用来做全局按键提示/重映射 UI。OnInputDeviceChanged 会在自动检测到输入设备切换时触发，附带新的设备类型和（如果是手柄）具体型号名称。

DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FWebUIXKeyEventDelegate, FKeyEvent, KeyEvent);
DECLARE_DYNAMIC_MULTICAST_DELEGATE_TwoParams(FWebUIXInputDeviceChangedDelegate, EWebUIXInputDeviceType, DeviceType, FName, GamepadModel);

// UWebUIXElementExtension / UWebUIXUserWidget / UWebUIXWidget:
UPROPERTY(BlueprintAssignable) FWebUIXKeyEventDelegate OnAnyKeyDown;
UPROPERTY(BlueprintAssignable) FWebUIXKeyEventDelegate OnAnyKeyUp;
UPROPERTY(BlueprintAssignable) FWebUIXInputDeviceChangedDelegate OnInputDeviceChanged;

nav-order 属性

在 HTML 元素上添加 nav-order 属性可以显式声明该元素在方向键/摇杆 UI 导航中的顺序，插件会按 nav-order 数值升序在可聚焦元素之间移动焦点。

<div class="menu">
  <button nav-order="0" OnClick="OnResume">Resume</button>
  <button nav-order="1" OnClick="OnSettings">Settings</button>
  <button nav-order="2" OnClick="OnQuit">Quit</button>
</div>

UWebUIXNavigationStack

一个可选的页面栈管理工具（纯 UObject，非 Widget），提供 PushWidget / PopWidget / ClearWidgets / GetActiveWidget / NumWidgets，用于管理多层全屏页面（如主菜单→设置→图形选项）的入栈/出栈与激活/挂起状态，只有栈顶页面会参与手柄回退焦点（Activate）。因为是普通 UObject，需要用 UPROPERTY 持有它以防止被垃圾回收。

图标包格式

每个 emoji 图标包是一个文件夹，内含按十六进制 Unicode codepoint 命名的 SVG 文件（如 1f600.svg），多 codepoint 组合用短横线连接。这个目录结构与 Twemoji、OpenMoji、Noto Emoji 等主流开源图标集完全一致，可以零转换直接导入使用。

twemoji-common/
  1f600.svg
  1f602.svg
  1f44d.svg
  1f680.svg

Emoji Library 编辑器面板

编辑器工具栏内置 Emoji Library 面板，可以直接输入 URL 下载单个图标包（Download）、从磁盘导入已有的文件夹（Import Folder...）、导出一份示例包（Save Example Pack...）、管理已导入的图标包列表并移除（Remove），以及将当前图标包烘焙成运行时可用的图集资源（Bake For Shipping）。插件本身不内置任何 emoji 美术资源，需要自行下载或导入图标包。

真彩色渲染

自定义 emoji 字形在图集阶段直接光栅化写入真彩色 BGRA 像素，渲染时不会被当作"仅透明度"的普通文字字形处理，因此不受 CSS 文字颜色（color 属性）影响，能保留图标本身的原始配色。

1.6 增量更新

使用方式

// C++
PoolComponent->ShowWebUIXWidget(MyWidgetClass, ViewportZOrder);
PoolComponent->HideWebUIXWidget(MyWidgetClass);
// Calling Show again reuses the same instance — no recreation

Blueprint 中对应节点：Show WebUIX Widget → Hide WebUIX Widget → Show WebUIX Widget（复用实例）。

配置条件

1. Widget Blueprint 父类必须是 UWebUIXUserWidget。
2. 设置 bWarmupOnGameStart = true。
3. 必须设置 DocumentAsset。

预热模式

预计算内容

事件属性

CSS 属性速查

输入与 IME

Windows IME 通过 UE 文本输入接口接入。OnInput 实时同步、OnChange 提交语义、OnTextInput 底层字符流（中文输入不要只依赖它）。

WebUIX 1.6 新增速查

完整语法、事件参数、尺寸行为和示例请参阅 CSS 边框与圆盘菜单章节。