LPAI 独立网页游戏 AI 社区指南

传统模式 · 编辑器界面

游戏界面

传统模式页面样式、首页、链接栏、属性栏和主页面的组合顺序。

# 传统游戏界面组成

传统模式由页面样式和多个固定区域组合出玩家界面。纯 AI 新项目默认使用渲染布局,不需要按这套固定区域搭页面。

# 区域与字段

区域 管理内容 验证重点
页面样式 全局颜色、间距、背景与区域样式 桌面和移动端一致性
首页设置 初始说明、入口与首页内容 首次进入和返回
链接栏 场景或插件导航入口 解锁、隐藏与顺序
属性栏 固定展示的玩家属性 数值更新与溢出
主页面 当前场景及其控件树 交互、弹窗与滚动
迷你聊天/固定内容 跨场景常驻区域 遮挡和登录状态

# 渲染顺序

先应用页面样式,再建立外壳区域;链接栏和属性栏读取配置,主页面渲染当前场景,固定内容最后叠加。控件隐藏不等于取消其脚本或引用。

# 为每个可见区域确定唯一归属

问题 传统模式中的归属
是否跨场景常驻? 页面样式、链接栏、属性栏或其他常驻区域
是否只属于一个场景? 场景控件树或场景渲染布局
是否修改玩家状态? 语义控件/事件动作,不能放在样式代码中
是否按对象重复? 绑定对象类并保留稳定对象 ID 的控件/列表
是否需要逐帧动画? 读取快照并发出 binding 的 Canvas renderer
是否只是视觉/声音反馈? 有明确清理路径的客户端特效/音频

不要让同一责任同时出现在传统固定区域和渲染布局覆盖层。重复导航、固定栏或动作按钮即使有一份视觉隐藏,也可能仍然可交互。

# 配置顺序

  1. 定义首页和默认场景。
  2. 设置链接栏、属性栏的必要内容。
  3. 配置主页面控件与跳转。
  4. 最后添加常驻聊天或固定内容。
  5. 用实时预览检查窄屏、长文本和弹窗。

# 迁移到渲染布局

迁移到渲染布局时保留场景、控件和绑定 ID,逐页替换显示层,不同时重写规则。验收首次进入、场景切换、返回、滚动、固定区域遮挡和移动端底部安全区。

# 响应式测试矩阵

状态 桌面端 窄屏/移动端
首次进入 首页说明与主操作可见 无横向裁切,主操作可触达
长内容 主区域拥有正确滚动 固定栏不截断或覆盖滚动
弹窗 焦点与关闭行为正确 弹窗适配视口与安全区
长翻译 栏目和按钮能扩展或换行 文案不逃出点击区域
插件页 入口与返回路径清晰 嵌入内容不遮挡导航

# 常见组合失败

  • 固定区域和场景占用同一空间,导致内容互相遮挡。
  • 重复控件虽然隐藏,仍通过另一个 binding 运行脚本。
  • 页面样式和控件样式同时控制尺寸,引发布局抖动。
  • 场景切换更新主区域,但遗留旧的常驻内容。
  • 移动端高度沿用桌面假设,最后一个操作被安全区遮住。

验收必须包含目标宽度下的截图或实际操作,还要有状态证据证明每个可见动作只修改了一次正确的运行时所有者。

下一页:调试区域