二七王：回退自造的图集叠绘，改用平台既有 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:
Claude Opus 5
@@ -281,30 +281,41 @@ var EQW_Images = EQW_Images || {
|
||||
|
||||
//===================== §3.6 数字与符号 =====================
|
||||
//
|
||||
//【2026-08-26 出图方式变更】以下 NUM_* 数字类资源【不是】编辑器里配好帧数的多帧资源，
|
||||
//而是【等宽连续排列的一张图】：所有字符横向排成一行、每格等宽，图里不留间隙。
|
||||
//代码不用 setFrame（一个精灵一次只显示一帧＝只能显示一位数），改为按字宽裁源矩形叠绘：
|
||||
//第 idx 格的源矩形 = (idx * 单字宽, 0, 单字宽, 单字高)，由框架 NumberRenderer 逐位画在
|
||||
//【同一个】精灵上，故一个多位数只需一个精灵。样式（单字宽高/字间距/对齐/绘制区宽）见
|
||||
//EQW_Layout.NUM_STYLE.*（LayoutConstants.js），本处只记出图规格。
|
||||
//美术出图请严格按「字符排列顺序 + 单字符宽高 + 整图尺寸」执行，字符必须等宽对齐格子。
|
||||
//【数字类资源的统一规范：16 帧固定帧序】（2026-08-26 订正）
|
||||
//以下 NUM_* 一律是【多帧图片资源，16 帧】，帧序固定为：0 1 2 3 4 5 6 7 8 9 . + - x / p
|
||||
// 帧1–10 = 数字 0–9 帧11 = 「.」 帧12 = 「+」 帧13 = 「-」
|
||||
// 帧14 = 「x」 帧15 = 「/」 帧16 = 可变后缀（该套资源自己的后缀字，如「分」「倍」「张」）
|
||||
//
|
||||
//用法前提：显示多位数字【不拆精灵、不用 setFrame 逐位切】，而是用平台既有接口
|
||||
// SpriteManager.setNumberImage(spriteId, text, charWidth)
|
||||
//把整串文本设给【一个】多帧图片精灵，引擎按字符逐帧渲染，精灵宽度由该接口按
|
||||
//【字符数 × charWidth】自动调整（charWidth 见 EQW_Layout.NUM_STYLE.*，本处只记出图规格）。
|
||||
//
|
||||
//出图要求：帧号由字符直接换算（'0'–'9' → 帧1–10，后缀 → 帧16），所以帧序【不可重排、不可省略占位】——
|
||||
//即使某套资源用不到 . + - x / 这几帧，也要按顺序留出帧位，否则帧号对不上、画面串位。
|
||||
//整图尺寸一律 = 16 × 单字符宽（横向 16 帧）。
|
||||
|
||||
//用途：倒计时数字（带描边/渐变美术字）
|
||||
//排列：等宽连续一行，字符顺序 0 1 2 3 4 5 6 7 8 9（索引 0–9）
|
||||
//帧数：16（固定帧序 0123456789.+-x/p）
|
||||
//帧说明：帧1–10 = 0–9；帧11–15 = . + - x /（本套用不到，仅占位）；
|
||||
// 帧16 = 后缀【本套无后缀，出空白占位】
|
||||
//单字符尺寸：44×60
|
||||
//整图尺寸：440×60（10 格 × 44）
|
||||
//整图尺寸：704×60（16 帧 × 44）
|
||||
NUM_COUNTDOWN: 631,
|
||||
|
||||
//用途：结算得分数字（赢，橙，带描边/渐变美术字）
|
||||
//排列：等宽连续一行，字符顺序 0 1 2 3 4 5 6 7 8 9 + -（索引 0–9 为数字，10 = 「+」，11 = 「-」）
|
||||
//帧数：16（固定帧序 0123456789.+-x/p）
|
||||
//帧说明：帧1–10 = 0–9；帧12 = 「+」、帧13 = 「-」（得分带正负号，必出）；帧11/14/15 = . x /（占位）；
|
||||
// 帧16 = 后缀【待美术与规则确认：结算大字目前只显示数字，若日后要显示「+120分」则此帧出「分」】
|
||||
//单字符尺寸：46×62
|
||||
//整图尺寸：552×62（12 格 × 46）
|
||||
//整图尺寸：736×62（16 帧 × 46）
|
||||
NUM_RESULT_WIN: 632,
|
||||
|
||||
//用途：结算得分数字（输，蓝，带描边/渐变美术字）
|
||||
//排列：与 NUM_RESULT_WIN 完全一致——等宽连续一行，0–9 后接 「+」「-」（共 12 格），仅配色不同
|
||||
//帧数：16（固定帧序 0123456789.+-x/p）
|
||||
//帧说明：与 NUM_RESULT_WIN 完全一致（含帧16 待确认项），仅配色不同
|
||||
//单字符尺寸：46×62
|
||||
//整图尺寸：552×62（12 格 × 46）
|
||||
//整图尺寸：736×62（16 帧 × 46）
|
||||
NUM_RESULT_LOSE: 633,
|
||||
|
||||
//用途：判定结果动画（大光/小光/过庄/升N级/投降）——帧动画资源，播放参数进 AnimationConfigs【待设计 D-8】
|
||||
@@ -314,16 +325,21 @@ var EQW_Images = EQW_Images || {
|
||||
ANI_JUDGE: 634,
|
||||
|
||||
//用途：叫分档位的分数数字（深棕描边美术字，带描边/渐变，文字精灵做不出此效果）
|
||||
//排列：等宽连续一行，字符顺序 0 1 2 3 4 5 6 7 8 9（索引 0–9）
|
||||
//帧数：16（固定帧序 0123456789.+-x/p）
|
||||
//帧说明：帧1–10 = 0–9；帧11–15 = . + - x /（本套用不到，仅占位）；
|
||||
// 帧16 = 后缀【待确认：档位面板只显示分数数字（70…5），若日后要显示「70分」则此帧出「分」】
|
||||
//单字符尺寸：30×40
|
||||
//整图尺寸：300×40（10 格 × 30）
|
||||
//说明：14 个档位中 13 个是两位数（70…10），靠叠绘一个精灵画两位，见 Sprites_Action.js 的 CALL_BTN_NUM_1..14
|
||||
//整图尺寸：480×40（16 帧 × 30）
|
||||
//说明：14 个档位中 13 个是两位数（70…10），整串交给 setNumberImage，一档【一个】精灵，
|
||||
// 见 Sprites_Action.js 的 CALL_BTN_NUM_1..14；面板上的「N子」角标是文字精灵，不走本资源
|
||||
NUM_CALL_SCORE: 635,
|
||||
|
||||
//用途：选主面板花色张数数字（美术单独出图，字号配色与以上几套不同；一个花色一个精灵，见 Sprites_Action.js）
|
||||
//排列：等宽连续一行，字符顺序 0 1 2 3 4 5 6 7 8 9（索引 0–9）
|
||||
//帧数：16（固定帧序 0123456789.+-x/p）
|
||||
//帧说明：帧1–10 = 0–9；帧11–15 = . + - x /（本套用不到，仅占位）；
|
||||
// 帧16 = 后缀「张」（显示形如「26张」，后缀与数字等宽，同为单字符宽）
|
||||
//单字符尺寸：24×32（估值，与选主按钮 128×55 协调估算，出图前须与最终设计稿核对）
|
||||
//整图尺寸：240×32（10 格 × 24）
|
||||
//整图尺寸：384×32（16 帧 × 24）
|
||||
NUM_MAIN_SUIT_COUNT: 636,
|
||||
|
||||
//===================== §3.7 浮层与气泡 =====================
|
||||
|
||||
@@ -32,30 +32,31 @@ EQW_Layout.TEXT_STYLE = {
|
||||
ROOM_CARD_COST_NOTE: { fontSize: 16, color: '#999999' } //建房房卡消耗附注（§6.9b）
|
||||
};
|
||||
|
||||
//数字样式预设（清单 §3.6 / §6.8，2026-08-26 新增）——图集叠绘数字用，一个精灵画多位美术字。
|
||||
//每套对应一张【等宽连续排列】的数字图：字符横向一行排开，第 idx 格的源矩形 = (idx*charWidth, 0, charWidth, charHeight)。
|
||||
//渲染由框架的 NumberRenderer 完成（NumberRenderer.bind(spriteId, style) → setValue）；
|
||||
//本表是【零裸值红线】的落点：charWidth/charHeight/spacing/align/width 只在此定义，业务代码只引用不内联。
|
||||
//多帧图数字样式（清单 §3.6 / §6.8，2026-08-26 新增）——配合平台既有的
|
||||
//SpriteManager.setNumberImage(spriteId, text, charWidth)：把整串数字设给【一个】多帧图片精灵，
|
||||
//引擎按字符逐帧渲染，精灵宽度由该接口按【字符数 × charWidth】自动调整。
|
||||
//故多位数不需要拆成十位/个位多个精灵，也不用 setFrame 逐位切。
|
||||
//本表是【零裸值红线】的落点：charWidth/charHeight 只在此定义一处，业务代码只引用不内联。
|
||||
//
|
||||
//字段：res —— 图片资源【键名】（与 CARD_SIZE.res 同一约定：纯数据文件不直接引用 EQW_Images，
|
||||
// 调用方用 EQW_Images[style.res] 取真实 ID）
|
||||
// charWidth/charHeight —— 图集单字符宽高（= 源矩形尺寸，也是原样绘制的目标尺寸）
|
||||
// spacing —— 字间距（可为负=字符重叠）
|
||||
// align —— 在绘制区内的水平对齐：'left'|'center'|'right'
|
||||
// width —— 绘制区宽度（= 承载精灵的宽度；各 Layout_*.js 的对应节点直接引用本值，保持 SSOT）
|
||||
//字段：res —— 图片资源【键名】（与 CARD_SIZE.res 同一约定：纯数据文件不直接引用 EQW_Images，
|
||||
// 调用方用 EQW_Images[style.res] 取真实 ID）
|
||||
// charWidth —— 单字符宽（传给 setNumberImage；精灵宽 = 字符数 × charWidth，运行时自动变）
|
||||
// charHeight —— 单字符高（setNumberImage 不改高度，此值供布局节点定 h）
|
||||
// suffix —— 该套资源第 16 帧承载的后缀字（无后缀为 ''；见 ImageResources.js §3.6 的帧序说明）
|
||||
EQW_Layout.NUM_STYLE = {
|
||||
//倒计时（§2.4）：最多两位（秒）
|
||||
COUNTDOWN: { res: 'NUM_COUNTDOWN', charWidth: 44, charHeight: 60, spacing: 0, align: 'center', width: 88 },
|
||||
//倒计时（§2.4）：纯数字无后缀，秒数最多两位
|
||||
COUNTDOWN: { res: 'NUM_COUNTDOWN', charWidth: 44, charHeight: 60, suffix: '' },
|
||||
|
||||
//结算得分 · 赢（§1.8/§6.9）：带符号，最多「符号 + 四位」
|
||||
RESULT_WIN: { res: 'NUM_RESULT_WIN', charWidth: 46, charHeight: 62, spacing: 0, align: 'center', width: 230 },
|
||||
//结算得分 · 赢（§1.8/§6.9）：用到 '+'（帧12）与 '-'（帧13）；后缀是否为「分」待定，见资源注释
|
||||
RESULT_WIN: { res: 'NUM_RESULT_WIN', charWidth: 46, charHeight: 62, suffix: '' },
|
||||
|
||||
//结算得分 · 输（§1.8/§6.9）：帧序与赢的一致，只是配色不同
|
||||
RESULT_LOSE: { res: 'NUM_RESULT_LOSE', charWidth: 46, charHeight: 62, spacing: 0, align: 'center', width: 230 },
|
||||
//结算得分 · 输（§1.8/§6.9）：帧序与赢的一致，仅配色不同
|
||||
RESULT_LOSE: { res: 'NUM_RESULT_LOSE', charWidth: 46, charHeight: 62, suffix: '' },
|
||||
|
||||
//叫分档位分数（§1.3/§6.8）：14 档中 13 档是两位数；绘制区宽 = 档位按钮宽 74，居中压在按钮上
|
||||
CALL_SCORE: { res: 'NUM_CALL_SCORE', charWidth: 30, charHeight: 40, spacing: 0, align: 'center', width: 74 },
|
||||
//叫分档位分数（§1.3/§6.8）：14 档中 13 档是两位数，整串交给 setNumberImage，无后缀
|
||||
//（面板上的「N子」角标是文字精灵，不走这套）
|
||||
CALL_SCORE: { res: 'NUM_CALL_SCORE', charWidth: 30, charHeight: 40, suffix: '' },
|
||||
|
||||
//选主面板花色张数（§1.5/§6.8）：两副牌单花色最多 26 张，最多两位
|
||||
MAIN_SUIT_COUNT: { res: 'NUM_MAIN_SUIT_COUNT', charWidth: 24, charHeight: 32, spacing: 0, align: 'center', width: 48 }
|
||||
//选主面板花色张数（§1.5/§6.8）：显示「N张」，「张」= 第 16 帧；单花色最多 26 张
|
||||
MAIN_SUIT_COUNT: { res: 'NUM_MAIN_SUIT_COUNT', charWidth: 24, charHeight: 32, suffix: '张' }
|
||||
};
|
||||
|
||||
@@ -20,12 +20,12 @@ EQW_Layout.CALL_BTN_GRID = {
|
||||
|
||||
//档位分数数字：贴对应档位按钮居中。CALL_BTN_1..14 是 14 个固定精灵，但本节点是共用模板，
|
||||
//target 由调用方按第几档注入（不预置单一 target）。
|
||||
//2026-08-26：改为图集叠绘（NumberRenderer），一个精灵画完整分数，故宽高【不再随位数变化】——
|
||||
//直接取 NUM_STYLE.CALL_SCORE 的绘制区宽与单字高（SSOT：数值只在 LayoutConstants 定义一处）
|
||||
//宽度随位数变化（SpriteManager.setNumberImage 会按【字符数 × charWidth】自动改精灵宽），
|
||||
//故 w 留到运行时注入；高度恒为单字高，取 NUM_STYLE.CALL_SCORE.charHeight（SSOT，2026-08-26）
|
||||
EQW_Layout.CALL_BTN_SCORE_TEXT = {
|
||||
kind: 'attach', targetKind: 'sprite', hAlign: 'center', vAlign: 'middle', offsetY: 4,
|
||||
w: EQW_Layout.NUM_STYLE.CALL_SCORE.width, h: EQW_Layout.NUM_STYLE.CALL_SCORE.charHeight,
|
||||
runtime: ['target']
|
||||
h: EQW_Layout.NUM_STYLE.CALL_SCORE.charHeight,
|
||||
runtime: ['target', 'w']
|
||||
};
|
||||
|
||||
//档位子数角标：贴对应档位按钮右上角，纯文字无底图，清单未给宽高（同上，调用方注入 target）
|
||||
@@ -51,12 +51,13 @@ EQW_Layout.MAIN_SUIT_LINE = {
|
||||
itemWidth: 128, itemHeight: 55, spacing: 9, anchor: 'left'
|
||||
};
|
||||
|
||||
//张数数字：贴对应花色按钮下方居中，一个花色【一个】精灵（图集叠绘，两位数由 NumberRenderer 逐位画）。
|
||||
//2026-08-26：原十位/个位两节点合并为本节点；宽高取 NUM_STYLE.MAIN_SUIT_COUNT（SSOT，调用方注入 target）
|
||||
//张数数字：贴对应花色按钮下方居中，一个花色【一个】精灵，整串「N张」由 setNumberImage 显示。
|
||||
//2026-08-26：原十位/个位两节点合并为本节点；宽度随位数变化（2 或 3 个字符）留到运行时注入，
|
||||
//高度恒为单字高，取 NUM_STYLE.MAIN_SUIT_COUNT.charHeight（SSOT）
|
||||
EQW_Layout.MAIN_SUIT_COUNT = {
|
||||
kind: 'attach', targetKind: 'sprite', hAlign: 'center', vAlign: 'bottom', offsetY: -6,
|
||||
w: EQW_Layout.NUM_STYLE.MAIN_SUIT_COUNT.width, h: EQW_Layout.NUM_STYLE.MAIN_SUIT_COUNT.charHeight,
|
||||
runtime: ['target']
|
||||
h: EQW_Layout.NUM_STYLE.MAIN_SUIT_COUNT.charHeight,
|
||||
runtime: ['target', 'w']
|
||||
};
|
||||
|
||||
//对数角标文字：贴对应花色按钮右上角（按钮帧内已含角标底，本节点只定位叠加的文字）。
|
||||
|
||||
@@ -36,9 +36,10 @@ EQW_Sprites.CallPanelView = {
|
||||
CALL_BTN_13: 1615,
|
||||
CALL_BTN_14: 1616,
|
||||
|
||||
//—— 14 档位分数数字（图集叠绘数字精灵），资源 EQW_Images.NUM_CALL_SCORE，样式 EQW_Layout.NUM_STYLE.CALL_SCORE。
|
||||
// 一个精灵画完整档位分数：NumberRenderer 按字宽从等宽连续数字图里逐位裁源矩形叠绘，
|
||||
// 故 14 档（其中 13 档是两位数）各只需【一个】精灵（2026-08-26 改，原多帧 setFrame 一次只显示一位、两位数根本画不出）——
|
||||
//—— 14 档位分数数字（多帧图数字精灵），资源 EQW_Images.NUM_CALL_SCORE（16 帧固定帧序），
|
||||
// 字符宽见 EQW_Layout.NUM_STYLE.CALL_SCORE.charWidth。
|
||||
// 显示用 SpriteManager.setNumberImage(spriteId, '70', charWidth)：整串交给引擎按字符逐帧渲染、
|
||||
// 精灵宽度自动按字符数调整，故 14 档（其中 13 档是两位数）各只需【一个】精灵，不拆十位/个位 ——
|
||||
CALL_BTN_NUM_1: 1617,
|
||||
CALL_BTN_NUM_2: 1618,
|
||||
CALL_BTN_NUM_3: 1619,
|
||||
@@ -83,8 +84,9 @@ EQW_Sprites.CallPanelView = {
|
||||
// 1660–1663 MAIN_SUIT_COUNT_1..4 —— 原文字精灵，改为下方数字图片精灵（键名沿用，ID 改到 1674–1677）
|
||||
// 1664–1667 MAIN_SUIT_PAIR_BG_1..4 —— 角标底并入 BTN_SUIT_CHOOSE 帧1–4
|
||||
// 1673 MAIN_BTN_SURRENDER_TEXT —— 「投降」二字并入 BTN_SUIT_CHOOSE 帧5
|
||||
// 1678–1681 原 MAIN_SUIT_COUNT_3/4_TENS/ONES —— 张数改为「一个花色一个精灵」（图集叠绘，见下），
|
||||
// 上一轮的十位/个位拆分作废，空出的 4 个 ID 不复用（2026-08-26）
|
||||
// 1678–1681 原 MAIN_SUIT_COUNT_3/4_TENS/ONES —— 张数改回「一个花色一个精灵」（多帧图数字，见下：
|
||||
// SpriteManager.setNumberImage 一个精灵就能显示整串），上一轮的十位/个位拆分作废，
|
||||
// 空出的 4 个 ID 不复用（2026-08-26）
|
||||
EQW_Sprites.ChooseMainView = {
|
||||
Layer: EQW_Layers.ACTION, //104
|
||||
|
||||
@@ -107,10 +109,11 @@ EQW_Sprites.ChooseMainView = {
|
||||
MAIN_SUIT_PAIR_TEXT_3: 1670,
|
||||
MAIN_SUIT_PAIR_TEXT_4: 1671,
|
||||
|
||||
//—— 4 个花色张数数字精灵（图集叠绘，一花色一个）：该花色在庄家手中的张数
|
||||
// （两副牌单花色最多 26 张，两位数），资源 EQW_Images.NUM_MAIN_SUIT_COUNT，
|
||||
// 样式 EQW_Layout.NUM_STYLE.MAIN_SUIT_COUNT；NumberRenderer 逐位裁源矩形画在同一精灵上，
|
||||
// 不再需要十位/个位各一个精灵（2026-08-26）——
|
||||
//—— 4 个花色张数数字精灵（多帧图数字精灵，一花色一个）：该花色在庄家手中的张数
|
||||
// （两副牌单花色最多 26 张，两位数），资源 EQW_Images.NUM_MAIN_SUIT_COUNT（16 帧固定帧序，
|
||||
// 第16帧＝后缀「张」），字符宽见 EQW_Layout.NUM_STYLE.MAIN_SUIT_COUNT.charWidth。
|
||||
// 显示用 SpriteManager.setNumberImage(spriteId, '26张', charWidth)，整串一个精灵搞定，
|
||||
// 不拆十位/个位（2026-08-26）——
|
||||
MAIN_SUIT_COUNT_1: 1674,
|
||||
MAIN_SUIT_COUNT_2: 1675,
|
||||
MAIN_SUIT_COUNT_3: 1676,
|
||||
|
||||
@@ -96,11 +96,10 @@ EQW_Sprites.AccountView = {
|
||||
ACC_TPL_RANK: 1911, //模板：名次徽章，资源 EQW_Images.BADGE_RANK，帧=名次1–3
|
||||
ACC_TPL_AVATAR: 1912, //模板：头像，运行时贴玩家头像
|
||||
ACC_TPL_TEXT: 1913, //模板：通用文字（昵称/ID/各项分数，一行一个）
|
||||
ACC_TPL_SCORE_NUM: 1914, //模板：右侧总分大字（数字精灵），资源 EQW_Images.NUM_RESULT_WIN / NUM_RESULT_LOSE
|
||||
//【2026-08-26 待定】NUM_RESULT_* 已改为等宽连续图 + 图集叠绘（见 ImageResources.js §3.6），
|
||||
//而本精灵是【复制模板】、运行时 ID 为字符串，SpriteEventController.registerDraw 只收数字 ID、
|
||||
//复制精灵也不单独收绘制事件 → 无法用 NumberRenderer。玩家栏总分的呈现方式待 F 阶段定
|
||||
//（改文字精灵 / 改预置精灵 / 由父容器统一叠绘），此处先记风险不改结构
|
||||
ACC_TPL_SCORE_NUM: 1914, //模板：右侧总分大字（多帧图数字精灵），资源 EQW_Images.NUM_RESULT_WIN / NUM_RESULT_LOSE，
|
||||
//显示用 SpriteManager.setNumberImage(复制精灵ID, '+120', charWidth)——
|
||||
//setNumberImage 走的是 TEXT/WIDTH 属性，_validateSpriteId 也接受复制精灵的字符串 ID，
|
||||
//故复制出来的玩家栏总分同样一个精灵显示整串（2026-08-26 核对）
|
||||
ACC_TPL_DIVIDER: 1915, //模板：行间分隔线，资源 EQW_Images.LINE_DIVIDER
|
||||
|
||||
//—— 底部 4 个功能按钮 ——
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// ==================== 交互控制 ====================
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,336 +0,0 @@
|
||||
// ============================================================================
|
||||
// NumberRenderer (gameabc-framework / ui, 严格 ES5)
|
||||
// 图集叠绘式数字渲染器——把一个【多位数值】画在【一个】精灵上。游戏中立。
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* NumberRenderer —— 一个精灵画多位美术字数字
|
||||
*
|
||||
* ── 解决什么问题 ────────────────────────────────────────────────────────
|
||||
* 带描边/渐变的美术字数字（倒计时、结算得分、叫分档位分数、张数…）文字精灵做不出，
|
||||
* 只能用图。但「多帧图片精灵 + SpriteManager.setFrame」一个精灵一次只显示【一帧】，
|
||||
* 也就是【一位】数字——两位数就要两个精灵（十位/个位），精灵数迅速膨胀。
|
||||
*
|
||||
* 本模块改用【图集叠绘】：在精灵的绘制回调里，按字宽从数字图集里逐位裁源矩形，
|
||||
* 逐位画到【同一个】精灵内的不同 x 上，于是一个精灵就能显示任意位数。
|
||||
*
|
||||
* ── 三种显示机制的选用（详见 docs/client/development-guide/02 §2）──────────
|
||||
* 文字精灵 SpriteManager.setText 任意长度，但只能用系统字体
|
||||
* 多帧图片精灵 SpriteManager.setFrame 一次一帧，适合「状态切换」（按钮态/花色/牌面）
|
||||
* 图集叠绘 NumberRenderer 一个精灵画多位美术字 ← 本模块
|
||||
*
|
||||
* ── 用法 ────────────────────────────────────────────────────────────────
|
||||
* // 1) 绑定：记住样式 + 注册绘制回调（样式由【调用方】即子游戏提供，本模块不认识业务）
|
||||
* NumberRenderer.bind(spriteId, {
|
||||
* imageId: 635, // 数字图集的图片资源 ID
|
||||
* charWidth: 30, // 图集里单个字符的宽
|
||||
* charHeight: 40, // 图集里单个字符的高
|
||||
* spacing: 0, // 字间距（可为负 = 字符重叠）
|
||||
* align: 'center', // 'left' | 'center' | 'right'
|
||||
* width: 74 // 绘制区宽度（= 精灵内可用宽度，由调用方按布局给）
|
||||
* // charMap: {...} // 可选：整体覆盖默认的「字符 → 图集索引」映射
|
||||
* });
|
||||
*
|
||||
* // 2) 写值（只写数据、不画；引擎每帧回调绘制handler，自然就画出来了）
|
||||
* NumberRenderer.setValue(spriteId, 70);
|
||||
*
|
||||
* // 3) 清空 / 解绑
|
||||
* NumberRenderer.clear(spriteId); // 不显示任何字符（精灵本身仍在）
|
||||
* NumberRenderer.unbind(spriteId); // 注销绘制回调 + 清除状态（组件 onDestroy 里调）
|
||||
*
|
||||
* ── 图集规格（默认映射）────────────────────────────────────────────────
|
||||
* 图集是【等宽连续排列的一行】，第 idx 格的源矩形 = (idx * charWidth, 0, charWidth, charHeight)：
|
||||
* 索引 0–9 → 字符 '0'–'9'
|
||||
* 索引 10 → '+' （有些数字图带正负号）
|
||||
* 索引 11 → '-'
|
||||
* 图集若不是这个排列（多了小数点、`分` 等），用 style.charMap 整体覆盖。
|
||||
* 映射不到的字符【显式抛错】，不静默跳过（engineering 总则 7：显式失败优于隐式兜底）。
|
||||
*
|
||||
* ── 依赖与边界 ──────────────────────────────────────────────────────────
|
||||
* - 只调 SpriteManager.drawImageRegion 与 SpriteEventController，不碰 GameABCUtils / 引擎原语。
|
||||
* - 游戏中立：不含任何具体玩法的资源 ID、常量或概念，样式全部由调用方传入。
|
||||
* - 只支持【数字 ID 的预置精灵】：SpriteEventController.registerDraw 要求 spriteId 是数字，
|
||||
* SpriteCopyUtils 复制出的字符串 ID 精灵不接收独立绘制事件，不能用本模块。
|
||||
*/
|
||||
var NumberRenderer = {
|
||||
|
||||
/**
|
||||
* 默认「字符 → 图集索引」映射：等宽连续排列的一行，0–9 后接 + 与 -
|
||||
* @type {Object}
|
||||
*/
|
||||
DEFAULT_CHAR_MAP: {
|
||||
'0': 0, '1': 1, '2': 2, '3': 3, '4': 4,
|
||||
'5': 5, '6': 6, '7': 7, '8': 8, '9': 9,
|
||||
'+': 10,
|
||||
'-': 11
|
||||
},
|
||||
|
||||
/**
|
||||
* 合法的对齐方式
|
||||
* @type {Array}
|
||||
*/
|
||||
ALIGNS: ['left', 'center', 'right'],
|
||||
|
||||
/**
|
||||
* 已绑定精灵的状态表 { spriteId: { style: {...}, value: String|null, items: Array } }
|
||||
* items 是 layout() 的结果，在 setValue 时算好、绘制回调里直接重放
|
||||
* @type {Object}
|
||||
*/
|
||||
_bound: {},
|
||||
|
||||
// ========================================================================
|
||||
// 纯函数：布局计算（不碰引擎、可脱离运行时单测）
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 校验样式对象；不合法直接抛错（显式失败）
|
||||
* @param {Object} style - 样式
|
||||
* @returns {Object} 归一化后的样式副本
|
||||
*/
|
||||
normalizeStyle: function (style) {
|
||||
if (!style || typeof style !== 'object') {
|
||||
throw new Error('NumberRenderer: style 必须是对象');
|
||||
}
|
||||
if (typeof style.imageId !== 'number' || style.imageId <= 0) {
|
||||
throw new Error('NumberRenderer: style.imageId 必须是正数，收到 ' + style.imageId);
|
||||
}
|
||||
if (typeof style.charWidth !== 'number' || style.charWidth <= 0) {
|
||||
throw new Error('NumberRenderer: style.charWidth 必须是正数，收到 ' + style.charWidth);
|
||||
}
|
||||
if (typeof style.charHeight !== 'number' || style.charHeight <= 0) {
|
||||
throw new Error('NumberRenderer: style.charHeight 必须是正数，收到 ' + style.charHeight);
|
||||
}
|
||||
if (typeof style.width !== 'number' || style.width <= 0) {
|
||||
throw new Error('NumberRenderer: style.width（绘制区宽度）必须是正数，收到 ' + style.width);
|
||||
}
|
||||
if (typeof style.spacing !== 'undefined' && typeof style.spacing !== 'number') {
|
||||
throw new Error('NumberRenderer: style.spacing 必须是数字（可为负），收到 ' + style.spacing);
|
||||
}
|
||||
if (this.ALIGNS.indexOf(style.align) < 0) {
|
||||
throw new Error('NumberRenderer: style.align 必须是 left/center/right 之一，收到 ' + style.align);
|
||||
}
|
||||
if (typeof style.charMap !== 'undefined' &&
|
||||
(!style.charMap || typeof style.charMap !== 'object')) {
|
||||
throw new Error('NumberRenderer: style.charMap 必须是对象');
|
||||
}
|
||||
|
||||
return {
|
||||
imageId: style.imageId,
|
||||
charWidth: style.charWidth,
|
||||
charHeight: style.charHeight,
|
||||
spacing: (typeof style.spacing === 'number') ? style.spacing : 0,
|
||||
align: style.align,
|
||||
width: style.width,
|
||||
charMap: style.charMap || this.DEFAULT_CHAR_MAP
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算一个数值在精灵内的逐字符绘制矩形（纯函数，无副作用）
|
||||
*
|
||||
* 第 idx 个字符（idx = charMap[字符]）的源矩形固定为
|
||||
* (idx * charWidth, 0, charWidth, charHeight)
|
||||
* 起始 x 由 style.width 与总宽 n*charWidth + (n-1)*spacing 按 align 算出。
|
||||
* 【不读精灵实际尺寸】——宽度一律由 style 给，保证本函数可脱离引擎单测。
|
||||
*
|
||||
* @param {String|Number|null} value - 要显示的值（null/undefined/'' = 不显示任何字符）
|
||||
* @param {Object} style - 样式（字段见文件头；本函数内部会先 normalizeStyle）
|
||||
* @returns {Array} [{ char, index, srcX, srcY, srcW, srcH, destX, destY, destW, destH }, ...]
|
||||
* @throws {Error} 样式非法、或字符映射不到图集索引
|
||||
*
|
||||
* @example
|
||||
* NumberRenderer.layout(70, { imageId: 635, charWidth: 30, charHeight: 40,
|
||||
* spacing: 0, align: 'left', width: 74 });
|
||||
* // → [ {char:'7', index:7, srcX:210, ..., destX: 0, ...},
|
||||
* // {char:'0', index:0, srcX:0, ..., destX:30, ...} ]
|
||||
*/
|
||||
layout: function (value, style) {
|
||||
var s = this.normalizeStyle(style);
|
||||
|
||||
if (value === null || typeof value === 'undefined') { return []; }
|
||||
var text = String(value);
|
||||
if (text.length === 0) { return []; }
|
||||
|
||||
var n = text.length;
|
||||
var totalWidth = n * s.charWidth + (n - 1) * s.spacing;
|
||||
|
||||
var startX;
|
||||
if (s.align === 'left') {
|
||||
startX = 0;
|
||||
} else if (s.align === 'right') {
|
||||
startX = s.width - totalWidth;
|
||||
} else {
|
||||
startX = (s.width - totalWidth) / 2;
|
||||
}
|
||||
|
||||
var items = [];
|
||||
for (var i = 0; i < n; i++) {
|
||||
var ch = text.charAt(i);
|
||||
if (!Object.prototype.hasOwnProperty.call(s.charMap, ch)) {
|
||||
throw new Error('NumberRenderer: 字符 "' + ch + '" 不在 charMap 里（值 "' + text +
|
||||
'"）——图集没有这一格，请补映射或改用文字精灵');
|
||||
}
|
||||
var idx = s.charMap[ch];
|
||||
if (typeof idx !== 'number' || idx < 0) {
|
||||
throw new Error('NumberRenderer: 字符 "' + ch + '" 映射到非法索引 ' + idx);
|
||||
}
|
||||
items.push({
|
||||
char: ch,
|
||||
index: idx,
|
||||
srcX: idx * s.charWidth,
|
||||
srcY: 0,
|
||||
srcW: s.charWidth,
|
||||
srcH: s.charHeight,
|
||||
destX: startX + i * (s.charWidth + s.spacing),
|
||||
destY: 0,
|
||||
destW: s.charWidth,
|
||||
destH: s.charHeight
|
||||
});
|
||||
}
|
||||
return items;
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// 绑定 / 写值 / 清空 / 解绑
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 绑定精灵：记下样式并注册绘制回调
|
||||
*
|
||||
* 重复 bind 同一个精灵 = 换样式（回调只注册一次，值被重置为空）。
|
||||
*
|
||||
* @param {Number} spriteId - 精灵ID（必须是编辑器预置的数字 ID）
|
||||
* @param {Object} style - 样式（字段见文件头）
|
||||
* @returns {Boolean} 是否成功
|
||||
* @throws {Error} 样式非法（显式失败，不静默返回 false）
|
||||
*/
|
||||
bind: function (spriteId, style) {
|
||||
if (typeof spriteId !== 'number') {
|
||||
throw new Error('NumberRenderer.bind: spriteId 必须是数字（复制精灵不支持叠绘）');
|
||||
}
|
||||
if (typeof SpriteEventController === 'undefined') {
|
||||
console.error('❌ NumberRenderer.bind: 缺少依赖 SpriteEventController');
|
||||
return false;
|
||||
}
|
||||
|
||||
var normalized = this.normalizeStyle(style);
|
||||
this._bound[spriteId] = { style: normalized, value: null, items: [] };
|
||||
|
||||
var self = this;
|
||||
return SpriteEventController.registerDraw(spriteId, function (e) {
|
||||
self._draw(e.spriteId);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 写值（只写数据，不画；实际绘制由引擎每帧回调完成）
|
||||
*
|
||||
* 逐字符矩形在此刻就算好并缓存：一是让「字符映射不到」这类错误在【调用处】当场抛出，
|
||||
* 而不是每帧在绘制回调里刷屏；二是避免每帧重复计算与分配。
|
||||
*
|
||||
* @param {Number} spriteId - 精灵ID（须先 bind）
|
||||
* @param {String|Number} value - 要显示的值
|
||||
* @returns {Boolean} 是否成功
|
||||
* @throws {Error} 未绑定、或值含图集里没有的字符
|
||||
*/
|
||||
setValue: function (spriteId, value) {
|
||||
var state = this._bound[spriteId];
|
||||
if (!state) {
|
||||
throw new Error('NumberRenderer.setValue: 精灵 ' + spriteId + ' 尚未 bind');
|
||||
}
|
||||
state.items = this.layout(value, state.style);
|
||||
state.value = (value === null || typeof value === 'undefined') ? null : String(value);
|
||||
return true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 清空：不显示任何字符（精灵本身与绑定都还在）
|
||||
* @param {Number} spriteId - 精灵ID（须先 bind）
|
||||
* @returns {Boolean} 是否成功
|
||||
* @throws {Error} 未绑定
|
||||
*/
|
||||
clear: function (spriteId) {
|
||||
var state = this._bound[spriteId];
|
||||
if (!state) {
|
||||
throw new Error('NumberRenderer.clear: 精灵 ' + spriteId + ' 尚未 bind');
|
||||
}
|
||||
state.value = null;
|
||||
state.items = [];
|
||||
return true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 解绑：注销绘制回调并清除状态（精灵销毁/组件 onDestroy 时必须调，防回调残留）
|
||||
* @param {Number} spriteId - 精灵ID
|
||||
* @returns {Boolean} 是否成功
|
||||
*/
|
||||
unbind: function (spriteId) {
|
||||
if (typeof spriteId !== 'number') {
|
||||
console.error('❌ NumberRenderer.unbind: spriteId 必须是数字:', spriteId);
|
||||
return false;
|
||||
}
|
||||
delete this._bound[spriteId];
|
||||
|
||||
if (typeof SpriteEventController === 'undefined') {
|
||||
console.error('❌ NumberRenderer.unbind: 缺少依赖 SpriteEventController');
|
||||
return false;
|
||||
}
|
||||
return SpriteEventController.unregister(spriteId, 'draw');
|
||||
},
|
||||
|
||||
/**
|
||||
* 取当前值（调试/自检用）
|
||||
* @param {Number} spriteId - 精灵ID
|
||||
* @returns {String|null} 当前值；未绑定返回 null
|
||||
*/
|
||||
getValue: function (spriteId) {
|
||||
var state = this._bound[spriteId];
|
||||
return state ? state.value : null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否已绑定
|
||||
* @param {Number} spriteId - 精灵ID
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isBound: function (spriteId) {
|
||||
return Object.prototype.hasOwnProperty.call(this._bound, spriteId);
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// 内部：绘制回调（由引擎每帧触发）
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* 绘制回调实现：把缓存的逐字符矩形画到精灵上
|
||||
* @param {Number} spriteId - 精灵ID
|
||||
* @private
|
||||
*/
|
||||
_draw: function (spriteId) {
|
||||
var state = this._bound[spriteId];
|
||||
if (!state || state.items.length === 0) { return; }
|
||||
|
||||
if (typeof SpriteManager === 'undefined' || !SpriteManager.drawImageRegion) {
|
||||
console.error('❌ NumberRenderer: 缺少依赖 SpriteManager.drawImageRegion');
|
||||
return;
|
||||
}
|
||||
|
||||
var imageId = state.style.imageId;
|
||||
for (var i = 0; i < state.items.length; i++) {
|
||||
var it = state.items[i];
|
||||
SpriteManager.drawImageRegion(spriteId, imageId,
|
||||
it.destX, it.destY, it.destW, it.destH,
|
||||
it.srcX, it.srcY, it.srcW, it.srcH);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 导出
|
||||
// ============================================================================
|
||||
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = NumberRenderer;
|
||||
} else if (typeof window !== 'undefined') {
|
||||
window.NumberRenderer = NumberRenderer;
|
||||
}
|
||||
Reference in New Issue
Block a user