使用指南

本文档带你从零开始，完成两种控件的完整使用流程——从创建动画蓝图资产到在游戏中看到打字机效果。全程在蓝图中操作，无需编写 C++ 代码。

使用预设动画（推荐）

Texturge 内置了 9 个开箱即用的动画预设，可直接使用，无需从零创建动画蓝图。

可用的预设

预设资产位于插件 Content 目录的 TextAnimation/Presets/ 下。

NOTE

默认情况下，内容浏览器不显示插件内容。需点击内容浏览器左上角 设置 菜单，勾选 插件内容 后，才能在 Plugins/GameGeekSaikel/UI/Texturge Pro/ 路径下找到 Texturge 的预设与演示资源。

预设资产	效果说明
TABP_FadeIn	淡入 — 字符从不透明度 0 渐变到完全可见
TABP_Typewriter	打字机 — 逐字揭示，类似终端打字效果
TABP_SlideIn	滑入 — 字符从上方滑入到位
TABP_Scale	缩放 — 字符从小缩放至正常大小
TABP_Bounce	弹入 — 字符弹性落入目标位置
TABP_Shake	抖动 — 字符水平/垂直抖动后稳定
TABP_Wave	波浪 — 字符按波浪曲线依次位移
TABP_ColorGradient	颜色渐变 — 字符颜色随时间渐变过渡
TABP_Rotation	旋转 — 字符旋转后复位

TIP

教程中创建的自定义资产建议使用 TABP_Our_ 前缀（如 TABP_Our_Typewriter），避免与插件内置预设重名。

在纯文本控件中使用预设

1. 在内容浏览器中浏览到 Plugins/GameGeekSaikel/UI/Texturge Pro/TextAnimation/Presets/
2. 在 UMG 中拖入 动画文本块
3. 在 细节 面板中将 文本动画蓝图 属性直接设为任一预设资产（如 TABP_Typewriter）
4. 勾选 自动播放 即完成配置

在富文本控件中使用预设

1. 创建 文本动画数据资产
2. 在 动画条目 中将标签名映射到预设动画蓝图
3. 在 动画多格式文本块 的 动画数据资产 属性中选择该数据资产
4. 文本中使用 <anim id="标签名">...</> 内联标签引用对应预设

无需打开动画蓝图编辑器即可完成全部配置。以下各节展示如何从零开始创建自定义动画——适用于预设无法满足需求时。

---

纯文本打字机效果

适用场景：UI 标题入场、任务描述逐字显示、任何只需一种动画效果的文本。

创建文本动画蓝图

1. 在 内容浏览器 中右键 → Texturge → 文本动画蓝图
2. 命名为 TABP_Our_Typewriter
3. 双击打开编辑器

添加不透明度轨道

打字机效果的本质是控制字符的不透明度——从不可见变为完全显示。

1. 在编辑器底部找到动画窗口，点击 +动画 按钮添加动画

2. 在左侧轨道列表面板中，点击 +添加 按钮，在下拉栏中添加 文本动画轨道

3. 选中新添加的轨道，右键，在右侧面板中选中 编辑轨道，配置如下参数：

   属性	值	说明
   控制模式	每字符时长	动画时长为字符单独设置
   字符间隔	0.2	每个字符间隔 0.2 秒后下一个开始
   透明度反转	true	关键：启用透明度反转，使字符默认隐藏

4. 点击 文本动画轨道 右侧的 + ，在下拉菜单中选择 不透明度

添加关键帧

在 Sequencer 面板中：

1. 展开刚才创建的不透明度轨道

2. 在曲线上右键 → Add Key 添加关键帧：

   关键帧	Time	Value	说明
   Key 1	0.0	1.0	字符揭示瞬间

NOTE

透明度反转 反转了整个曲线。添加关键帧值为 1.0，反转后的实际效果就是从不可见变为完全显示。

配置预览文本

1. 在蓝图的 类默认值 面板中找到 预览文本 属性
2. 设为 你好，Texturge！欢迎来到文字动画的世界。
3. 点击工具栏 编译 按钮
4. 在设计器视口中拖动 Sequencer 播放头预览效果——文字逐字”打字”出现

在 UMG 中使用

1. 创建或打开一个 用户控件蓝图 （WBP_HUD）

2. 在 控制板 面板中搜索 “动画文本块”，拖入 设计器 画布

3. 在 细节 面板中配置：

   属性	值
   文本	你好，Texturge！欢迎来到文字动画的世界。
   文本动画蓝图	TABP_Our_Typewriter
   自动播放	true

4. 编译并保存 Widget Blueprint

5. 将此 Widget 添加到 Viewport——在 PlayerController 或 GameMode 的 BeginPlay 中调用 Create Widget + Add to Viewport

蓝图控制播放

如果不使用 自动播放，可通过蓝图节点手动控制：

Event BeginPlay（或任意触发事件）
    │
    ▼
AnimatedTextBlock 引用
    │
    ▼
Play 节点

完整的播放控制节点：

蓝图节点	作用
Play	开始逐字揭示
Pause	暂停
Resume	恢复
Stop	停止并重置——所有字符重新隐藏
SkipToEnd	跳过动画——瞬间显示全部文本

绑定字符揭示事件

在 Widget Blueprint 的 Event Graph 中：

AnimatedTextBlock 控件
    │
    ├─ [OnCharacterRevealedBP] ──► Print String（格式化: "已揭示 {RevealedCount} 个字符"）
    │
    └─ [OnAnimationCompleteBP] ──► Print String（"动画完成！"）

OnCharacterRevealedBP 的 RevealedCount 参数表示当前已揭示的字符总数。可用于更新 UI 进度条、触发音效（配合 UEventSoundComponent）或解锁”跳过”按钮。

---

多格式文本多动画混合

适用场景：RPG 对话——NPC 名称渐变出现、对话正文打字机、关键词弹跳高亮。使用 多格式动画文本 控件，通过内联动画标签对不同文本片段应用不同动画。

创建两个动画蓝图

按上一节的步骤创建两个动画蓝图：

TABP_Our_Typewriter — 打字机效果（同上一节配置）

TABP_Our_BounceIn — 弹入效果：

轨道	TrackType	关键帧
不透明度	Opacity	bInvertOpacity=true，Key 0: (0.0, 1.0)
平移 Y	Translation	Key 0: (0.0, (0, -20)), Key 1: (0.15, (0, 0)) — 从上方 20px 落下
缩放	Scale	Key 0: (0.0, (0.8, 0.8)), Key 1: (0.15, (1, 1)) — 从 80% 弹回原始大小

创建动画数据资产

1. 在 内容浏览器 中右键 → 其他 → 数据资产

2. 选择 文本动画数据资产 作为类

3. 命名为 DA_Dialog

4. 打开 Details 面板，在 动画条目 数组中添加两个条目：

   动画条目	标签名	动画蓝图
   0	typewriter	TABP_Our_Typewriter
   1	bounce	TABP_Our_BounceIn

在 UMG 中使用

1. 打开用户控件蓝图编辑器

2. 从 Palette 拖入 多格式动画文本块

3. 配置多格式文本块的基础配置

4. 在 Details 面板中配置：

   属性	值
   动画数据资产	DA_Dialog
   自动播放	true
   Text	见下方

5. Text 内容——使用内联动画标签：

   <anim id="typewriter">你好，冒险家！</><anim id="bounce">欢迎</><anim id="typewriter">来到我们的村庄。</>

解析规则：

• <anim id="typewriter">...</> 内的文字使用打字机效果显示
• <anim id="bounce">...</> 内的文字使用弹入效果显示
• 未包裹在任何动画标签中的文字不显示动画，直接可见

混合标准多格式文本样式

动画标签可以与引擎内置的多格式文本样式标签混合使用：

<anim id="typewriter"><textstyle>你好，冒险家！</><img id="Image" /></>

标签嵌套规则：

• 动画标签可以包裹样式标签
• 样式标签不可以包裹动画标签
• 两种标签各自独立解析，互不干扰

运行时动态切换对话

对话系统通常需要动态更新文本内容：

Function: ShowDialog

    │
    ▼
AnimatedRichTextBlock → SetText
    │
    ▼
AnimatedRichTextBlock → Play
    │
    ▼ （绑定完成事件）
OnAnimationCompleteBP
    │
    ▼
显示"继续"提示

---

播放控制时序图

Play
  │
  ▼
Animator::StartAnimating
  │
  ├─ 编译管线（ExecutePipeline / ExecutePipeline_RichText）
  ├─ 计算时间参数（Duration / CPS）
  │
  ▼
每 Tick:
  Animator::TickAnimation(DeltaTime)
    │
    ├─ AdvanceFrame
    │   ├─ 前进帧索引
    │   └─ 揭示下一个字符 → Broadcast OnCharacterRevealedBP
    │
    ├─ UpdateCurrentFrameDataCache
    │   └─ 刷新每字符 FAnimationFrameData
    │
    └─ Slate::OnPaint 消费缓存 → 逐字符渲染
  │
  ▼ （最终帧）
OnAnimationCompleteBP 广播
  │
  └─ 若 bLoopPlayback=true → OnLoopRestart → 从头继续

调试技巧

问题	排查方法
动画不播放	检查 bAutoPlay 是否为 true，或确认已手动调用 Play
字符瞬间全显示	确认不透明度轨道设置了 bInvertOpacity=true
动画标签内的文字无动画	检查 TagName 是否与 Entries 中的完全一致（区分大小写）
多格式文本样式标签不生效	确认 URichTextBlock 的 TextStyleSet 属性已配置样式数据表
编辑器预览无动画	点击 Compile 按钮后在设计器视口中拖动 Sequencer 播放头