初始化仓库：友乐/gameabc 房卡游戏平台脚手架（client + server + docs）
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,114 @@
|
||||
# 01 · 前端架构与运行环境
|
||||
|
||||
本篇建立**全局认知**：前端跑在什么环境、由哪几层构成、新旧两套架构如何并存、文件按什么顺序加载。读懂这一篇，后面的渲染、系统、网络才有坐标。
|
||||
|
||||
> 举例以麻将为主，但 `gameabc-framework` 是游戏中立的通用框架，本篇机制对任意子游戏一致。
|
||||
|
||||
---
|
||||
|
||||
## 1. 运行环境
|
||||
|
||||
- **部署形态**：前端是**浏览器静态资源**，由 gameabc 引擎(`js/vendor/gameabc.min.js`)驱动，绘制基于精灵(Sprite)/图层(Layer)/群组(Group)的 2D 画面。不走 npm 构建。
|
||||
- **与服务端**：通过平台网络层收发 JSON 包（`{app, route, rpc, data}`），全程异步；服务端权威，前端只显示与发起操作。
|
||||
- **ES5 强制**：线上浏览器/平台不保证 ES6+。全部 JS 必须严格 ES5——用 `var`/`function`，对象继承用 `Object.create`，禁 `let`/`const`/箭头函数/模板字符串/`class`/解构/默认参数。
|
||||
- **少量 Node 仅用于测试/工具**：`shared/` 算法可在 Node 跑单测，`scripts/` 是 Spine 数据构建脚本；线上运行时无 `require`，跨文件一律按**全局名**引用（各文件用 `var X = ...` 暴露全局，`index.html` 顺序加载）。
|
||||
|
||||
---
|
||||
|
||||
## 2. 三层结构：平台 / 框架 / 子游戏
|
||||
|
||||
```
|
||||
js/vendor/ 第三方与引擎（禁改）
|
||||
gameabc.min.js gameabc 引擎原生 API
|
||||
jquery / spine-canvas.js
|
||||
|
||||
js/00_Surface/ 前端平台代码（禁改）
|
||||
Const/Data/Desk/Func/Game/GameUI/Logic/Net/Player/Utl_* ...
|
||||
|
||||
js/gameabc-framework/ ★ 通用模板框架（游戏中立，可复用）
|
||||
core/ GameABCUtils（唯一直连引擎）、SpriteManager（业务级精灵 API）
|
||||
system/ EventBus、AnimationManager、AudioManager
|
||||
ui/ BaseComponent、UIManager、SpriteCopyUtils、DynamicSpriteList
|
||||
spine/ SpineMgr
|
||||
templates/ *.template.js（派生子游戏时复制填充的模板）
|
||||
|
||||
js/01_SubGame/ 子游戏前端
|
||||
00_/01_/02_SubGame_*.js ★ 受限对接层（平台入口，尽量不改）
|
||||
codes/ ★ 子游戏实例（单向依赖框架；内部结构由子游戏自行组织）
|
||||
shared/ 前后端共享算法（服务端为权威源，同步而来，只读）
|
||||
```
|
||||
|
||||
> `codes/` 内部如何分目录、如何命名文件，均由子游戏自行决定，本套文档不作规定；唯一例外是 `shared/`——它是服务端共享算法的同步副本，前端只读（见 05）。
|
||||
|
||||
依赖方向是**单向**的：`01_SubGame/codes` → `gameabc-framework` → `gameabc.min.js`。框架**不反向依赖**任何子游戏（这正是上一步把 `EventBus` 里的麻将事件剥离出去的原因，见 03/05 的「框架中立」）。
|
||||
|
||||
---
|
||||
|
||||
## 3. 新旧两套架构并存（重要）
|
||||
|
||||
前端当前**两套架构并存**，理解边界才不会改错地方：
|
||||
|
||||
| | 旧架构（受限对接层） | 新架构（gameabc-framework + codes） |
|
||||
|--|----------------------|--------------------------------------|
|
||||
| 位置 | `js/00_Surface/`、`01_SubGame/00_/01_/02_SubGame_*.js` | `js/gameabc-framework/`、`01_SubGame/codes/` |
|
||||
| 角色 | 平台框架的**固定入口**，承接平台事件 | 子游戏真正的渲染/逻辑/网络实现 |
|
||||
| 可改性 | 平台代码禁改；受限文件不新增接口、尽量不改 | 在此自由开发 |
|
||||
|
||||
**对接方式**：平台事件先进旧的 `Game_Modify.*` 入口，旧入口**只做转交**，把数据委托给新架构处理（详见 04）：
|
||||
|
||||
```
|
||||
平台 → Game_Modify.appStart() → 启动初始化 启动
|
||||
平台 → Game_Modify.StartWar(_msg) → 开局处理 开局
|
||||
平台 → Game_Modify._ReceiveData() → 收包分发（按 rpc 分发） 对局推送
|
||||
平台 → Game_Modify.Reconnect(info) → 重连处理（据数据重画） 重连
|
||||
```
|
||||
|
||||
红线：**受限文件里只做“接住并转交”，业务逻辑写在新架构的 controllers/handlers 里**，不要在 `Game_Modify.*` 里堆逻辑。
|
||||
|
||||
---
|
||||
|
||||
## 4. 加载顺序（index.html）
|
||||
|
||||
`index.html` 按严格顺序加载脚本，**顺序即依赖**。典型分段：
|
||||
|
||||
```
|
||||
阶段0 引擎与 Spine vendor/gameabc.min.js → generated/spine_* → spine/SpineMgr.js
|
||||
阶段1 框架核心 + 常量 gameabc-framework/core·system → 子游戏共享常量
|
||||
阶段1.5 子游戏事件常量 追加到 EventBus.Events
|
||||
阶段2 工具/数据结构/算法 子游戏共享算法
|
||||
阶段3 精灵/资源/布局常量 整合入口最后加载
|
||||
阶段4 框架 UI + 业务视图 gameabc-framework/ui/* → 子游戏视图组件
|
||||
阶段5 控制器/管理器/网络 子游戏消息处理/资源管理/收发包
|
||||
阶段6 旧受限对接层 01_SubGame/00_/01_/02_SubGame_*.js
|
||||
```
|
||||
|
||||
> 上表按“职责”分段，非规定 `codes/` 的目录布局；具体目录/文件由子游戏自定，只要**被依赖者先加载**即可。
|
||||
|
||||
加载顺序的两条铁律：
|
||||
1. **被依赖者先加载**。例如框架 `EventBus.js` 必须在子游戏事件常量之前、事件常量又必须在任何注册这些事件的视图之前；整合所有精灵常量的入口文件必须**最后**加载。
|
||||
2. **新增文件要插对位置**。新增一个常量/组件文件，必须在 `index.html` 里插到其依赖之后、使用者之前，否则运行时拿到 `undefined`。
|
||||
|
||||
> 示例：把玩法专属事件从框架剥到子游戏事件常量文件时，正是把它插在 `EventBus.js`(框架)之后、其使用者(视图组件)之前，引用零改动。
|
||||
|
||||
---
|
||||
|
||||
## 5. codes/ 内部组织
|
||||
|
||||
`codes/` 是子游戏的自由开发区，**目录如何划分、文件如何命名，由子游戏自行决定**，本套文档不作强制规定。
|
||||
|
||||
只需把握两条通用原则（不依赖具体目录布局）：
|
||||
|
||||
- **职责分离、调用不重造**：一个职能只在一处实现，其他地方调用它，不复制近似逻辑（渲染/动画/音频/收发包/共享算法等，见 05「模块职责边界」）。
|
||||
- **`shared/` 是唯一受约束的子目录**：它是服务端共享算法的同步副本，前端**只读**，改服务端权威源再同步（见 05「shared 同步」）。
|
||||
|
||||
---
|
||||
|
||||
## 6. 小结
|
||||
|
||||
- 前端是浏览器静态资源 + gameabc 引擎，**严格 ES5**，跨文件按全局名引用、`index.html` 顺序加载。
|
||||
- 三层：平台(禁改) / 框架(游戏中立、可复用) / 子游戏(单向依赖框架)。
|
||||
- 新旧架构并存：平台事件经旧 `Game_Modify.*` 入口**转交**到新架构 handler；受限文件只接不写。
|
||||
- 加载顺序即依赖，新增文件务必插对位置。
|
||||
|
||||
下一篇 [02-渲染与UI组件体系](./02-渲染与UI组件体系.md) 讲：精灵怎么画、资源常量怎么组织、UI 组件怎么写。
|
||||
</content>
|
||||
@@ -0,0 +1,302 @@
|
||||
# 02 · 渲染与 UI 组件体系
|
||||
|
||||
本篇讲**界面怎么搭**：精灵 ID 体系与分层调用、资源/布局常量三件套、UI 组件的生命周期、场景切换与动态列表。这是前端日常写得最多的部分。
|
||||
|
||||
> 麻将作举例（手牌、弃牌、吃碰杠按钮），但精灵/常量/组件的范式对任意子游戏一致。
|
||||
|
||||
---
|
||||
|
||||
## 1. 精灵与渲染分层
|
||||
|
||||
gameabc 的画面由**精灵(Sprite)**组成，按**图层(Layer)**、**群组(Group)**组织。操作精灵走一条严格分层链：
|
||||
|
||||
```
|
||||
UI 组件
|
||||
└─ SpriteManager 业务级 API：ID 范围校验 + 单位换算
|
||||
└─ GameABCUtils 唯一直接调引擎原生 API 的模块（底层原子操作）
|
||||
└─ gameabc.min.js 引擎
|
||||
```
|
||||
|
||||
**铁律：UI 代码只调 `SpriteManager`，禁止直接调 `GameABCUtils` 或引擎原生 API**（`set_self`/`get_self` 等）。分层的意义：ID 校验、单位换算、引擎版本隔离都集中在边界，业务层无感。
|
||||
|
||||
### SpriteManager 常用 API
|
||||
|
||||
| API | 作用 | 说明 |
|
||||
|-----|------|------|
|
||||
| `show(id)` / `hide(id)` | 显示/隐藏精灵 | 返回 `boolean`，**失败要查返回值** |
|
||||
| `setFrame(id, frame)` | 切换多帧图片的帧 | 一个精灵多帧，靠切帧表现不同牌面，**胜过为每张牌建一个精灵** |
|
||||
| `setPosition(id, x, y)` | 设置坐标 | |
|
||||
| `setScale(id, scale)` | 缩放 | 业务用倍数(`1.2`)，框架自动转引擎百分比 |
|
||||
| `setOpacity(id, o)` | 透明度 | 业务用 `0.0–1.0`，框架自动转 `0–255` |
|
||||
| `setText(id, text)` / `setTextWithWidth(...)` | 文字 | 文字精灵 |
|
||||
| `showGroup(gid)` / `hideGroup(gid)` | 群组批量 | 整块 UI 显隐 |
|
||||
| `showLayer(lid)` / `hideLayer(lid)` | 图层批量 | 整个界面显隐 |
|
||||
| `exists(id)` | 存在性检查 | |
|
||||
|
||||
```js
|
||||
// 显示手牌：一个精灵切帧表现不同牌面
|
||||
for (var i = 0; i < handCards.length; i++) {
|
||||
var sid = handSpriteIds[i];
|
||||
SpriteManager.show(sid);
|
||||
SpriteManager.setFrame(sid, handCards[i].code - 1); // 帧号 = code-1
|
||||
}
|
||||
// 刷新弃牌区：先全隐藏，再按数据显示
|
||||
for (var k = 0; k < maxDiscards; k++) { SpriteManager.hide(discardIds[k]); }
|
||||
for (var j = 0; j < discards.length; j++) {
|
||||
SpriteManager.show(discardIds[j]);
|
||||
SpriteManager.setFrame(discardIds[j], discards[j].code - 1);
|
||||
}
|
||||
```
|
||||
|
||||
### 精灵 ID 二元性
|
||||
|
||||
精灵 ID 有两种，`SpriteManager` 透明支持，开发者无需区分：
|
||||
|
||||
- **数字 ID**：编辑器里预置的精灵（如 `1121`）。
|
||||
- **字符串 ID**：运行时由 `SpriteCopyUtils` 动态复制出的精灵，格式 `"容器IDadd标签"`（如 `"2836add0"`）。
|
||||
|
||||
### ID 范围（必须遵守）
|
||||
|
||||
| 资源 | 子游戏可用范围 | 框架保留 |
|
||||
|------|----------------|----------|
|
||||
| 精灵 ID | **1001–3000** | 1–1000、3001+ |
|
||||
| 群组 ID | **≥ 201** | 1–200 |
|
||||
| 图文资源 | **≥ 1001** | 1–1000 |
|
||||
| 图片资源 | **≥ 501** | 1–500 |
|
||||
| 声音 | **≥ 101** | 1–100 |
|
||||
| 图层 | **101–200、301–400、501–600、701+** | 1–100、201–300、401–500、601–700 |
|
||||
|
||||
图层按 100 为段与框架交替分配：子游戏用 `101–200`（常规界面）、`301–400`（弹窗，示例用 302）、`501–600`、`701+`；其余段为框架保留，**不可占用**。
|
||||
|
||||
ID 必须与编辑器中实际存在的精灵**完全一致**。超范围 → `SpriteManager` 校验失败返回 `false`；编辑器里不存在的 ID → 操作静默无效。**绝不随意编造 ID。**
|
||||
|
||||
---
|
||||
|
||||
## 2. 资源与布局常量三件套
|
||||
|
||||
界面所需的“数据”全部集中在常量文件里，业务代码只引用、不内联裸值。三类常量各司其职：
|
||||
|
||||
| 常量类别 | 管什么 | 一句话 |
|
||||
|----------|--------|--------|
|
||||
| 精灵结构常量 | **精灵 ID 与结构** | 每个界面有哪些精灵、归哪个图层/群组 |
|
||||
| 图片资源常量 | **图片资源 ID** | 每个精灵用哪张图、几帧、每帧什么、尺寸 |
|
||||
| 布局常量 | **坐标/尺寸/偏移** | 纯数据，精灵摆在哪、多大、怎么排 |
|
||||
|
||||
外加一个**整合入口**把三类统一为一份精灵常量，并**最后加载**。
|
||||
|
||||
### 资源与精灵手动创建，常量靠注释指路
|
||||
|
||||
**精灵、图片、声音、Spine 资源全部由开发者手动创建**——精灵在游戏编辑器里逐个建好，图片/音频/Spine 文件按平台规范放入资源目录；**代码不创建任何资源，只按常量 ID 引用**，ID 必须与编辑器/资源目录里实际存在的**完全一致**（见 §1，绝不编造）。
|
||||
|
||||
正因资源是"先手动建、再按 ID 引用"，**常量定义必须写准注释，让人据注释就能准确创建出对应资源**：
|
||||
|
||||
- **精灵结构常量**：每个精灵注明【精灵类型（图片精灵 / 文字精灵）+ 功能 + 关联的图片资源 ID + 帧数说明】。
|
||||
- **图片资源常量**：每个资源注明【帧数（单帧 / N 帧，且每帧含义）+ 用途 + 尺寸】。
|
||||
|
||||
（声音、Spine 资源的注释要求见 03。资源 ID 范围与注释格式细则以《[友乐游戏引擎精灵与资源管理接口规范](../../../docs/important/client/友乐游戏引擎精灵与资源管理接口规范.md)》为准。）
|
||||
|
||||
### 三者如何配合（新增一块 UI 的流程）
|
||||
|
||||
以“新增一个弹窗”为例：
|
||||
|
||||
1. **精灵结构常量**：定义精灵结构与 ID（弹窗图层 301–400 段、群组、各精灵 ID 1001–3000）。
|
||||
2. **图片资源常量**：定义所需图片资源 ID（背景、行模板…），注明帧数/帧义/尺寸。
|
||||
3. **布局常量**：定义坐标尺寸（列表容器、行高、各列偏移）。
|
||||
4. **整合入口**：把新结构并入统一的精灵常量。
|
||||
5. **写组件**：UI 代码只引用精灵常量与 `SpriteManager`，不出现任何裸数字。
|
||||
|
||||
### 几条约定
|
||||
|
||||
- **按钮只要 1 帧普通态图**：点击的缩放/透明反馈由框架统一处理，不要为“按下态”单独配图。
|
||||
- **帧动画只在图片资源常量记资源 ID**，帧区间/帧间隔/循环等播放参数放动画配置（见 03），不在资源文件重复。
|
||||
- **布局文件是纯数据**：无函数、无副作用。侧视角的“透视倾斜”用每张牌累积的透视偏移量表达。
|
||||
- **多文件用保护性声明**：`var XxxConstants = XxxConstants || {};` 便于拆分到主界面/弹窗多个文件，加载后合并为一份。
|
||||
|
||||
> 模板 `gameabc-framework/templates/*.template.js` 是这三类文件的**写法蓝本**，含详细的字段注释与 `@see` 指向实现文件。派生新子游戏时复制模板再按实际资源填充。
|
||||
|
||||
---
|
||||
|
||||
## 3. UI 组件：BaseComponent
|
||||
|
||||
所有视图组件继承框架的 `BaseComponent`，获得统一的**生命周期**与**事件自动清理**。
|
||||
|
||||
### 标准结构
|
||||
|
||||
```js
|
||||
var MyView = Object.create(BaseComponent);
|
||||
|
||||
MyView.init = function (config) {
|
||||
// ⚠️ 必须在 init 内重新声明实例属性，避免原型共享污染
|
||||
this.sprites = [];
|
||||
this.eventListeners = {};
|
||||
this.isVisible = false;
|
||||
this.isInitialized = false;
|
||||
this.isDestroyed = false;
|
||||
this.name = config.name || 'MyView';
|
||||
this.layer = config.layer || 102;
|
||||
|
||||
// 创建精灵（ID 从精灵常量取，见 §2）
|
||||
this.addSprite(spriteConstants.SOME_PANEL_BG);
|
||||
|
||||
// 注册事件（用 addEventListener，destroy 时自动清理）
|
||||
var self = this;
|
||||
this.addEventListener(EventBus.Events.GAME_STARTED, function (data) {
|
||||
self._onGameStarted(data);
|
||||
});
|
||||
|
||||
this.isInitialized = true;
|
||||
};
|
||||
```
|
||||
|
||||
### 生命周期钩子
|
||||
|
||||
| 钩子 | 何时 | 是否覆盖 |
|
||||
|------|------|----------|
|
||||
| `init(config)` | 创建时 | ✅ 子类必须实现：建精灵、注册事件 |
|
||||
| `show()` / `hide()` | 显隐 | ❌ 通常不覆盖（内部显隐图层并回调 `onShow/onHide`） |
|
||||
| `destroy()` | 销毁 | ❌ 不覆盖（自动清理事件监听、隐藏精灵，回调 `onDestroy`） |
|
||||
| `onShow/onHide/onDestroy` | 上述内部末尾 | ✅ 可选：播放动画、清定时器/动态精灵 |
|
||||
|
||||
### 事件必须走 `addEventListener`（防内存泄漏）
|
||||
|
||||
```js
|
||||
// ❌ 直接 EventBus.on：destroy 时不会自动 off，监听残留 → 泄漏
|
||||
EventBus.on(EventBus.Events.GAME_STARTED, fn);
|
||||
|
||||
// ✅ BaseComponent.addEventListener：destroy() 自动 off
|
||||
this.addEventListener(EventBus.Events.GAME_STARTED, fn);
|
||||
```
|
||||
|
||||
`BaseComponent.addEventListener` 会包装处理函数（绑定 `this`、捕获异常、销毁后忽略事件），并记录下来在 `destroy()` 时统一 `EventBus.off`。**销毁组件用 `destroy()` 而非只 `hide()`** —— 只有 `destroy()` 才清理监听。
|
||||
|
||||
---
|
||||
|
||||
## 4. UIManager：注册与场景切换
|
||||
|
||||
`UIManager` 管理所有组件实例与**场景**（一组组件的具名快照）。
|
||||
|
||||
```js
|
||||
// 启动时（在启动编排内）
|
||||
UIManager.init(); // 若有 Loading/Message/Confirm 全局 UI，则注入其精灵常量（见下）
|
||||
|
||||
var gameView = MyView.create({ name: 'GameView', layer: 102 });
|
||||
UIManager.registerComponent('GameView', gameView);
|
||||
UIManager.registerComponent('RoomView', RoomView.create({ name: 'RoomView' }));
|
||||
|
||||
// 注册场景：场景名 → 组件名列表
|
||||
UIManager.registerScene(UIManager.SCENES.GAME, ['GameView', 'SomeOtherView']);
|
||||
UIManager.registerScene(UIManager.SCENES.ROOM, ['RoomView']);
|
||||
|
||||
// 切换场景：自动隐藏旧场景组件、显示新场景组件
|
||||
UIManager.switchToScene(UIManager.SCENES.GAME);
|
||||
```
|
||||
|
||||
`UIManager` 还提供全局 UI：`showLoading/hideLoading`、`showMessage`、`showConfirm`。这三个全局 UI 的精灵常量由**子游戏注入**——框架不读取任何子游戏全局名，子游戏在 `init` 时传入配置：
|
||||
|
||||
```js
|
||||
UIManager.init({
|
||||
loadingUI: spriteConstants.LOADING_UI,
|
||||
messageUI: spriteConstants.MESSAGE_UI,
|
||||
confirmUI: spriteConstants.CONFIRM_UI
|
||||
}); // 不传则跳过全局 UI；也可后续 UIManager.configureGlobalUI(config)
|
||||
```
|
||||
|
||||
**游戏专属弹窗**用“向 UIManager 挂方法”的扩展模式（在独立 JS 里 `UIManager.showCreateRoom = function(){...}`），保持框架本身中立。
|
||||
|
||||
---
|
||||
|
||||
## 5. 精灵交互事件：SpriteEventController
|
||||
|
||||
精灵的点击/拖拽/绘制等交互，由框架 `gameabc-framework/system/SpriteEventController.js` 统一分发——它是**游戏中立**的通用能力，玩法专属逻辑通过钩子注册，不写进框架。
|
||||
|
||||
平台引擎的交互事件先进受限入口 `Game_Modify.utlmousedown/mouseup/utlmousemove/utlgamemydrawbegin/gamemydraw`，这些入口**只把事件转调**给 `SpriteEventController.handle*`，由它按「精灵 ID」分发到注册的回调。
|
||||
|
||||
### 按精灵 ID 注册回调
|
||||
|
||||
```js
|
||||
// 在组件 init 里注册（精灵 ID 从常量取，见 §2）
|
||||
SpriteEventController.registerMouseUp(sprites.BTN_START, function (event) {
|
||||
self._onStart(); // event 含 spriteId/坐标/偏移等
|
||||
});
|
||||
SpriteEventController.registerMouseMove(sprites.HAND_AREA, function (event) {
|
||||
self._onDrag(event.offset);
|
||||
});
|
||||
// 批量：registerBatch(spriteIds, 'mouseDown', handler)
|
||||
// 注销：unregister(spriteId[, eventType])
|
||||
```
|
||||
|
||||
支持的事件类型：`mouseDown` / `mouseDownNoMove`(长按) / `mouseUp` / `mouseMove`(拖拽) / `drawBegin` / `draw`。
|
||||
|
||||
### 全局 draw 钩子
|
||||
|
||||
需要对**每个**绘制精灵统一处理（不针对某个固定 ID）的能力，用 `registerGlobalDraw` 注册——框架对每个 draw 事件都回调它，但**不认识**其业务含义，保持中立：
|
||||
|
||||
```js
|
||||
// 例：某种标记叠绘——子游戏自行挂载，框架零感知
|
||||
SpriteEventController.registerGlobalDraw(function (spriteId) {
|
||||
// 子游戏自定义的叠绘逻辑
|
||||
});
|
||||
```
|
||||
|
||||
> 这套通用精灵事件分发原先躺在子游戏 `controllers` 里、还被框架反向依赖；现已抽进框架，并把「精牌标记」这类玩法耦合改为全局 draw 钩子（见 05「框架中立」）。
|
||||
|
||||
### 更高层：手势识别 `SpriteGestureRecognizer`
|
||||
|
||||
需要识别**双击 / 滑动 / 点击**等手势时，用框架 `system/SpriteGestureRecognizer.js`（建立在 `SpriteEventController` 之上）。它把原始按下/移动/松开识别为语义手势，业务只写回调：
|
||||
|
||||
```js
|
||||
var handle = SpriteGestureRecognizer.attach(spriteIds, {
|
||||
onPress: function (e) {}, // 按下即时反馈（如元素站起）
|
||||
onDoubleTap: function (e) {}, // 双击同一精灵
|
||||
onSwipe: function (e) {}, // 沿 e.direction 滑动越阈
|
||||
onTap: function (e) {} // 点击（小位移按下→松开）
|
||||
}, { doubleTapInterval: 300, swipe: { direction: 'up', threshold: 50 }, minMove: 10 });
|
||||
// handle.detach() / resetDoubleTap() / resetDrag()
|
||||
```
|
||||
|
||||
阈值由子游戏注入（框架只给默认值、不反读子游戏常量）；双击/上滑/点击判定全在框架，选中/出牌等业务全留子游戏。
|
||||
|
||||
> 范例：手牌的「双击出牌 / 上划出牌 / 点击选中取消」由子游戏的交互处理器用本识别器实现——手势识别归框架，玩法业务归子游戏。
|
||||
|
||||
---
|
||||
|
||||
## 6. 动态列表：SpriteCopyUtils 与 DynamicSpriteList
|
||||
|
||||
行数不定的列表（如听牌提示、战绩行）用**动态复制精灵**实现，不要为每行预置精灵。
|
||||
|
||||
- **`SpriteCopyUtils`**（底层）：从“模板精灵”复制出带 `tag` 的子精灵，返回字符串 ID；`create/remove/removeRange`。
|
||||
- **`DynamicSpriteList`**（高级）：封装容器裁剪区、行高、每列模板、滚动与点击，开发者只 `setData` + `onClick`。
|
||||
|
||||
```js
|
||||
var list = new DynamicSpriteList({
|
||||
containerId: spriteConstants.SOME_LIST_CONTAINER,
|
||||
clipArea: { x: 0, y: 0, width: 640, height: 480 },
|
||||
rowHeight: 80,
|
||||
templates: {
|
||||
rowBg: { spriteId: 2837 },
|
||||
card: { spriteId: 2838, offset: { x: 20, y: 10 } },
|
||||
score: { spriteId: 2839, offset: { x: 120, y: 10 } }
|
||||
}
|
||||
});
|
||||
list.setData(rows); // 数据驱动
|
||||
list.onClick = function (type, rowIndex, rowData) { /* ... */ };
|
||||
// 组件 onDestroy 中：list.destroy(); ← 必须，否则复制精灵残留
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 本篇 DO / DON'T
|
||||
|
||||
| DO ✅ | DON'T ❌ |
|
||||
|------|---------|
|
||||
| UI 只调 `SpriteManager` | 直接调 `GameABCUtils`/引擎原生 API |
|
||||
| 一精灵多帧、`setFrame` 切换 | 为每种牌面建一个精灵 |
|
||||
| 精灵 ID 1001–3000、群组 ≥201、从编辑器查证 | 随意编造 ID / 超范围 ID |
|
||||
| 检查 `SpriteManager` 返回值 | 忽略 `false` 返回 |
|
||||
| 精灵/资源/坐标全进常量文件 | 在业务代码内联裸数字 |
|
||||
| 组件继承 `BaseComponent`，事件用 `addEventListener` | 自建组件类 / 直接 `EventBus.on` |
|
||||
| 销毁用 `destroy()`，`onDestroy` 清动态精灵与定时器 | 只 `hide()` 就当销毁 |
|
||||
| 动态列表用 `DynamicSpriteList` 并 `destroy` | 手搓 SpriteCopy 又忘清理 |
|
||||
|
||||
下一篇 [03-事件·动画·音频·Spine](./03-事件·动画·音频·Spine.md) 讲表现系统：事件总线、动画、音频与 Spine。
|
||||
</content>
|
||||
@@ -0,0 +1,184 @@
|
||||
# 03 · 事件 · 动画 · 音频 · Spine
|
||||
|
||||
本篇讲**表现系统**：模块间怎么用事件解耦、动画怎么发起与配置、音效/语音怎么分层、Spine 骨骼动画怎么播。四套系统的共同主线是——**框架提供中立能力，子游戏只填玩法专属的配置**。
|
||||
|
||||
---
|
||||
|
||||
## 1. EventBus：模块间事件总线
|
||||
|
||||
`EventBus` 是发布-订阅总线，用于解耦模块（控制器改完数据 `emit`，视图 `on` 后刷新），避免直接相互调用。
|
||||
|
||||
### 命名与中立原则
|
||||
|
||||
- 事件名两段式 `"模块:动作"`，统一定义在 `EventBus.Events` 常量里，**不硬编码字符串**。
|
||||
- **框架不预置任何事件常量**：`gameabc-framework/system/EventBus.js` 只提供发布-订阅机制与一个**空容器** `EventBus.Events = {}`，不内置哪怕通用语义的事件名。
|
||||
- **全部事件由子游戏集中定义**：在子游戏侧的事件常量文件把本子游戏用到的**全部**事件（通用语义 + 玩法专属）注册到 `EventBus.Events`，业务侧统一 `EventBus.Events.XXX` 引用。
|
||||
|
||||
```js
|
||||
// 子游戏事件常量文件 —— 在 EventBus 之后、使用者之前加载
|
||||
(function () {
|
||||
if (typeof EventBus === 'undefined' || !EventBus.Events) {
|
||||
throw new Error('[GameEvents] EventBus 未加载；请检查 index.html 加载顺序');
|
||||
}
|
||||
var E = EventBus.Events;
|
||||
// 通用语义事件
|
||||
E.GAME_STARTED = 'game:started';
|
||||
E.PLAYER_DISCARDED = 'player:discarded';
|
||||
E.SCENE_CHANGED = 'ui:sceneChanged';
|
||||
// 玩法专属事件
|
||||
E.TILES_DEALT = 'mahjong:tilesDealt';
|
||||
E.MELD_FORMED = 'mahjong:meldFormed';
|
||||
// ...本子游戏用到的全部事件
|
||||
})();
|
||||
```
|
||||
|
||||
> 这正是本仓库的落点：框架 `EventBus` 不预置任何事件常量、保持纯粹中立，所有事件（含通用语义）都由子游戏在其事件常量文件定义——既保证框架可被任意玩法复用，也避免「引用了未定义常量」导致的 `emit(undefined)`（见 05「框架中立」）。
|
||||
|
||||
### 用法
|
||||
|
||||
```js
|
||||
EventBus.emit(EventBus.Events.GAME_STARTED, { playerCount: 4 }); // 发布
|
||||
this.addEventListener(EventBus.Events.GAME_STARTED, function (d) { // 订阅（组件内）
|
||||
self._onStart(d);
|
||||
});
|
||||
EventBus.once(EventBus.Events.GAME_FINISHED, fn); // 一次性
|
||||
```
|
||||
|
||||
组件内**务必用 `BaseComponent.addEventListener`** 订阅（`destroy` 自动清理，见 02），不要裸用 `EventBus.on`。
|
||||
|
||||
---
|
||||
|
||||
## 2. 动画：AnimationManager + 配置
|
||||
|
||||
### 数据优先、表现延后（核心节奏）
|
||||
|
||||
收到服务端推送后的固定节奏：
|
||||
|
||||
```
|
||||
1) 先更新数据模型（不动 UI）
|
||||
2) 播放动画（纯视觉过渡，不改数据）
|
||||
3) 动画完成回调里刷新静态界面
|
||||
```
|
||||
|
||||
好处：动画是“锦上添花”，**即使不播动画，静态界面也始终正确**（重画函数据本地数据即可还原，见 04 重连）。**动画期间绝不修改游戏数据。**
|
||||
|
||||
### AnimationManager API（框架，通用）
|
||||
|
||||
```js
|
||||
AnimationManager.move(id, fromX, fromY, toX, toY, duration, 'easeOut', cb);
|
||||
AnimationManager.scale(id, 1.0, 1.3, 150, 'easeOut', cb);
|
||||
AnimationManager.rotate(id, 0, 360, 300, 'linear', cb);
|
||||
AnimationManager.fade(id, 1.0, 0.0, 200, 'linear', cb);
|
||||
AnimationManager.frame(id, startFrame, endFrame, duration, { loop:false, callback:cb });
|
||||
|
||||
// 串/并行队列
|
||||
var q = AnimationManager.createQueue('serial'); // 或 'parallel'
|
||||
AnimationManager.addToQueue(q, { type:'move', spriteId:id, /* ... */ });
|
||||
AnimationManager.playQueue(q, cb);
|
||||
```
|
||||
|
||||
缓动可选：`linear/easeIn/easeOut(最常用)/easeInOut/bounce/elastic`。
|
||||
|
||||
### 动画参数集中配置（子游戏）
|
||||
|
||||
**所有动画时长/帧区间/帧间隔/循环模式集中在子游戏的动画配置文件**，做到“配置即改、不改代码”。业务代码从配置读取，**禁止硬编码时长/帧数**。
|
||||
|
||||
```js
|
||||
// 动画配置（子游戏）：一个动作一份配置
|
||||
SOME_ACTION: { PLAY_TYPE:'frame', RESOURCE_ID:554, START_FRAME:1, END_FRAME:35,
|
||||
FRAME_INTERVAL:50, LOOP:false, HIDE_ON_COMPLETE:true }
|
||||
|
||||
// 使用：用工具方法从配置自动算帧数/时长，再交给框架播放
|
||||
AnimationManager.frame(spriteId, opt.startFrame, opt.endFrame, opt.duration, opt);
|
||||
```
|
||||
|
||||
### 框架动画 vs 游戏动画分层
|
||||
|
||||
- **`AnimationManager`（框架）**：通用的 move/scale/fade/frame/队列，不懂具体玩法元素。
|
||||
- **游戏动画封装（子游戏）**：玩法专属封装——算各元素坐标、组织分段动画、从动画配置取参数。
|
||||
|
||||
业务调游戏动画封装的语义化方法，由它再去调 `AnimationManager`。
|
||||
|
||||
---
|
||||
|
||||
## 3. 音频：AudioManager + 资源 + 游戏音频管理
|
||||
|
||||
三层分离，**框架不含任何玩法专属的音效 ID 映射**：
|
||||
|
||||
```
|
||||
业务代码
|
||||
└─ 游戏音频管理（子游戏：概念→键名，如 'peng'/牌值→资源键）
|
||||
├─ 音效资源常量（子游戏：键名→文件 ID）
|
||||
└─ AudioManager（框架：通用播放、按性别选语音）
|
||||
└─ Utl（引擎播放）
|
||||
```
|
||||
|
||||
### 各层职责
|
||||
|
||||
- **`AudioManager`（框架）**：`playSound(file)`、`playVoice(baseId, sex)`、`playVoiceBySeat(seat, baseId)`、`playMusic/stopMusic`。约定女音 ID = 男音 ID + 偏移；**不含任何牌值/动作映射**。
|
||||
- **音效资源常量（子游戏）**：集中定义音效/语音文件 ID（音效、男/女语音等分类）。新增音效**只改这里**。
|
||||
- **游戏音频管理（子游戏）**：把“出牌/碰/某张牌”等概念映射到音效资源键，再调 `AudioManager`。**不写文件名/数字 ID**。
|
||||
|
||||
```js
|
||||
// 子游戏音频管理：按概念播放，内部映射到资源键并按座位性别选男/女语音
|
||||
// 通用音效直接走框架：AudioManager.playSound(音效资源常量.某音效)
|
||||
```
|
||||
|
||||
**声音文件手动准备**：音频文件由开发者**手动**按平台命名规范放入资源目录（文件名/存放目录/ID→文件名转换规则以《[友乐…规范](../../../docs/important/client/友乐游戏引擎精灵与资源管理接口规范.md)》为准），代码只按 ID 引用、不生成文件。因此**音效资源常量每个 ID 必须注明【类型（背景音乐 / 音效 / 语音）+ 用途 + 时长 + 播放方式（循环 / 单次）】**，让人据注释就能准确准备对应音频。
|
||||
|
||||
**DO**：新音效只改音效资源常量；业务只调游戏音频管理。**DON'T**：在游戏音频管理里写裸文件名/ID；硬编码性别映射。
|
||||
|
||||
---
|
||||
|
||||
## 4. Spine：骨骼动画
|
||||
|
||||
Spine 用于复杂特效动画（吃碰杠胡的炫光等），集成进 gameabc 绘制循环，零侵入主循环。
|
||||
|
||||
### 三层
|
||||
|
||||
| 层 | 归属 | 职责 |
|
||||
|----|------|------|
|
||||
| 框架 | `spine/SpineMgr.js` | 加载/播放/每帧更新绘制、回调转发 |
|
||||
| 子游戏配置 | Spine 动作配置 | 概念→Spine 资源（文件 + 动画名）映射 |
|
||||
| 子游戏分发 | Spine 回调分发 | 集中接收 Spine 回调并按模块分发 |
|
||||
|
||||
### 用法
|
||||
|
||||
```js
|
||||
// Spine 动作配置（子游戏）：概念 → 资源
|
||||
'chi': { spineId:'chi', animName:'play', scale:1.0 },
|
||||
'tianhu': { spineId:'tianhu', animName:'play', scale:1.0 },
|
||||
|
||||
// 播放（SpineMgr）
|
||||
SpineMgr.load(id, jsonFile, atlasFile, { scale:1.0, animation:'idle', loop:true });
|
||||
SpineMgr.setAnimation(id, 'play', false, 0);
|
||||
SpineMgr.playOnce(id, 'play', 0); // 播一次后隐藏
|
||||
SpineMgr.playQueue(id, ['p1','p2'], true);
|
||||
SpineMgr.updateAndDraw(ctx); // 每帧（引擎循环内自动）
|
||||
```
|
||||
|
||||
### 回调集中分发
|
||||
|
||||
`SpineMgr` 把动画完成/帧事件转发到全局 `gameabc_face.spine_onComplete/spine_onEvent`，由子游戏的 **Spine 回调分发器统一分发**到各模块，不要在业务里散接回调。
|
||||
|
||||
### 资源手动制作与变更流程
|
||||
|
||||
Spine 骨骼资源（`json` / `atlas` / 贴图）由开发者**手动**制作并放入资源目录，代码只按概念引用、不生成资源。改了 Spine 动作配置的资源映射后，**运行 Spine 数据构建脚本**重新生成 Spine 数据清单（`generated/spine_*`）。
|
||||
|
||||
**Spine 动作配置每个动作必须注明【概念（对应哪个玩法动作）+ 资源文件 + 动画名 + `scale` 等参数】**，让人据注释就能准确准备对应 Spine 资源。
|
||||
|
||||
**DO**：概念走 Spine 动作配置、回调走 Spine 回调分发器、改资源后跑构建脚本。**DON'T**：硬编码 `spineId/animName`；绕过分发器直接接回调。
|
||||
|
||||
---
|
||||
|
||||
## 5. 本篇 DO / DON'T 总表
|
||||
|
||||
| 系统 | DO ✅ | DON'T ❌ |
|
||||
|------|------|---------|
|
||||
| 事件 | 名字进 `EventBus.Events`；专属事件放子游戏事件常量文件 | 硬编码事件字符串；往框架塞玩法事件 |
|
||||
| 动画 | 先改数据→播动画→回调刷 UI；参数取自动画配置 | 动画期改数据；硬编码时长/帧数 |
|
||||
| 音频 | 新音效只改音效资源常量；业务只调游戏音频管理 | 游戏音频管理写裸 ID；框架含玩法映射 |
|
||||
| Spine | 概念走 Spine 动作配置，回调走 Spine 回调分发器，改资源跑脚本 | 硬编码 spineId/animName；散接回调 |
|
||||
|
||||
下一篇 [04-网络对接与启动编排](./04-网络对接与启动编排.md) 讲：怎么收发包、新旧架构如何对接、一局怎么启动。
|
||||
</content>
|
||||
@@ -0,0 +1,171 @@
|
||||
# 04 · 网络对接与启动编排
|
||||
|
||||
本篇讲**前端怎么和服务端打通、一局怎么启动**：发包链路、收包分发、新旧架构的对接边界、成败判定、启动顺序与 controllers/managers 的职责。
|
||||
|
||||
> **想看前后端端到端全链路**（一个包从前端出发 → 服务端三层路由/handler → 推回前端分发的完整往返、及各步在谁的哪个文件）见服务端 [`server/docs/development-guide/03 §6`](../../../server/docs/development-guide/03-数据收发与通信协议.md#6-端到端收发全链路前后端对照)。本篇聚焦**前端这一侧**的收发细节。
|
||||
|
||||
---
|
||||
|
||||
## 1. 发包：语义化发包封装 → RpcHelper
|
||||
|
||||
前端发起操作时**不直接拼包**，走两层封装：
|
||||
|
||||
```
|
||||
业务/控制器
|
||||
└─ 语义化发包封装（子游戏：一个操作一个语义化方法）
|
||||
└─ RpcHelper（框架基座：自动注入平台字段，调引擎发送）
|
||||
└─ Utl.sendData(app, route, rpc, data)
|
||||
```
|
||||
|
||||
### RpcHelper（自动注入平台字段）
|
||||
|
||||
`RpcHelper` 把每个请求自动补齐平台必需字段，业务只传业务数据：
|
||||
|
||||
```js
|
||||
// 自动注入：agentid / gameid / playerid / roomcode / seat ...
|
||||
RpcHelper.sendGameRpc(rpc, gameData, options); // route = "room"/子游戏路由
|
||||
```
|
||||
|
||||
### 语义化发包封装（子游戏）
|
||||
|
||||
子游戏为每个操作暴露一个语义化发包方法，内部补 `seat/roomcode` 等业务字段后经 `RpcHelper` 发送；业务侧只调这些语义化方法，不关心平台字段。
|
||||
|
||||
**DO**：发包一律走语义化发包封装 / `RpcHelper`。**DON'T**：在业务里直接 `Utl.sendData` 手拼包、漏注入平台字段。
|
||||
|
||||
> 平台字段缺失（如 `playerid` 为 0/空）应 fail-fast 暴露，不静默发出残缺包。
|
||||
|
||||
---
|
||||
|
||||
## 2. 收包：统一分发
|
||||
|
||||
服务端的主动推送统一格式 `{ rpc, data }`，前端有**唯一收包入口**，再按 `rpc` 分发到对应处理器。收包分发器是**纯路由表 + 分发器**：
|
||||
|
||||
```js
|
||||
// 纯路由表 + 分发器：一 rpc 一处理器
|
||||
var _handlers = {
|
||||
'someRpc': function (d) { return someHandler.handleSomeRpc(d); },
|
||||
'anotherRpc': function (d) { return anotherHandler.handleAnother(d); },
|
||||
'error': function (d) { console.error('[dispatch]', d.message); }
|
||||
// ...每个 rpc 一条
|
||||
};
|
||||
|
||||
function dispatch(msg) { // msg = { rpc, data }
|
||||
var h = _handlers[msg.rpc];
|
||||
if (h) { h(msg.data); }
|
||||
else { console.warn('[dispatch] 未处理的 rpc:', msg.rpc); }
|
||||
}
|
||||
```
|
||||
|
||||
**新增一种服务端推送** = 在路由表加一条 `rpc → 处理器` + 在对应处理器里写业务。**收包分发器只分发，不写业务逻辑。**
|
||||
|
||||
---
|
||||
|
||||
## 3. 新旧架构对接边界
|
||||
|
||||
平台事件先进旧的受限入口 `Game_Modify.*`，旧入口**只解包、只转交**，把数据委托给新架构：
|
||||
|
||||
| 平台入口（受限文件，尽量不改） | 转交到（新架构） | 作用 |
|
||||
|--------------------------------|------------------|------|
|
||||
| `Game_Modify.appStart()` | 启动编排 | 启动初始化 |
|
||||
| `Game_Modify.StartWar(_msg)` | 开局处理 | 开局 |
|
||||
| `Game_Modify._ReceiveData(_msg)` | 收包分发 | 对局推送分发 |
|
||||
| `Game_Modify.Reconnect(info)` | 重连处理 | 断线重连/重画 |
|
||||
|
||||
### 开局解包要点（StartWar）
|
||||
|
||||
服务端 `makewar` 常用**差异化下发**（`sendtype:1` + `seatlist[]`）。`StartWar` 先按本座位取出自己的数据，再交给新架构的开局处理：
|
||||
|
||||
```js
|
||||
Game_Modify.StartWar = function (_msg) {
|
||||
var raw = _msg.data.deskwar || _msg.data;
|
||||
var gameData = raw;
|
||||
if (raw && raw.sendtype === 1 && Array.isArray(raw.seatlist)) {
|
||||
for (var i = 0; i < raw.seatlist.length; i++) {
|
||||
if (raw.seatlist[i].seat === C_Player.seat) { gameData = raw.seatlist[i].data; break; }
|
||||
}
|
||||
}
|
||||
// 委托新架构的开局处理，受限入口本身不写业务
|
||||
};
|
||||
```
|
||||
|
||||
### 重连（Reconnect）= 重画
|
||||
|
||||
重连入口拿到服务端 `get_deskinfo` 的完整快照，交由新架构的重连处理**据本地数据重建整个界面**。重连与“切 app 重画”应复用同一条重画路径——**任何时候执行重画函数都能还原正确界面**（如网页刷新）。这与「数据优先、表现延后」一脉相承：界面永远能从数据无歧义地重建。
|
||||
|
||||
**红线**：受限文件 `Game_Modify.*` 里**只接不写**，业务逻辑全部在新架构 handler 中。
|
||||
|
||||
---
|
||||
|
||||
## 4. 成败判定：只认 `data.success`
|
||||
|
||||
> 与服务端 [`server/docs/development-guide/03`](../../../server/docs/development-guide/03-数据收发与通信协议.md) 同一条协议。
|
||||
|
||||
前端 RPC 没有“同步返回”，操作结果由服务端**后续主动推送**告知。判成败的唯一权威是推送 `data` 里的 **`success`**：
|
||||
|
||||
```js
|
||||
// 处理器统一写法
|
||||
function handleXxx(data) {
|
||||
if (!data || !data.success) { /* 失败处理 */ return; }
|
||||
// 成功逻辑
|
||||
}
|
||||
```
|
||||
|
||||
- **只认 `data.success`**，不用 `status`/`code` 判成败，不写 `status` 兼容兜底。
|
||||
- 个别综合推送的 success 在**嵌套字段**（如 `gameSettleComplete` 的 `data.gameSettle.success`）——按该推送的契约取对应位置，仍以 `success` 语义为准，不改用 status。
|
||||
|
||||
---
|
||||
|
||||
## 5. 启动编排
|
||||
|
||||
一局前端的启动由一段**启动编排**一次性完成（经 `Game_Modify.appStart` 触发）：
|
||||
|
||||
```
|
||||
启动编排
|
||||
1) 检查依赖 检查 EventBus/SpriteManager/UIManager/各 View 就绪
|
||||
2) 初始化系统 SpriteManager.init / AnimationManager.init / UIManager.init
|
||||
3) 注册视图 创建并注册各 View 到 UIManager
|
||||
4) 标记初始化完成
|
||||
```
|
||||
|
||||
启动后即等待平台事件：`StartWar` 开局、`_ReceiveData` 推送、`Reconnect` 重连，分别转交新架构。
|
||||
|
||||
---
|
||||
|
||||
## 6. controllers 与 managers 职责
|
||||
|
||||
| 类别 | 角色 | 典型成员 |
|
||||
|------|------|----------|
|
||||
| **controllers**（处理器） | 接收网络消息 → 改数据/UI → 必要时 `emit` 事件 | 按消息类型分工的处理器（流程、操作、结算、特殊规则等） |
|
||||
| **managers**（资源/状态） | 管资源与跨模块能力 | 音频、Spine 回调分发、玩法标记、特效管理等 |
|
||||
|
||||
> 精灵交互事件**不属于**子游戏 controllers：它由框架 `gameabc-framework/system/SpriteEventController.js` 统一分发。子游戏在组件 `init` 里用 `SpriteEventController.registerMouseDown/registerMouseUp/registerMouseMove/...` 注册按精灵 ID 的回调；需对每个绘制精灵统一处理的能力用 `registerGlobalDraw` 注册全局 draw 钩子。平台入口 `Game_Modify.utlmousedown/mouseup/...` 只把事件转调给它。
|
||||
|
||||
调用链示例：
|
||||
|
||||
```
|
||||
平台 _ReceiveData(_msg)
|
||||
→ 收包分发(_msg)
|
||||
→ 操作处理器(data)
|
||||
├ 改数据模型
|
||||
├ 播动画（经游戏动画封装）
|
||||
├ 动画回调里刷新静态界面
|
||||
└ 播音效（经游戏音频管理）
|
||||
```
|
||||
|
||||
**红线**：业务逻辑放 controllers/managers，**不**写进受限的 `Game_Modify.*`；处理器只处理自己那类消息，需要别的能力调对应 manager，不重造。
|
||||
|
||||
---
|
||||
|
||||
## 7. 本篇 DO / DON'T
|
||||
|
||||
| DO ✅ | DON'T ❌ |
|
||||
|------|---------|
|
||||
| 发包走语义化发包封装/`RpcHelper` | 业务里直接 `Utl.sendData` 手拼包 |
|
||||
| 收包统一进收包分发器，一 rpc 一处理器 | 在 `Game_Modify.*` 或散点里直接处理推送 |
|
||||
| 受限入口只解包转交，业务在新架构 handler | 在受限文件堆业务逻辑 |
|
||||
| 成败只认 `data.success` | 用 `status`/`code` 判成败、写 status 兜底 |
|
||||
| 重连/重画复用同一路径，据数据重建界面 | 重连单写一套与正常对局不同的渲染 |
|
||||
| 业务在 controllers/managers，各司其职 | 处理器交叉重造别人的能力 |
|
||||
|
||||
下一篇 [05-开发规范与红线](./05-开发规范与红线.md) 汇总前端所有工程纪律。
|
||||
</content>
|
||||
@@ -0,0 +1,130 @@
|
||||
# 05 · 开发规范与红线
|
||||
|
||||
本篇汇总前端**必须遵守**的工程纪律，是代码审查清单的来源。改任何代码前按相关条目自检。前面 01–04 是“怎么做”，本篇是“不许怎么做 / 必须怎么做”。
|
||||
|
||||
---
|
||||
|
||||
## 1. 可编辑范围
|
||||
|
||||
| 区域 | 可改性 |
|
||||
|------|--------|
|
||||
| `js/vendor/`、`js/00_Surface/` | **禁改**（第三方/平台代码） |
|
||||
| `01_SubGame/00_SubGame_Config.js` | **仅可改值**：只给**已有** `Game_Config.*` 配置项赋值；**禁止**新增/删除/改名/改结构定义（三文件中唯一子游戏可碰者，且仅限改值）。详见 [06](./06-子游戏接入模式与Hooks外置.md) |
|
||||
| `01_SubGame/01_SubGame_modify.js` | **受限**：仅顶部「配置区」填值（`Type_*/CreateRoomData/combat/game_config/roomDes`）；转发壳/平台接口**不碰、不新增**，业务走子游戏实现层。详见 06 |
|
||||
| `01_SubGame/02_SubGame_Input.js` | **不碰**：框架维护的平台接口骨架/转发壳，不改、不新增接口、不写业务。详见 06 |
|
||||
| `js/gameabc-framework/` | 可改，但须保持**游戏中立**（见 §3） |
|
||||
| `01_SubGame/codes/`（除 `shared/`） | 子游戏自由开发区 |
|
||||
| `01_SubGame/codes/shared/` | **只读**：服务端 `shared/` 的同步副本，改服务端权威源再同步（见 §7） |
|
||||
|
||||
新增前后端交互一律走服务端 `mod.js` 的 `rpc` 机制 + 前端统一发包/收包封装，**不在受限文件新增接口**。
|
||||
|
||||
---
|
||||
|
||||
## 2. 语言标准：严格 ES5
|
||||
|
||||
- 用 `var`/`function`；对象继承用 `Object.create(Base)` + 在 `init` 内重声明实例属性。
|
||||
- **禁** `let`/`const`、箭头函数、模板字符串、解构、默认参数、展开、`class`、`for...of`。
|
||||
- 跨文件按**全局名**引用（各文件 `var X = ...` 暴露全局，`index.html` 顺序加载）；新增文件必须在 `index.html` 插到依赖之后、使用者之前。
|
||||
|
||||
---
|
||||
|
||||
## 3. 框架游戏中立
|
||||
|
||||
`gameabc-framework/` 是给**任意子游戏**复用的通用框架，**不得**渗入任何具体玩法：
|
||||
|
||||
- **禁止**在框架内出现玩法逻辑、玩法专属常量（牌型、动作、玩法事件名等）。
|
||||
- 玩法专属内容一律定义在**子游戏侧**：
|
||||
- 玩法事件 → 子游戏事件常量文件，追加到 `EventBus.Events`；
|
||||
- 音效映射 → 子游戏音效资源常量 + 游戏音频管理；
|
||||
- Spine 动作 → 子游戏 Spine 动作配置；
|
||||
- 资源/布局 → 子游戏精灵结构/图片资源/布局常量。
|
||||
- **违例信号**：框架文件里出现 `mahjong:`、牌型、吃碰杠胡等具体玩法字样（注释举例除外，且举例应尽量中立）。
|
||||
|
||||
> 范例：本仓库把框架 `EventBus.js` 内**所有**预定义事件常量清空（只留空容器 `EventBus.Events={}`），全部事件（通用语义 + 玩法专属）改由子游戏的事件常量文件定义；并把通用的精灵事件控制器从子游戏抽到框架 `system/SpriteEventController.js`、剥离其中的玩法标记耦合为「全局 draw 钩子」；把 `UIManager` 的全局 UI（Loading/Message/Confirm）从「主动读子游戏精灵常量」改为「由子游戏 `init(config)` 注入」。新玩法照此扩展，框架零改动。
|
||||
|
||||
---
|
||||
|
||||
## 4. 渲染与常量
|
||||
|
||||
- **精灵只走 `SpriteManager`**：UI 代码禁止直接调 `GameABCUtils`/引擎原生 API。
|
||||
- **ID 守范围**：精灵 1001–3000、群组 ≥201、普通图层 101–200、弹窗图层 301–400（另有 501–600、701+ 备用段）；框架保留 1–1000 及 3001+（精灵）等交替段，不可占用；ID 必须与编辑器一致，不编造。
|
||||
- **检查返回值**：`SpriteManager.*` 返回 `false` 即 ID/范围有误，及时暴露。
|
||||
- **常量集中、禁硬编码**：精灵 ID / 图片资源 ID / 坐标尺寸 / 动画时长帧数 / 音效 ID / 事件名，一律定义在对应常量文件，业务代码只引用：
|
||||
- 精灵结构 → 精灵结构常量（主界面/弹窗分文件）
|
||||
- 图片资源 → 图片资源常量
|
||||
- 布局坐标 → 布局常量
|
||||
- 动画参数 → 动画配置
|
||||
- 音效 ID → 音效资源常量
|
||||
- 事件名 → `EventBus.Events`（专属在子游戏事件常量文件）
|
||||
- 整合入口 → 精灵常量整合入口（**最后加载**）
|
||||
|
||||
---
|
||||
|
||||
## 5. UI 组件生命周期与内存安全
|
||||
|
||||
- **组件继承 `BaseComponent`**，在 `init` 内重声明实例属性、建精灵、注册事件。
|
||||
- **事件用 `this.addEventListener`** 订阅（`destroy()` 自动 `off`），**禁**裸 `EventBus.on`（会泄漏）。
|
||||
- **销毁用 `destroy()`** 而非只 `hide()`；在 `onDestroy` 清理**定时器、动态复制精灵、Spine 回调登记**。
|
||||
- 动态列表用 `DynamicSpriteList` 并在销毁时 `list.destroy()`，避免复制精灵残留。
|
||||
|
||||
---
|
||||
|
||||
## 6. 数据优先、表现延后
|
||||
|
||||
- 收到推送的固定节奏：**先改数据模型 → 再播动画 → 动画回调里刷新静态界面**；动画期间**不改数据**。
|
||||
- **重画函数**据本地数据可随时重建正确界面（如网页刷新）；断线重连与切 app 复用同一重画路径，不为重连单写一套渲染。
|
||||
- 开发阶段可**先不做动画**，只保证静态界面正确；动画作为后续叠加，不影响界面正确性。
|
||||
|
||||
---
|
||||
|
||||
## 7. 成败标志与收发包
|
||||
|
||||
- **成败只认 `data.success`**：`if (!data.success)` 判失败；**禁**用 `status`/`code` 判成败、**禁** `status` 兼容兜底。个别嵌套场景按该推送契约取 `success` 所在字段，语义不变。
|
||||
- **发包走语义化发包封装/`RpcHelper`**（自动注入平台字段），**收包统一分发**（一 rpc 一处理器）。
|
||||
- 业务逻辑放 controllers/managers，**不**写进受限 `Game_Modify.*`。
|
||||
|
||||
---
|
||||
|
||||
## 8. shared 同步
|
||||
|
||||
- **`shared/` 是子游戏自己的游戏逻辑，与平台无关**：存放本玩法**前后端必须算出完全一致**的纯逻辑（胡牌/听牌/比精/牌型/计分/规则常量等），前端用于即时表现与预校验，服务端做权威裁定。它不是平台代码，平台既不提供也不感知。
|
||||
- `01_SubGame/codes/shared/` 是服务端 `server/<游戏容器目录>/<游戏>/shared/` 的**同步副本**，前端**只读**（脚本生成）。
|
||||
- 改共享算法只改服务端权威源，再运行同步脚本覆盖前端副本；**禁止直接编辑前端 `codes/shared/`**。
|
||||
- 逻辑同源不改变数据权威：前端 `shared/` 算的是表现/预判，最终以服务端为准（数据优先、表现延后，见 §6）。详见服务端 [`server/docs/development-guide/04 §8`](../../../server/docs/development-guide/04-开发规范与红线.md#8-shared-文件同步流程)。
|
||||
|
||||
---
|
||||
|
||||
## 9. 模块职责边界
|
||||
|
||||
- 一个职能只在一个模块实现，其他模块**调用而非重造**：渲染找 `SpriteManager`、动画找 `AnimationManager`（及游戏动画封装）、音频找游戏音频管理、Spine 找 `SpineMgr`（及 Spine 回调分发）、发包找语义化发包封装、收包分发找收包分发器。
|
||||
- 写代码前先问“这段属于谁的职责”，属于别人就调用它，不在本模块复制一份近似实现。
|
||||
|
||||
---
|
||||
|
||||
## 10. 测试纪律
|
||||
|
||||
- 测试用于验证业务正确性；失败先**裁定根因归属**（业务缺陷 vs 测试脚本缺陷），禁止 skip/软化断言/吞异常掩盖。
|
||||
- 业务缺陷修业务并单独提交；脚本缺陷修置场并保持硬断言。
|
||||
- `shared/` 算法变更应在 Node 跑相应单测验证（前后端同源）。
|
||||
|
||||
---
|
||||
|
||||
## 11. 审查速查表
|
||||
|
||||
| 维度 | 红线 |
|
||||
|------|------|
|
||||
| 范围 | `vendor`/`00_Surface` 禁改；受限文件不新增接口；`shared` 只读 |
|
||||
| 语言 | 严格 ES5；新文件插对加载顺序 |
|
||||
| 框架中立 | 框架无玩法逻辑/专属常量；专属内容归子游戏 |
|
||||
| 渲染 | 只走 `SpriteManager`；ID 守范围、不编造；查返回值 |
|
||||
| 常量 | 精灵/资源/坐标/动画/音效/事件全集中，禁硬编码裸值 |
|
||||
| 组件 | 继承 `BaseComponent`；事件 `addEventListener`；`destroy` 清动态精灵/定时器 |
|
||||
| 节奏 | 先数据后表现；重画可随时还原界面 |
|
||||
| 成败 | 只认 `data.success`，禁 `status` 兜底 |
|
||||
| 收发包 | 发走语义化发包封装、收走收包分发器；业务不进 `Game_Modify` |
|
||||
| 职责 | 一职能一模块，调用不重造 |
|
||||
|
||||
---
|
||||
|
||||
至此，从架构与环境（01）、渲染与组件（02）、表现系统（03）、网络与启动（04）到工程红线（05），构成一套完整的前端子游戏开发指导。回到 [README](./README.md) 查看导航与分层模型。
|
||||
</content>
|
||||
@@ -0,0 +1,301 @@
|
||||
# 06 · 子游戏接入模式与 Hooks 外置
|
||||
|
||||
> 权威设计来源：`docs/superpowers/specs/2026-06-30-子游戏接入Hooks外置模式-design.md`。
|
||||
> 本篇面向"要接入新游戏或将老游戏迁移到 Hooks 外置模式"的开发者。
|
||||
|
||||
---
|
||||
|
||||
## 1. 两种接入模式
|
||||
|
||||
平台通过三个**契约文件**调用子游戏：
|
||||
|
||||
- `client/js/01_SubGame/00_SubGame_Config.js` —— `Game_Config.*` 配置项
|
||||
- `client/js/01_SubGame/01_SubGame_modify.js` —— `Game_Modify.*` 部分接口与战绩系统
|
||||
- `client/js/01_SubGame/02_SubGame_Input.js` —— `gameHallImport.*` 与 `Game_Modify.*` 大部分接口
|
||||
|
||||
平台运行时**只按固定全局名调用**这些接口，对实现在哪里、怎么组织毫不关心。子游戏有两种方式实现这些接口：
|
||||
|
||||
| 维度 | 内联模式（老） | Hooks 外置模式（新） |
|
||||
|------|---------------|---------------------|
|
||||
| 三文件内容 | 配置值 + 业务逻辑全部写在三文件内 | 三文件是纯转发壳，仅查 hook 并委托 |
|
||||
| 业务逻辑位置 | 直接在 `01_/02_SubGame_*.js` 里 | `codes/SubGameHooks.js` + 子游戏实现层 |
|
||||
| `SubGameHooks` | 不定义 | 子游戏填充，与平台接口一一对应 |
|
||||
| 模板可复用性 | 低（新游戏要删改前任代码） | 高（三文件原样复用，只填 hook） |
|
||||
| 平台视角 | 调全局接口直接得到实现 | 调全局接口 → 转发壳 → hook |
|
||||
| 适用时机 | 已有存量代码，维持现状 | 新游戏接入、或老游戏迁移 |
|
||||
|
||||
**二选一，不混用**：一个游戏的代码库要么是「实心三文件」，要么是「转发壳三文件 + SubGameHooks」。同一接口不允许两处实现。这是**工程级选择**，平台运行期无需任何开关——转发壳的 `if (SubGameHooks.X)` 仅是实现存在性探测，不是模式判断。
|
||||
|
||||
> 现有麻将游戏使用内联模式，**本次不迁移**，三文件原样不动。
|
||||
|
||||
### 三文件可改性总表（硬规则）
|
||||
|
||||
这三个文件是**平台契约**，可改性严格受限：
|
||||
|
||||
| 文件 | 子游戏可否改 | 允许 | 禁止 |
|
||||
|------|-------------|------|------|
|
||||
| `00_SubGame_Config.js` | ✅ **仅可改值** | 给**已有** `Game_Config.*` 配置项赋本游戏需要的值 | 新增 / 删除 / 改名配置项；改变项的结构或类型；删除平台定义 |
|
||||
| `01_SubGame_modify.js` | ⚠️ **仅配置区填值，转发壳不碰** | 仅在顶部「配置区」给 `Type_1/Type_2/CreateRoomData/combat/game_config/roomDes` 赋值 | 改任何转发壳；新增接口；写业务逻辑 |
|
||||
| `02_SubGame_Input.js` | ❌ **完全不碰** | —— | 改任何转发壳；新增接口；写任何代码 |
|
||||
|
||||
子游戏的**一切业务实现**都在 `codes/SubGameHooks.js` + `codes/` 实现层，**不进这三个文件**；新增前后端交互走 `SubGameHooks` + 服务端 `mod.js` 的 rpc，**不在三文件加接口**。
|
||||
|
||||
### `00_SubGame_Config.js` —— 只改值，不改定义
|
||||
|
||||
`00` 是平台配置项的**结构定义**文件，配置项的**集合与结构由平台/框架固定**。子游戏接入只做一件事：**把已有配置项的值改成本游戏需要的**。
|
||||
|
||||
✅ **允许（改值）**：
|
||||
```js
|
||||
Game_Config.Max.PlayerCnt = 4; // 改人数
|
||||
Game_Config.Share.title = "进贤麻将"; // 改分享标题
|
||||
Game_Config.Info.TextContent = ["你好","谢谢","快点","不要","加油","收到","稍等"]; // 改常用语的【值】
|
||||
Game_Config.Chat.ChatLoc = [[35,517],[1100,315]/* ... */]; // 改聊天气泡坐标【值】
|
||||
```
|
||||
|
||||
❌ **禁止（改定义 / 结构）**：
|
||||
```js
|
||||
Game_Config.Info.MyNewField = 1; // ✗ 新增配置项（增定义）
|
||||
delete Game_Config.Voice; // ✗ 删除配置项（删定义）
|
||||
Game_Config.Max = [4]; // ✗ 改变项的类型/结构
|
||||
// ✗ 重命名平台已定义的字段（如把 PlayerCnt 改成 playerCount）
|
||||
```
|
||||
|
||||
> **为什么**：平台代码（`00_Surface/*`）按**固定字段名**读取 `Game_Config.*`。增 / 删 / 改名定义会让平台读到 `undefined` 或破坏约定，引发线上故障。**配置项的集合与结构是平台契约，只有「值」属于子游戏**。
|
||||
>
|
||||
> 对数组类配置项（如 `TextContent`、`ChatLoc`、`isLeft`），改其中元素值属「改值」（允许）；但若平台对该数组**长度/索引语义有约定**（如固定 5 个聊天气泡位置、按座位索引），改变长度需以平台读取约定为准，不可随意增删。
|
||||
|
||||
---
|
||||
|
||||
## 2. 三层架构
|
||||
|
||||
Hooks 外置模式下，职责分为三层，单向向下：
|
||||
|
||||
```
|
||||
平台契约层（框架维护，子游戏不碰）
|
||||
00_SubGame_Config.js 平台配置项结构 + 子游戏填【配置值】
|
||||
01_SubGame_modify.js 平台接口骨架，每个接口是固定【转发壳】
|
||||
02_SubGame_Input.js 平台接口骨架，每个接口是固定【转发壳】
|
||||
|
|
||||
| 转发壳查 SubGameHooks.X，存在则委托，不存在则平台默认(B类)/空操作(A类)
|
||||
v
|
||||
子游戏入口层（codes/，Hooks 外置新方案核心）
|
||||
SubGameHooks{} 全局对象，接口名与平台接口一一对应；子游戏只填需要的
|
||||
|
|
||||
| SubGameHooks.StartWar = function(_msg){ /* 委托子游戏的开局处理 */ };
|
||||
v
|
||||
子游戏实现层（codes/，已有）
|
||||
各消息处理器 / 收发包 / 战绩等业务模块 / UIManager 扩展 ...
|
||||
```
|
||||
|
||||
**数据流**：平台调 `Game_Modify.X(args)` → 转发壳查 `SubGameHooks.X` → 存在则委托子游戏实现并返回其结果；不存在则执行平台默认（B 类）或空操作（A 类）。
|
||||
|
||||
**兼容性原因**：平台只认全局接口名，不关心实现在哪。老游戏不定义 `SubGameHooks`、三文件实心实现 → 照跑；新游戏用转发壳三文件 + `SubGameHooks` → 也跑。无需任何运行期判断。
|
||||
|
||||
---
|
||||
|
||||
## 3. 新游戏：使用模板接入
|
||||
|
||||
模板文件位于 `gameabc-framework/templates/subgame-entry/`，共四个文件：
|
||||
|
||||
| 文件 | 内容 | 谁维护 |
|
||||
|------|------|--------|
|
||||
| `00_SubGame_Config.template.js` | `Game_Config.*` 全部配置项结构 + 占位/默认值 | 框架维护 |
|
||||
| `01_SubGame_modify.template.js` | 01 段接口的转发壳 + 配置区占位 | 框架维护 |
|
||||
| `02_SubGame_Input.template.js` | `gameHallImport.*` + 02 段 `Game_Modify.*` 的转发壳 | 框架维护 |
|
||||
| `SubGameHooks.template.js` | 子游戏实现骨架，列出全部可填 hook，每个给空函数 + 用途注释 | 子游戏起点 |
|
||||
|
||||
### 接入步骤
|
||||
|
||||
1. **复制四个模板文件**到新游戏目录。
|
||||
2. **三个转发壳直接用，不改**：`00/01/02_SubGame_*.template.js` 复制后重命名，原样放入 `01_SubGame/`。
|
||||
3. **填充 SubGameHooks**：将 `SubGameHooks.template.js` 重命名为 `codes/SubGameHooks.js`，在其中实现本游戏需要的 hook（不需要的 hook 留空函数或删除，A 类无 hook 默认 no-op，B 类无 hook 返回平台默认值）。
|
||||
4. **index.html 加载**：按既有顺序在原 `00_/01_/02_SubGame_*.js` 的位置加载新三文件，并在 `codes/` 相应位置加载 `SubGameHooks.js`（在其所依赖的 controllers/handlers 之后）。
|
||||
|
||||
### index.html 加载顺序要点
|
||||
|
||||
- **阶段5**：先加载 `SubGameHooks` 所依赖的控制器/管理器/网络等实现模块。
|
||||
- **`SubGameHooks.js`**：在其依赖之后、三文件之前加载。
|
||||
- **阶段6**：最后加载受限对接层三文件（转发壳，引用 `SubGameHooks`）。
|
||||
|
||||
即：**依赖模块 → `SubGameHooks` → 三文件转发壳**，顺序即依赖，不可颠倒。
|
||||
|
||||
---
|
||||
|
||||
## 4. 转发壳范式
|
||||
|
||||
转发壳按「无 hook 时的默认行为」分三类，必须**逐一覆盖全部 63 个接口**（见 §6）。
|
||||
|
||||
### A 类 — 纯子游戏行为（无 hook 即 no-op）
|
||||
|
||||
无 `SubGameHooks.X` 时什么都不做，语义是「模板未实现该功能」。
|
||||
|
||||
```js
|
||||
// A 类：无 hook 则空操作
|
||||
Game_Modify.StartWar = function (_msg) {
|
||||
if (window.SubGameHooks && SubGameHooks.StartWar) {
|
||||
return SubGameHooks.StartWar(_msg);
|
||||
}
|
||||
};
|
||||
|
||||
Game_Modify.Reconnect = function (_msg) {
|
||||
if (window.SubGameHooks && SubGameHooks.Reconnect) {
|
||||
return SubGameHooks.Reconnect(_msg);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### B 类 — 有平台默认返回值（无 hook 即返回默认）
|
||||
|
||||
平台某些接口需要有意义的返回值，无 hook 时应给出合理默认，而非静默返回 `undefined`。
|
||||
|
||||
```js
|
||||
// B 类：无 hook 返回平台默认值
|
||||
Game_Modify.getMaxPlayerCount = function (roomtype) {
|
||||
if (window.SubGameHooks && SubGameHooks.getMaxPlayerCount) {
|
||||
return SubGameHooks.getMaxPlayerCount(roomtype);
|
||||
}
|
||||
return (Game_Config.Max && Game_Config.Max.PlayerCnt) || 4;
|
||||
};
|
||||
|
||||
Game_Modify.getLeaveLimit = function (roomtype) {
|
||||
if (window.SubGameHooks && SubGameHooks.getLeaveLimit) {
|
||||
return SubGameHooks.getLeaveLimit(roomtype);
|
||||
}
|
||||
return 10;
|
||||
};
|
||||
|
||||
gameHallImport.isInstalled = function () {
|
||||
if (window.SubGameHooks && SubGameHooks.isInstalled) {
|
||||
return SubGameHooks.isInstalled();
|
||||
}
|
||||
return 1;
|
||||
};
|
||||
```
|
||||
|
||||
### C 类 — 配置数据（不是 hook，留配置文件）
|
||||
|
||||
`Game_Config.*`（00 全部）与房型数据（`Game_Modify.Type_1/Type_2/CreateRoomData/game_config`、`Game_Modify.combat/roomDes`）属于**配置数据**而非行为接口，不进 `SubGameHooks`。
|
||||
|
||||
模板在 01 文件顶部设置「配置区」，由子游戏直接填值：
|
||||
|
||||
```js
|
||||
// 01_SubGame_modify.js 顶部：配置区（子游戏填值，与转发壳接口段物理分开）
|
||||
Game_Modify.combat = null; // 战绩配置，子游戏按需赋值
|
||||
Game_Modify.roomDes = ''; // 房间描述
|
||||
Game_Modify.Type_1 = []; // 房型一级选项
|
||||
Game_Modify.Type_2 = []; // 房型二级选项
|
||||
Game_Modify.CreateRoomData = []; // 创建房间数据
|
||||
Game_Modify.game_config = {}; // 游戏配置
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Hook 命名约定
|
||||
|
||||
`SubGameHooks` 的 hook 名**默认与平台接口名严格一致**。
|
||||
|
||||
**跨对象同名冲突**：`gameHallImport.*` 与 `Game_Modify.*` 各有一个 `appStart` 接口，两者同名。为避免 `SubGameHooks` 上的 key 冲突，规则如下：
|
||||
|
||||
| 平台接口 | SubGameHooks key | 说明 |
|
||||
|---------|-----------------|------|
|
||||
| `Game_Modify.appStart` | `SubGameHooks.appStart` | 保持同名 |
|
||||
| `gameHallImport.appStart` | `SubGameHooks.hallAppStart` | 加 `hall` 前缀驼峰 |
|
||||
|
||||
目前仅 `appStart` 存在此冲突。`gameHallImport` 侧所有同名接口均加 `hall` 前缀以区分。
|
||||
|
||||
```js
|
||||
// SubGameHooks.js 中的写法
|
||||
SubGameHooks.appStart = function () {
|
||||
// 对应 Game_Modify.appStart：委托子游戏的启动编排
|
||||
};
|
||||
|
||||
SubGameHooks.hallAppStart = function () {
|
||||
// 对应 gameHallImport.appStart（大厅启动）：委托子游戏的大厅初始化
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 接口覆盖要求
|
||||
|
||||
转发壳必须**逐个覆盖全部平台接口**，遗漏会导致新游戏某平台调用落空（静默失败）。接口分三组，总计 **63 个**：
|
||||
|
||||
| 来源 | 数量 | 说明 |
|
||||
|------|------|------|
|
||||
| `gameHallImport.*` | 9 | 大厅相关；其中 `appStart` 对应 `SubGameHooks.hallAppStart`（加 `hall` 前缀） |
|
||||
| `Game_Modify.*`（事件/交互，01 段） | 9 | 精灵事件类默认 no-op，改用框架 `SpriteEventController` |
|
||||
| `Game_Modify.*`（生命周期/回调，02 段） | 45 | 多为 A 类 no-op，少量 B 类需给平台默认返回值 |
|
||||
|
||||
覆盖原则：**A 类无 hook 即 no-op；B 类无 hook 须返回有意义的平台默认值**（如玩家数、离开上限、房间文案等），而非静默返回 `undefined`。各接口的具体分类与默认值以平台接入 spec 为权威，接入时逐一核对。
|
||||
|
||||
---
|
||||
|
||||
## 7. 大块实现外置范式
|
||||
|
||||
> 本节为**范式说明**，供新游戏接入时参考外置思路。
|
||||
|
||||
内联模式下，一段大块业务实现（如战绩列表/滚动/回放，往往数百行、还自带 `utlmousedown/move/up/drawbegin` 等精灵事件方法）整体写在契约文件里，会导致契约文件膨胀。新游戏接入时，大块业务实现应按以下三步外置：
|
||||
|
||||
1. **移到 `codes/`**：把整块实现移到 `codes/` 下对应目录（一个或多个模块文件），声明为全局对象并在 `index.html` 按依赖顺序加载。
|
||||
2. **经 `SubGameHooks` 接入平台接入点**：相关平台接口在 `SubGameHooks` 对应 hook 里委托给该模块，契约文件不出现业务实现。
|
||||
3. **精灵交互改用 `SpriteEventController`**：界面的精灵交互改用框架 `SpriteEventController` 按精灵 ID 注册回调，而非散落的 `utl*` 方法。
|
||||
|
||||
这样契约文件中只剩干净的配置区与转发壳，该块业务完全在 `codes/` 内自治。
|
||||
|
||||
---
|
||||
|
||||
## 8. 老游戏迁移步骤与验证
|
||||
|
||||
> 迁移是**单独立项**的改动，不与其他功能混在一次提交里。
|
||||
|
||||
### 迁移步骤
|
||||
|
||||
1. **替换接口段为转发壳**：用模板 `01/02_SubGame_*.template.js` 的转发壳替换三文件的接口实现段；保留 `Game_Config.*` 配置值和 `Game_Modify.combat/roomDes/Type_*` 配置数据不动。
|
||||
|
||||
2. **逐接口搬到 SubGameHooks**：为每一个原有接口实现在 `codes/SubGameHooks.js` 里创建对应 hook，将内联实现原样移入，逐接口**核对行为等价**。
|
||||
|
||||
3. **大块实现按 §7 外置**：战绩等大块逻辑移到 `codes/` 对应目录，通过 hook 接入平台接入点。
|
||||
|
||||
4. **验证**：
|
||||
- 全局接口名与签名不变（平台调用路径不变）。
|
||||
- 逐接口**黑盒对比**迁移前后行为，不能靠"看起来一样"，须可观测地验证（页面操作/日志/单测）。
|
||||
- 连跑多次无异常。
|
||||
|
||||
### 验证要点
|
||||
|
||||
| 验证项 | 方法 |
|
||||
|--------|------|
|
||||
| 接口不遗漏 | grep 对比三文件原定义与转发壳一一对应（63 个） |
|
||||
| 签名不变 | 检查平台调用处参数与转发壳参数列表一致 |
|
||||
| 行为等价 | 逐接口黑盒测试（开局/重连/战绩/离开等主流程） |
|
||||
| 配置值完整 | `Game_Config.*` 与配置区数据均已保留 |
|
||||
|
||||
---
|
||||
|
||||
## 9. 红线
|
||||
|
||||
使用 Hooks 外置模式时，必须严格遵守以下约束：
|
||||
|
||||
| 红线 | 说明 |
|
||||
|------|------|
|
||||
| **转发壳框架维护，子游戏不碰** | `01/02_SubGame_*.js` 转发壳由框架统一维护，子游戏不得直接修改转发壳内容 |
|
||||
| **00 只改值，不改定义** | `00_SubGame_Config.js` 只允许给**已有** `Game_Config.*` 配置项改值；**禁止**新增/删除/改名/改结构定义（平台按固定字段名读取，改定义会引发线上故障）。三文件中仅此文件子游戏可碰，且仅限改值 |
|
||||
| **01 仅配置区填值** | `01_SubGame_modify.js` 只允许在顶部「配置区」给 `Type_*/CreateRoomData/combat/game_config/roomDes` 赋值；转发壳一律不碰 |
|
||||
| **配置值留配置文件** | `Game_Config.*` 和配置区数据（`Type_1/2/CreateRoomData` 等）不得塞进 `SubGameHooks`，保留在对应配置位置 |
|
||||
| **hook 签名必须与平台接口一致** | 平台按位置传参，转发壳以相同参数透传给 hook，hook 签名不得偏移 |
|
||||
| **二选一，不混用** | 同一接口不允许在三文件内联实现与 `SubGameHooks` 中同时存在 |
|
||||
| **转发壳必须全覆盖** | 转发壳须覆盖全部 63 个接口，遗漏会导致平台调用落空（静默失败） |
|
||||
| **严格 ES5** | `SubGameHooks.js` 与所有 codes 文件一律 ES5，禁 `let`/`const`/箭头函数等 |
|
||||
| **加载顺序正确** | `SubGameHooks.js` 须在其依赖的 controllers/handlers 之后、三文件之前加载 |
|
||||
|
||||
---
|
||||
|
||||
## 10. 小结
|
||||
|
||||
- Hooks 外置模式将子游戏逻辑从平台契约文件中**彻底剥离**，三文件退化为纯转发壳，子游戏只需填充 `SubGameHooks`。
|
||||
- 平台天然兼容两种模式——全局接口名不变，平台无感知。
|
||||
- 新游戏接入：复制四个模板文件，三转发壳不改，只填 `SubGameHooks.js`，按顺序加入 `index.html`。
|
||||
- 老游戏迁移：替换接口段为转发壳，逐接口搬实现到 `SubGameHooks`，黑盒验证行为等价。
|
||||
- 转发壳由框架维护，子游戏不碰；配置值留配置文件；hook 命名默认同接口名，`gameHallImport.appStart` 例外用 `hallAppStart`。
|
||||
|
||||
上一篇 [05-开发规范与红线](./05-开发规范与红线.md)，回到 [README](./README.md) 查看导航。
|
||||
@@ -0,0 +1,75 @@
|
||||
# 前端 · 子游戏开发指导文档
|
||||
|
||||
> 本套文档是 **gameabc 平台前端模板框架(`gameabc-framework`)** 下「子游戏前端」开发的通用指导与规范。
|
||||
> 它讲清楚四件事：**前端怎么分层运行**、**界面怎么用精灵与组件搭**、**事件/动画/音频/Spine 怎么用**、**怎么和服务端收发包并启动一局**。
|
||||
>
|
||||
> 文中以「麻将」一类房卡棋牌作举例，但 `gameabc-framework` 是**游戏中立**的通用框架，所有结论不绑定具体玩法。
|
||||
> 新开发者按本套文档即可理解前端运作、从模板派生出一个子游戏并写出符合规范的代码。
|
||||
|
||||
---
|
||||
|
||||
## 这套文档写给谁
|
||||
|
||||
- **新接手子游戏前端的开发者**：先读 01、02 建立全局认知，再按 03、04 动手，05 随时回查。
|
||||
- **正在开发/维护某子游戏前端的开发者**：02–05 是日常手册与红线。
|
||||
- **做代码审查的人**：05 是审查清单来源。
|
||||
|
||||
## 阅读顺序
|
||||
|
||||
| 篇 | 文档 | 解决什么问题 |
|
||||
|----|------|--------------|
|
||||
| 00 | 本文 README | 这套文档是什么、怎么读、红线速查 |
|
||||
| 01 | [01-前端架构与运行环境.md](./01-前端架构与运行环境.md) | 双运行时/ES5、平台/框架/子游戏三层、新旧架构并存、目录与加载顺序 |
|
||||
| 02 | [02-渲染与UI组件体系.md](./02-渲染与UI组件体系.md) | 精灵 ID 体系、SpriteManager 分层、资源常量组织、BaseComponent 组件化、UIManager 场景、动态列表 |
|
||||
| 03 | [03-事件·动画·音频·Spine.md](./03-事件·动画·音频·Spine.md) | EventBus、AnimationManager+配置、AudioManager+音效资源、SpineMgr 全链路 |
|
||||
| 04 | [04-网络对接与启动编排.md](./04-网络对接与启动编排.md) | 发包链路（RpcHelper 注入平台字段）、收包统一分发、新旧架构对接边界、启动编排、处理器/管理器职责 |
|
||||
| 05 | [05-开发规范与红线.md](./05-开发规范与红线.md) | 可编辑范围、ES5、框架中立、常量集中、组件生命周期、data.success、模块职责、测试 |
|
||||
|
||||
建议第一次**从 01 顺序读到 05**；之后把 02–05 当手册随用随查。
|
||||
|
||||
---
|
||||
|
||||
## 一页纸：前端分层模型
|
||||
|
||||
```
|
||||
gameabc.min.js（引擎，js/vendor，第三方）
|
||||
▲
|
||||
GameABCUtils（core，唯一直接调引擎原生 API 的模块）
|
||||
▲
|
||||
SpriteManager（core，业务级精灵 API：ID 校验 + 单位换算） EventBus / AnimationManager / AudioManager / SpineMgr（system）
|
||||
▲ ▲
|
||||
BaseComponent / UIManager（ui，组件化与场景） ← gameabc-framework（游戏中立，可复用）
|
||||
══════════════════════════════════════════════════════════════════════════
|
||||
01_SubGame/codes（子游戏实例，单向依赖框架；内部结构由子游戏自行组织）
|
||||
shared 前后端共享算法（与服务端同源，脚本同步，只读）
|
||||
══════════════════════════════════════════════════════════════════════════
|
||||
旧受限对接层（平台入口，尽量不改）
|
||||
00/01/02_SubGame_*.js → Game_Modify.StartWar / Reconnect / _ReceiveData / appStart
|
||||
```
|
||||
|
||||
- **框架（gameabc-framework）**：游戏中立，提供精灵/组件/事件/动画/音频/Spine 通用能力，可被任何子游戏复用。
|
||||
- **子游戏（01_SubGame/codes）**：单向依赖框架，在其内部自由组织实现（目录/文件命名由子游戏自定，仅 `shared/` 为只读同步副本）。
|
||||
- **旧受限对接层**：平台框架的固定入口（`Game_Modify.*`），把平台事件转交给新架构，**尽量不改**（详见 01/04）。
|
||||
|
||||
---
|
||||
|
||||
## 红线速查（详见 05）
|
||||
|
||||
- **可编辑范围**：前端平台代码 `js/00_Surface/` 禁改；受限接口文件 `01_SubGame/00_/01_/02_SubGame_*.js` 不新增接口、尽量不改；其余在 `gameabc-framework/`、`01_SubGame/codes/` 内开发。
|
||||
- **严格 ES5**：用 `var`/`function`/`Object.create`，禁 `let`/`const`/箭头/模板串/`class`。
|
||||
- **框架游戏中立**：`gameabc-framework/` 内**不得**出现任何具体玩法逻辑或专属常量；玩法专属的事件/资源/配置一律定义在子游戏侧（如玩法事件在子游戏的事件常量文件里追加到 `EventBus.Events`）。
|
||||
- **精灵只走 SpriteManager**：UI 代码**禁止**直接调 `GameABCUtils` 或引擎原生 API；ID 必须落在规定范围（精灵 1001–3000、群组 ≥201、图层 101–200/弹窗 301–400，另有 501–600、701+ 备用段，框架保留 1–1000 及 3001+ 等交替段）。
|
||||
- **常量集中、禁硬编码**：精灵 ID/图片资源 ID/坐标尺寸/动画时长/音效 ID 一律定义在对应常量文件，业务代码引用，**不内联裸值**。
|
||||
- **组件走 BaseComponent**：UI 组件继承 `BaseComponent`，事件用 `this.addEventListener` 注册（`destroy()` 自动清理，防泄漏）；动态精灵/定时器在 `onDestroy` 清理。
|
||||
- **数据优先、表现延后**：收到推送先改数据模型，再播动画，动画回调里刷新静态界面；动画期间**不改数据**。即使不播动画，重画函数也能据本地数据还原正确界面。
|
||||
- **成败只认 `data.success`**：前端一律 `if (!data.success)` 判成败，**不**用 `status`/`code`，**不**写 `status` 兼容兜底。
|
||||
- **收发包走统一通道**：发包经统一发送封装（底层 `RpcHelper` 自动注入平台字段），收包统一分发（一 rpc 一处理器）；业务逻辑放处理器，**不**写进 `Game_Modify.*`。
|
||||
- **shared 只读**：`01_SubGame/codes/shared/` 是服务端 `shared/` 的同步副本，**不在前端改**，改服务端权威源后跑同步脚本。
|
||||
|
||||
---
|
||||
|
||||
## 与既有文档的关系
|
||||
|
||||
- 服务端的对应文档在 [`server/docs/development-guide/`](../../../server/docs/development-guide/)；前端「成败标志 `data.success`」「收发包链路」与之同源，互为对照。
|
||||
- 子游戏前端各层可能另有局部说明文档；本套是总纲，与之不冲突时以本套的通用原则为准。
|
||||
</content>
|
||||
Reference in New Issue
Block a user