创游世界资料库

外观

写作：待补充更新：2026-05-16字数：—阅读：—维护：Azek431

创游世界UI界面设计系统指南 ​

一句话摘要 ​

本文档系统介绍创游世界引擎中UI界面设计的完整方案，涵盖地图UI、操作UI、物体UI的切换控制、布局设计、数据绑定与联机优化策略。

适合谁阅读 ​

  • 需要设计游戏UI界面的创作者
  • 想了解UI切换机制的开发者
  • 需要解决联机UI卡顿问题的进阶用户
  • 需要设计复杂UI系统的项目架构者

你将学到什么 ​

  • 三种UI类型的定义和使用场景
  • UI切换的基本控制方法
  • UI布局设计原则
  • UI数据绑定策略
  • 联机UI的优化方法
  • 典型UI系统的设计方案

核心结论 ​

⚠️ 说明：以下内容基于截图 OCR 与人工归纳，部分术语可能受 OCR 影响，建议在实际开发中验证。

  1. 创游世界有三种UI类型：地图UI、操作UI、物体UI，各有用途
  2. UI切换是界面流转的核心：通过广播或条件控制UI显示/隐藏
  3. 4.x版本的「当前UI」解决了联机卡顿：减少UI上传等待问题
  4. UI数据绑定要解耦：避免UI直接操作游戏数据

1. UI系统基础概念 ​

1.1 三种UI类型 ​

创游世界的UI系统分为三种类型：

UI类型定义典型用途
地图UI显示在地图场景上的UI元素HUD、头顶血条、地图提示
操作UI覆盖在地图上的操作界面开始菜单、设置面板、背包界面
物体UI挂载在特定物体上的UI组件角色血条、名字标签、状态指示

1.2 三种UI的特点对比 ​

特点地图UI操作UI物体UI
显示层级中高低
控制方式脚本控制显示/隐藏UI切换控制跟随物体
联机同步部分同步主控同步跟随物体同步
交互性有限完整有限
适用场景状态显示表单界面跟随信息

2. 地图UI设计 ​

2.1 定义 ​

地图UI 是显示在地图场景上的UI元素，通常用于：

  • HUD（生命值、金币、任务进度）
  • 头顶信息（角色名称、血条）
  • 地图提示（任务指引、区域名称）

2.2 添加方式 ​

  1. 在编辑器中找到「地图UI」选项
  2. 创建UI元素（文字、图片、进度条等）
  3. 设置默认显示状态
  4. 通过脚本控制显示/隐藏

2.3 基本控制 ​

地图UI脚本：
  当开始时
    显示生命值UI
    显示金币UI

  当玩家受伤时
    刷新生命值显示
    播放动效 "生命变化"

2.4 典型场景 ​

场景 1：HUD显示 ​

HUD控制器脚本：
  当开始时
    显示金币UI
    显示生命UI
    显示任务UI

  当金币变化时
    刷新金币显示
    播放动效 "金币飘字"

场景 2：任务指引 ​

任务指引UI脚本：
  当任务状态变化时
    如果当前任务状态是 "进行中"
      显示指引图标
      设置指引目标
    否则
      隐藏指引图标

3. 操作UI设计 ​

3.1 定义 ​

操作UI 是覆盖在地图上的界面，通常用于：

  • 开始菜单
  • 设置面板
  • 背包界面
  • 商店界面
  • 对话框

3.2 UI切换机制 ​

操作UI通过「UI切换」来控制显示/隐藏：

  • 每个操作UI有独立的图层
  • 可以设置默认显示/隐藏
  • 通过脚本切换不同UI

3.3 基本控制 ​

菜单控制器脚本：
  当点击开始按钮时
    发送广播 "打开主菜单"

主菜单UI脚本：
  当收到广播 "打开主菜单" 时
    显示主菜单UI
    隐藏游戏HUD

  当点击继续按钮时
    隐藏主菜单UI
    显示游戏HUD

3.4 典型场景 ​

场景 1：背包界面 ​

背包按钮脚本：
  当点击时
    发送广播 "打开背包"


背包UI脚本：
  当收到广播 "打开背包" 时
    显示背包界面
    刷新物品列表
    发送广播 "暂停游戏"


  当点击关闭按钮时
    隐藏背包界面
    发送广播 "继续游戏"

场景 2：商店界面 ​

商店UI脚本：
  当收到广播 "打开商店" 时
    显示商店界面
    刷新商品列表
    显示玩家金币

  当点击购买按钮时
    检查金币是否足够
    如果足够
      扣除金币
      发放物品
      刷新显示
    否则
      显示提示 "金币不足"

4. 物体UI设计 ​

4.1 定义 ​

物体UI 是挂载在特定物体上的UI组件，常用于：

  • 角色头顶血条
  • NPC名字标签
  • 状态指示图标
  • 交互提示

4.2 添加方式 ​

  1. 在物体上添加「物体UI」组件
  2. 创建UI元素作为子元素
  3. 设置UI相对于物体的位置
  4. 通过脚本控制内容

4.3 基本控制 ​

角色血条UI脚本：
  当开始时
    刷新血条显示

  当生命值变化时
    刷新血条显示

  当死亡时
    隐藏血条

4.4 典型场景 ​

场景 1：敌人血条 ​

敌人血条脚本：
  当开始时
    获取敌人最大生命值
    显示血条

  当受伤时
    获取当前生命值
    刷新血条进度

  当死亡时
    播放死亡动画
    等待 0.5 秒
    隐藏血条
    销毁自身

场景 2：名字标签 ​

名字标签脚本：
  当开始时
    获取物体名称
    显示名字标签
    设置名字颜色

5. UI数据绑定策略 ​

5.1 数据绑定原则 ​

UI显示的数据应该与游戏数据保持同步，遵循以下原则：

  • 数据来源单一：每个数据只有一个来源
  • UI只显示数据：UI不直接修改游戏数据
  • 通过广播通信：UI发送请求广播，由业务逻辑处理

5.2 推荐的架构模式 ​

游戏逻辑层：
  处理所有业务逻辑
  维护游戏数据
  发送数据更新广播

UI层：
  只负责显示
  接收数据更新广播
  发送用户操作请求广播

数据层：
  存储游戏数据
  提供数据访问接口

5.3 具体实现 ​

金币数据脚本（游戏逻辑层）：
  当开始时
    从存档加载金币数据
    发送广播 "刷新金币显示"

  当金币变化时
    保存金币数据
    发送广播 "刷新金币显示"

金币显示脚本（UI层）：
  当收到广播 "刷新金币显示" 时
    获取当前金币值
    更新金币显示

购买按钮脚本（UI层）：
  当点击时
    发送广播 "请求购买" 并携带文本 "物品ID"

购买处理脚本（游戏逻辑层）：
  当收到广播 "请求购买" 时
    检查金币是否足够
    如果足够
      扣除金币
      发放物品
    发送广播 "购买结果" 并携带文本 "成功/失败"

购买结果显示脚本（UI层）：
  当收到广播 "购买结果" 时
    显示购买结果

6. 联机UI优化 ​

6.1 旧版UI的问题 ​

在4.x之前的版本中，UI同步存在以下问题：

  • UI上传等待导致卡顿
  • 每个操作都需要等待上传完成
  • 多玩家同时操作UI时性能下降

6.2 4.x版本的「当前UI」 ​

4.52.54+版本引入了「当前UI」概念，解决联机UI卡顿问题：

  • 每个玩家只运行自己的UI逻辑
  • 减少不必要的上传等待
  • 显著提升联机性能

6.3 联机UI设计建议 ​

  1. UI只发请求：业务逻辑在地图层处理
  2. 减少连续写入：避免频繁上传导致的延迟
  3. 使用地图广播下沉：确保联机时广播能正确处理
  4. 分离UI和逻辑：UI和数据分开，避免耦合

6.4 具体实现 ​

联机模式下的UI设计：

玩家UI脚本（当前UI）：
  当点击购买按钮时
    发送广播 "请求购买" 并携带文本 "物品ID"
    显示"处理中..."

地图购买处理脚本（地图层）：
  当收到广播 "请求购买" 时
    检查金币是否足够
    处理购买逻辑
    设置系统属性 "购买结果"
    发送广播 "购买完成"


玩家UI更新脚本（当前UI）：
  当收到广播 "购买完成" 时
    获取购买结果
    显示结果
    刷新UI显示

7. UI布局设计 ​

7.1 布局原则 ​

  • 信息优先级：重要信息放在显眼位置
  • 一致性：同类信息使用统一的布局
  • 留白：避免信息过于拥挤
  • 可读性：文字大小和颜色要适合阅读

7.2 常用布局 ​

HUD布局 ​

┌─────────────────────────────────────┐
│ [任务提示]          [金币][生命值]  │
│                                     │
│                                     │
│            [游戏画面]               │
│                                     │
│                                     │
│              [摇杆]                 │
└─────────────────────────────────────┘

背包布局 ​

┌─────────────────────────────────────┐
│          [背包]            [X]    │
├─────────────────────────────────────┤
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐    │
│ │物品1│ │物品2│ │物品3│ │物品4│    │
│ └─────┘ └─────┘ └─────┘ └─────┘    │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐    │
│ │物品5│ │物品6│ │物品7│ │物品8│    │
│ └─────┘ └─────┘ └─────┘ └─────┘    │
│                                     │
├─────────────────────────────────────┤
│  [物品名称]  数量: XX  [使用] [卸下]│
└─────────────────────────────────────┘

8. 常见问题 ​

Q：UI显示在错误的位置怎么办？ ​

A：检查：

  1. UI的锚点设置是否正确
  2. UI的父元素定位是否正确
  3. 是否需要调整UI的坐标

Q：UI数据不更新怎么办？ ​

A：检查：

  1. 数据更新后是否发送了刷新广播
  2. UI是否正确接收了刷新广播
  3. UI的刷新逻辑是否正确

Q：联机时UI卡顿怎么办？ ​

A：优化建议：

  1. 使用「当前UI」写法
  2. 减少连续多次写入
  3. 分离UI和业务逻辑
  4. 使用地图广播下沉

Q：多个UI重叠怎么办？ ​

A：解决方式：

  1. 调整UI的层级顺序
  2. 使用遮罩控制显示范围
  3. 合理规划UI的切换时机

9. 注意事项 ​

  1. UI和逻辑要分离：UI只负责显示，业务逻辑在地图层处理
  2. 避免直接修改数据：通过广播请求，由业务逻辑处理
  3. 联机要考虑同步：UI操作需要考虑多玩家场景
  4. 性能要注意：过多UI会影响渲染性能

10. 相关页面 ​

11. 待验证问题 ​

  • [待验证] UI组件的具体参数说明
  • [待验证] UI层级的具体配置方式
  • [待验证] 不同平台的UI渲染性能差异
  • [待验证] UI动画的最佳实践

12. 后续优化方向 ​

  1. 补充UI组件的详细截图
  2. 添加更多UI系统的设计案例
  3. 完善联机UI的详细说明
  4. 增加UI动画的设计指南

参与维护

发现文档问题？

你可以编辑页面、提交反馈，或复制链接给维护者，帮助这个资料库继续变好。

编辑此页反馈建议

由 Azek431 整理与维护 | 基于 MIT 许可证开源

Copyright © 2026 Azek431 | 内容仅供学习参考，请遵守相关法律法规