二七王:回退自造的图集叠绘,改用平台既有 SpriteManager.setNumberImage

方案作废并纠正认知:多帧图片精灵【不是】只能显示一位数——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>
This commit is contained in:
2026-08-27 00:07:35 +08:00
co-authored by Claude Opus 5
parent dbdd6607d7
commit 35ee85e1d6
12 changed files with 174 additions and 712 deletions
@@ -717,83 +717,7 @@ var SpriteManager = (function() {
return false;
}
},
/**
* 在精灵上绘制图片的【指定源矩形】(图集裁切绘制)
*
* 与 drawImage 的区别:
* - drawImage = 整图绘制,源矩形固定为图片资源的完整尺寸,一次只能画“一张完整的图”
* - drawImageRegion = 可指定源矩形 (srcX, srcY, srcW, srcH),从一张图里裁出任意一格再画
*
* 典型用途:
* - 从等宽排列的图集里裁出第 N 格画上去(如把多位数字逐位画在【同一个】精灵上,
* 见 gameabc-framework/ui/NumberRenderer.js)
* - 九宫格拉伸、进度条按比例裁切、图集小图标叠绘
*
* ⚠️ 前提:必须在【精灵的绘制回调中】调用(SpriteEventController.registerDraw 注册的
* handler 里,或 registerGlobalDraw 的全局钩子里)。引擎的叠绘只在该精灵绘制的那一
* 帧生效,在回调之外调用不会留下任何画面。
*
* @param {Number} spriteId - 目标精灵ID(在哪个精灵上绘制)
* @param {Number} imageId - 要绘制的图片资源ID
* @param {Number} destX - 目标X坐标(在精灵内的相对坐标)
* @param {Number} destY - 目标Y坐标(在精灵内的相对坐标)
* @param {Number} destWidth - 目标绘制宽度
* @param {Number} destHeight - 目标绘制高度
* @param {Number} srcX - 源图片截取区域的X坐标
* @param {Number} srcY - 源图片截取区域的Y坐标
* @param {Number} srcWidth - 源图片截取区域的宽度
* @param {Number} srcHeight - 源图片截取区域的高度
* @returns {Boolean} 是否成功
*
* @example
* // 数字图集单字宽 30、高 40,'7' 是第 8 格(索引 7):
* // 把它画到精灵 1617 内的 (0, 0) 处,原样大小
* SpriteManager.drawImageRegion(1617, 635, 0, 0, 30, 40, 7 * 30, 0, 30, 40);
*/
drawImageRegion: function(spriteId, imageId, destX, destY, destWidth, destHeight,
srcX, srcY, srcWidth, srcHeight) {
if (!_validateSpriteId(spriteId)) return false;
// 参数验证
if (typeof imageId !== 'number' || imageId <= 0) {
console.error('❌ SpriteManager.drawImageRegion: 图片资源ID必须是正数:', imageId);
return false;
}
if (typeof destX !== 'number' || typeof destY !== 'number') {
console.error('❌ SpriteManager.drawImageRegion: 目标坐标必须是数字');
return false;
}
if (typeof destWidth !== 'number' || destWidth <= 0 ||
typeof destHeight !== 'number' || destHeight <= 0) {
console.error('❌ SpriteManager.drawImageRegion: 目标宽度和高度必须是正数');
return false;
}
if (typeof srcX !== 'number' || typeof srcY !== 'number') {
console.error('❌ SpriteManager.drawImageRegion: 源矩形坐标必须是数字');
return false;
}
if (typeof srcWidth !== 'number' || srcWidth <= 0 ||
typeof srcHeight !== 'number' || srcHeight <= 0) {
console.error('❌ SpriteManager.drawImageRegion: 源矩形宽度和高度必须是正数');
return false;
}
try {
// 调用 GameABCUtils.Draw.drawImage(带源矩形的完整版绘图接口)
GameABCUtils.Draw.drawImage(spriteId, imageId, destX, destY, destWidth, destHeight,
srcX, srcY, srcWidth, srcHeight);
return true;
} catch (error) {
console.error('❌ SpriteManager.drawImageRegion 失败:', error);
return false;
}
},
// ==================== 交互控制 ====================
/**