首页/ 第 10 章 · UI 界面系统/ 第 164 课
LESSON 164 · UI 界面系统

对话框系统

对话框系统完成。下一课做背包与物品栏。

⏱ 约 18 分钟📊 难度:入门🗂 第 10 章 · UI 界面系统📍 第 164 / 300 课
课程进度
164 / 300

🎯本节学习目标

  • 搭建对话框 UI
  • 实现打字机效果
  • 实现对话推进与选项

🚀课程导读

“你好,旅人!”——NPC 对话是 RPG 的灵魂。本课做一个可扩展的对话框系统。

搭建对话框 UI

底栏对话框 + 文本。

  1. 创建 UI:底部 Panel(半透明黑框)作为对话框。
  2. 对话框里放:NPC 名字 TMP(小字,如“老村长”)+ 对话内容 TMP(大字)。
  3. 加“点击继续”提示(小图标/文字,闪烁动画)。
  4. 【结构】DialogueBox(根 Panel)→ NameText + ContentText + ContinueHint。
  5. 【锚点】对话框锚点底部居中,宽度约屏幕 80%。
  6. 默认 SetActive(false),与 NPC 交互时打开。
  7. 【交互触发】走到 NPC 面前按 E(触发器 + 按键,第 96 课 + 112 课)。
💡
对话框 UI = 名字 + 内容 + 继续提示 三行。

打字机效果与对话推进

文字逐个跳出 + 点击推进。

  1. 创建 DialogueSystem 脚本:
  2. public TMP_Text contentText;
  3. public string[] lines; // 对话行
  4. private int lineIndex = 0;
  5. public void StartDialogue(string[] newLines) {
  6. lines = newLines; lineIndex = 0;
  7. gameObject.SetActive(true);
  8. StartCoroutine(TypeLine());
  9. }
  10. IEnumerator TypeLine() {
  11. contentText.text = "";
  12. foreach (char c in lines[lineIndex]) { contentText.text += c; yield return new WaitForSeconds(0.05f); }
  13. }
  14. public void NextLine() {
  15. if (contentText.text == lines[lineIndex]) {
  16. lineIndex++;
  17. if (lineIndex < lines.Length) { StartCoroutine(TypeLine()); } else { EndDialogue(); }
  18. } else {
  19. // 点太快:直接显示整行
  20. contentText.text = lines[lineIndex];
  21. }
  22. }
  23. 【按键推进】Update 里检测 E/鼠标左键调用 NextLine()。
  24. 【要点】打字中点击=跳过;打完点击=下一行;全说完=关闭。
  25. 【结束】EndDialogue() 关闭面板并通知(可解锁玩家控制)。
打字机 = 协程逐字显示;跳过与推进逻辑是对话“手感”关键。

选项分支(进阶)

让玩家选。

  1. 【需求】对话中出现“接受任务 / 拒绝”两个选项。
  2. 【结构】对话行后放选项按钮组(默认隐藏),用 Vertical Layout 两个按钮。
  3. 【数据】行文本里用标记(如 “[Choice]”)表示“此行为选项”。
  4. 【实现】在 TypeLine 完成后检测行是否含选项标记,是则显示选项按钮。
  5. 【按钮绑定】选项A → 执行任务接受逻辑;选项B → 执行拒绝逻辑(可切到另一组对话)。
  6. 【代码示例】
  7. if (lines[lineIndex].StartsWith("[Choice]")) { choicePanel.SetActive(true); return; }
  8. 【简化】新手可先做“线性对话”(无选项),选项作为进阶。
  9. 【数据驱动】把对话数据放进 ScriptableObject(第 85 课)可策划配置。
  10. 【完成】一个可复用的对话系统完工!
  11. 【注意】对话时暂停玩家控制(锁定移动)。
对话系统 = UI + 打字机 + 推进 + (可选)选项。做完它,你的游戏“会说话”了。

常见错误与排查

错误:打字机卡住/文字不全?
原因:协程被中断或 lines 为空
解决:确认协程正确启动;lines 非空;对话期间别停掉对象。

动手练习

课后小任务(做出来才算真的学会)

  • 完成对话框 UI 与打字机效果
  • 实现点击推进与结束
  • (进阶)加入选项分支

本节小结

对话框系统完成。下一课做背包与物品栏。

完成打卡后,主站会实时更新你的学习进度 🎯

← 上一课游戏结束画面(胜负界面)