joywayerandClaude Opus 5
35ee85e1d6
方案作废并纠正认知：多帧图片精灵【不是】只能显示一位数——SpriteManager 第 1154 行 早有 setNumberImage(spriteId, text, charWidth)：把整串文本设给一个多帧图片精灵， 引擎按字符逐帧渲染，精灵宽度按「字符数 × charWidth」自动调整。bc75e40 造的 drawImageRegion + NumberRenderer 是重复轮子，本次整体回退（revert bc75e40）。 - 回退：删除 gameabc-framework/ui/NumberRenderer.js 与其单测，SpriteManager 与 index.html 恢复到改动前（与 bc75e40^ 逐字节一致）。 - ImageResources.js：数字类资源改为 16 帧、固定帧序 0123456789.+-x/p，逐条写明 各帧含义、第16帧后缀（选主张数=「张」；结算/叫分的后缀标注待美术与规则确认，未瞎填）、 单字符宽高与整图尺寸（16 × 单字宽），并说明帧序不可重排、不可省略占位。 - LayoutConstants.js：NUM_STYLE 改为 setNumberImage 所需的 res/charWidth/charHeight/suffix。 - Layout_Action.js：两个数字节点 h 取 charHeight（SSOT），w 留运行时注入 （宽度由 setNumberImage 按字符数自动改，随位数变）。 - Sprites_Action.js / Sprites_Result.js：注释改为 setNumberImage 用法； 结算玩家栏 ACC_TPL_SCORE_NUM 是复制精灵也能用（该接口不依赖绘制回调）。 - test_constants.js：NUM_STYLE 守卫改为校验 charWidth/charHeight/suffix 与 「h 同源、w 运行时注入」；suffix 限定为 setNumberImage 支持的 分/倍/张。 - 文档：清单 §1.3/§1.5/§3.6/§5.4/§6.8 与前端 02 的那一节全部按 setNumberImage 重写， 三种机制改为「文字精灵 / setFrame 切帧 / setNumberImage」，并记下这次误判作为反例。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
前端 · 子游戏开发指导文档
本套文档是 gameabc 平台前端模板框架(
gameabc-framework) 下「子游戏前端」开发的通用指导与规范。 它讲清楚四件事：前端怎么分层运行、界面怎么用精灵与组件搭、事件/动画/音频/Spine 怎么用、怎么和服务端收发包并启动一局。文中以「麻将」一类房卡棋牌作举例，但
gameabc-framework是游戏中立的通用框架，所有结论不绑定具体玩法。 新开发者按本套文档即可理解前端运作、从模板派生出一个子游戏并写出符合规范的代码。
这套文档写给谁
- 新接手子游戏前端的开发者：先读 01、02 建立全局认知，再按 03、04 动手，05 随时回查。
- 正在开发/维护某子游戏前端的开发者：02–05 是日常手册与红线。
- 做代码审查的人：05 是审查清单来源。
阅读顺序
| 篇 | 文档 | 解决什么问题 |
|---|---|---|
| 00 | 本文 README | 这套文档是什么、怎么读 |
| — | 红线速查.md | 一页纸分层模型 + 红线清单（由 CLAUDE.md 常驻加载，改代码前先对照） |
| 01 | 01-前端架构与运行环境.md | 双运行时/ES5、平台/框架/子游戏三层、新旧架构并存、目录与加载顺序 |
| 02 | 02-渲染与UI组件体系.md | 精灵 ID 体系、SpriteManager 分层、资源常量组织、BaseComponent 组件化、组件数据/set-refresh 范式、UIManager 场景、动态列表 |
| 03 | 03-事件·动画·音频·Spine.md | EventBus、AnimationManager+配置、AudioManager+音效资源、SpineMgr 全链路 |
| 04 | 04-网络对接与启动编排.md | 发包链路（RpcHelper 注入平台字段）、收包统一分发、新旧架构对接边界、启动编排、处理器/管理器职责 |
| 05 | 05-开发规范与红线.md | 可编辑范围、ES5、框架中立、常量集中、组件生命周期、数据驱动架构（前端无状态机/视图=服务端快照投影/本地 UI 态白名单）、组件数据与表现延后、data.success、模块职责、测试 |
| 06 | 06-子游戏接入模式与Hooks外置.md | 内联模式 vs Hooks 外置模式、三契约文件可改性、退化为纯转发壳 + SubGameHooks 委托、subgame-entry 模板 |
建议第一次从 01 顺序读到 05；之后把 02–05 当手册随用随查。06 在接入新游戏或迁移到 Hooks 外置模式时选读。
一页纸与红线
分层模型与红线清单已独立成篇：红线速查.md。
该文件由 CLAUDE.md 通过 @import 常驻每次会话上下文，是红线的权威源；本 README 只负责导航，不重复抄写红线（避免两处不同步）。红线的完整细节见 05-开发规范与红线.md。