diff --git a/client/js/01_SubGame/codes/config/ImageResources.js b/client/js/01_SubGame/codes/config/ImageResources.js index 7e67701..38545fb 100644 --- a/client/js/01_SubGame/codes/config/ImageResources.js +++ b/client/js/01_SubGame/codes/config/ImageResources.js @@ -327,7 +327,8 @@ var EQW_Images = EQW_Images || { //用途：叫分档位的分数数字（深棕描边美术字，带描边/渐变，文字精灵做不出此效果） //帧数：16（固定帧序 0123456789.+-x/p） //帧说明：帧1–10 = 0–9；帧11–15 = . + - x /（本套用不到，仅占位）； - // 帧16 = 后缀【待确认：档位面板只显示分数数字（70…5），若日后要显示「70分」则此帧出「分」】 + // 帧16 = 无后缀（第16帧留空/不使用）【已确认，2026-08-27】：档位面板只显示纯数字（70…5）， + // 旁边的「N子」角标是独立的文字精灵，不走这里 //单字符尺寸：30×40 //整图尺寸：480×40（16 帧 × 30） //说明：14 个档位中 13 个是两位数（70…10），整串交给 setNumberImage，一档【一个】精灵， diff --git a/client/js/01_SubGame/codes/config/LayoutConstants.js b/client/js/01_SubGame/codes/config/LayoutConstants.js index 5a67200..8f711fb 100644 --- a/client/js/01_SubGame/codes/config/LayoutConstants.js +++ b/client/js/01_SubGame/codes/config/LayoutConstants.js @@ -24,7 +24,8 @@ EQW_Layout.CARD_SIZE = { EQW_Layout.TEXT_STYLE = { STATUS_BIG: { fontSize: 46, color: '#FFFFFF', align: 'center' }, //玩家位「60分」「不叫」（§6.6） CALL_BIG: { fontSize: 52, color: '#FFD24A', align: 'center' }, //自己叫分大字（§6.8） - SCORE_BIG: { fontSize: 56, color: '#FFFFFF', align: 'center' }, //结算总分大字（§6.9） + //结算总分大字原用 SCORE_BIG（§6.9），2026-08-27 改为多帧图数字精灵（NUM_STYLE.RESULT_WIN/RESULT_LOSE）， + //不再是文字精灵，SCORE_BIG 无消费者，移除（避免留一个没人用的样式常量） ASET_COUNT: { fontSize: 20, color: '#FFFFFF', align: 'center' }, //底栏「1/4 局」（§6.5） ROOM_OPT: { normal: { fontSize: 18, color: '#DDDDDD' }, //建房选项文字（§6.9b） selected: { fontSize: 18, color: '#E8873A' } }, diff --git a/client/js/01_SubGame/codes/config/Layout_Action.js b/client/js/01_SubGame/codes/config/Layout_Action.js index 2af8b4e..000d95f 100644 --- a/client/js/01_SubGame/codes/config/Layout_Action.js +++ b/client/js/01_SubGame/codes/config/Layout_Action.js @@ -18,11 +18,12 @@ EQW_Layout.CALL_BTN_GRID = { anchor: 'center', fillOrder: 'row' }; -//档位分数数字：贴对应档位按钮居中。CALL_BTN_1..14 是 14 个固定精灵，但本节点是共用模板， +//档位分数数字（多帧图数字精灵）：贴对应档位按钮居中。CALL_BTN_1..14 是 14 个固定精灵，但本节点是共用模板， //target 由调用方按第几档注入（不预置单一 target）。 //宽度随位数变化（SpriteManager.setNumberImage 会按【字符数 × charWidth】自动改精灵宽）， //故 w 留到运行时注入；高度恒为单字高，取 NUM_STYLE.CALL_SCORE.charHeight（SSOT，2026-08-26） -EQW_Layout.CALL_BTN_SCORE_TEXT = { +//节点名去掉 _TEXT 后缀改为 _NUM：驱动的是数字图精灵而非文字精灵（2026-08-27） +EQW_Layout.CALL_BTN_SCORE_NUM = { kind: 'attach', targetKind: 'sprite', hAlign: 'center', vAlign: 'middle', offsetY: 4, h: EQW_Layout.NUM_STYLE.CALL_SCORE.charHeight, runtime: ['target', 'w'] diff --git a/client/js/01_SubGame/codes/config/Layout_Result.js b/client/js/01_SubGame/codes/config/Layout_Result.js index a38067e..522aee3 100644 --- a/client/js/01_SubGame/codes/config/Layout_Result.js +++ b/client/js/01_SubGame/codes/config/Layout_Result.js @@ -24,10 +24,13 @@ EQW_Layout.RESULT_GLOW = { } }; -//三家总分大字：贴对应光晕居中。target 直接指向光晕精灵键（固定，非动态） -EQW_Layout.RESULT_SCORE_TEXT = { +//三家总分大字（多帧图数字精灵，非文字精灵，2026-08-27）：贴对应光晕居中。 +//target 直接指向光晕精灵键（固定，非动态）；高度恒为单字高，取 NUM_STYLE.RESULT_WIN.charHeight +//（与 NUM_STYLE.RESULT_LOSE 相同，SSOT）；宽度随位数变化，留到运行时注入 +//节点名去掉 _TEXT 后缀改为 _NUM：与 CALL_BTN_SCORE_NUM 同一理由，_TEXT 会让人误以为是文字精灵 +EQW_Layout.RESULT_SCORE_NUM = { kind: 'attach', targetKind: 'sprite', hAlign: 'center', vAlign: 'middle', - textStyle: EQW_Layout.TEXT_STYLE.SCORE_BIG, runtime: ['w', 'h'], + h: EQW_Layout.NUM_STYLE.RESULT_WIN.charHeight, runtime: ['w'], bySeat: { LEFT: { target: 'RESULT_GLOW_LEFT' }, RIGHT: { target: 'RESULT_GLOW_RIGHT' }, diff --git a/client/js/01_SubGame/codes/config/Layout_Table.js b/client/js/01_SubGame/codes/config/Layout_Table.js index da65721..33dc71f 100644 --- a/client/js/01_SubGame/codes/config/Layout_Table.js +++ b/client/js/01_SubGame/codes/config/Layout_Table.js @@ -123,9 +123,12 @@ EQW_Layout.P_STATUS_TEXT = { } }; -//倒计时：三家都有 +//倒计时：三家都有（多帧图数字精灵，纯秒数无后缀，见 NUM_STYLE.COUNTDOWN）。 +//高度恒为单字高，取 NUM_STYLE.COUNTDOWN.charHeight（SSOT）；宽度随位数变化 +//（SpriteManager.setNumberImage 按【字符数 × charWidth】自动改精灵宽），故 w 留到运行时注入 EQW_Layout.P_COUNTDOWN = { - kind: 'point', w: 75, h: 70, + kind: 'point', h: EQW_Layout.NUM_STYLE.COUNTDOWN.charHeight, + runtime: ['w'], bySeat: { LEFT: { x: 195, y: 165 }, RIGHT: { x: 1010, y: 165 }, diff --git a/client/js/01_SubGame/codes/config/Sprites_Action.js b/client/js/01_SubGame/codes/config/Sprites_Action.js index dde6a4f..56d1680 100644 --- a/client/js/01_SubGame/codes/config/Sprites_Action.js +++ b/client/js/01_SubGame/codes/config/Sprites_Action.js @@ -147,15 +147,20 @@ EQW_Sprites.OperationBarView = { }; //倒计时：左上家/右上家/自己 三处操作区倒计时（清单 §5.4，Layer 104 群组 224） +// +//三处均为【多帧图数字精灵】（非文字精灵）：玩家视线焦点、视觉权重最高的数字，参考图是带描边/渐变 +//的美术字，文字精灵做不出这个效果。资源 EQW_Images.NUM_COUNTDOWN（16 帧固定帧序），纯秒数无后缀。 +//显示用 SpriteManager.setNumberImage(spriteId, '15', charWidth)，charWidth 见 +//EQW_Layout.NUM_STYLE.COUNTDOWN.charWidth（2026-08-27，与 NUM_STYLE.COUNTDOWN 一起落地） EQW_Sprites.CountdownView = { Layer: EQW_Layers.ACTION, //104 Countdown: { id: EQW_Groups.COUNTDOWN, //224 - CD_LEFT: 1150, //文字：左上家位倒计时 - CD_RIGHT: 1151, //文字：右上家位倒计时 - CD_SELF: 1152 //文字：自己操作区倒计时 + CD_LEFT: 1150, //多帧图数字精灵：左上家位倒计时 + CD_RIGHT: 1151, //多帧图数字精灵：右上家位倒计时 + CD_SELF: 1152 //多帧图数字精灵：自己操作区倒计时 } }; diff --git a/client/js/01_SubGame/codes/config/Sprites_Result.js b/client/js/01_SubGame/codes/config/Sprites_Result.js index 6ea9028..5b3a1a4 100644 --- a/client/js/01_SubGame/codes/config/Sprites_Result.js +++ b/client/js/01_SubGame/codes/config/Sprites_Result.js @@ -25,7 +25,11 @@ EQW_Sprites.AsetResultView = { RESULT_GLOW_RIGHT: 1803, RESULT_GLOW_SELF: 1804, - //—— 三家总分文字（aset.seatlist[i].grade）—— + //—— 三家总分（aset.seatlist[i].grade），多帧图数字精灵，正分橙带 `+`、负分蓝带 `-`， + // 资源 EQW_Images.NUM_RESULT_WIN（赢）/ NUM_RESULT_LOSE（输），按符号二选一绑资源， + // 显示用 SpriteManager.setNumberImage(spriteId, '+20', charWidth)，charWidth 见 + // EQW_Layout.NUM_STYLE.RESULT_WIN/RESULT_LOSE——与 ACC_TPL_SCORE_NUM（1914，大局结算总分） + // 同一套资源与用法，两处结算得分显示保持一致（2026-08-27 由文字精灵改为数字图精灵）—— RESULT_SCORE_LEFT: 1805, RESULT_SCORE_RIGHT: 1806, RESULT_SCORE_SELF: 1807, diff --git a/client/tests/test_constants.js b/client/tests/test_constants.js index 31f8966..37a36aa 100644 --- a/client/tests/test_constants.js +++ b/client/tests/test_constants.js @@ -342,7 +342,13 @@ t.eq('NUM_STYLE 资源键存在且字段合法', numStyleProblems, []); // 引用 NUM_STYLE 的布局节点必须与样式同源（SSOT：数值只在 LayoutConstants 定义一处， // 有人在 Layout_Action.js 里手抄一个不同的数就在这里变红）。 // 注意 w 不在此列：setNumberImage 会按【字符数 × charWidth】自动改精灵宽，故 w 由运行时注入 -[['CALL_BTN_SCORE_TEXT', 'CALL_SCORE'], ['MAIN_SUIT_COUNT', 'MAIN_SUIT_COUNT']].forEach(pair => { +[ + ['CALL_BTN_SCORE_NUM', 'CALL_SCORE'], + ['MAIN_SUIT_COUNT', 'MAIN_SUIT_COUNT'], + ['P_COUNTDOWN', 'COUNTDOWN'], + ['RESULT_SCORE_NUM', 'RESULT_WIN'], + ['RESULT_SCORE_NUM', 'RESULT_LOSE'] +].forEach(pair => { const node = EQW_Layout[pair[0]]; const st = EQW_Layout.NUM_STYLE[pair[1]]; t.eq(pair[0] + '.h 与 NUM_STYLE.' + pair[1] + '.charHeight 同源', node.h, st.charHeight); diff --git a/docs/client/development-guide/02-渲染与UI组件体系.md b/docs/client/development-guide/02-渲染与UI组件体系.md index 8b118d1..7a06d7e 100644 --- a/docs/client/development-guide/02-渲染与UI组件体系.md +++ b/docs/client/development-guide/02-渲染与UI组件体系.md @@ -77,7 +77,7 @@ ID 必须与编辑器中实际存在的精灵**完全一致**。超范围 → > ⚠️ **最容易踩的坑：显示多位数字时拆成多个精灵，或用 `setFrame` 逐位切。** > `setFrame` 是"整个精灵显示第 N 帧"，**一个精灵一次只显示一位**。有人据此把两位数拆成"十位精灵 + 个位精灵"，三位数拆三个——精灵数随位数线性膨胀，布局、显隐、清理全要按位处理（十位为 0 还得单独隐藏），位数一变就得重排。 > **平台早就给了 `setNumberImage`，一个精灵显示整串，别再造这个轮子。** -> 真实事故：某次评审误判"一个精灵只能显示一位"，先把选主张数拆成十位/个位 8 个精灵，随后又差点为此新造一套"图集叠绘"渲染器——直到发现 `SpriteManager` 第 1154 行本来就有这个接口。 +> 真实事故：某次评审误判"一个精灵只能显示一位"，先把选主张数拆成十位/个位 8 个精灵，随后又差点为此新造一套"图集叠绘"渲染器——直到发现 `core/SpriteManager.js` 的 `setNumberImage` 本来就有这个接口。 > **判据一句话：值可能超过一个字符，用 `setNumberImage`，既不拆精灵也不用 `setFrame`。** **`setNumberImage` 怎么工作**（读实现，不要凭印象）：它把文本里的符号编码后设给精灵的 TEXT 属性，由**引擎按字符逐帧渲染**（帧号由字符直接换算），并把精灵宽度设为 **`字符数 × charWidth`**。所以： diff --git a/docs_dev/二七王-UI资源与精灵清单.md b/docs_dev/二七王-UI资源与精灵清单.md index 14c694c..6fdebc5 100644 --- a/docs_dev/二七王-UI资源与精灵清单.md +++ b/docs_dev/二七王-UI资源与精灵清单.md @@ -977,6 +977,7 @@ EQW_RoomOptions = { - **只做展示，不触发任何操作**（design §11 / 协议 §0.3）：倒计时归零后**不自动叫分/选主/埋牌/出牌**，也不判负、不跳过。前端**不得**在归零时做任何乐观界面推进（不跳阶段、不清控制权），一切仍等服务端推送。 - **归零后停在 `0` 继续显示，不隐藏**：协议 §0.3 明确归零不触发任何动作、牌局原地等待该玩家；隐藏会被误读为「已超时/已跳过」。 - 精灵：群组 224，号段 1150–1159。 +- **精灵类型（2026-08-27 订正）**：3 个倒计时精灵均为**多帧图数字精灵**（非文字精灵）——玩家视线焦点、视觉权重最高的数字，参考图是带描边/渐变的美术字，文字精灵做不出这个效果。显示走 `SpriteManager.setNumberImage`，资源 `NUM_COUNTDOWN`（§3.6），纯秒数无后缀。见 §5.4 / §6.8。 ### 2.5 自己的主牌统计 + 余主公示（他家）【图：多张】 @@ -1347,9 +1348,9 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推 | | 1711 | `PLAY_BTN_SUBMIT_TEXT` | 文字 | —— | —— | | | 1712 | `PLAY_BTN_TIP` | 图片 | `提示`（出牌阶段必备） | `BTN_TIP` | | | 1713 | `PLAY_BTN_TIP_TEXT` | 文字 | 按钮文案 | —— | -| **224** 倒计时 | 1150 | `CD_LEFT` | 文字 | 左上家位倒计时 | —— | -| | 1151 | `CD_RIGHT` | 文字 | 右上家位倒计时 | —— | -| | 1152 | `CD_SELF` | 文字 | 自己操作区倒计时 | —— | +| **224** 倒计时（2026-08-27 订正：由文字精灵改为多帧图数字精灵，见 §2.4/§6.8） | 1150 | `CD_LEFT` | **多帧图数字精灵** | 左上家位倒计时 | `NUM_COUNTDOWN`（16 帧）+ `NUM_STYLE.COUNTDOWN.charWidth` | +| | 1151 | `CD_RIGHT` | **多帧图数字精灵** | 右上家位倒计时 | `NUM_COUNTDOWN`（16 帧）+ `NUM_STYLE.COUNTDOWN.charWidth` | +| | 1152 | `CD_SELF` | **多帧图数字精灵** | 自己操作区倒计时 | `NUM_COUNTDOWN`（16 帧）+ `NUM_STYLE.COUNTDOWN.charWidth` | ### 5.5 Layer 105 · 桌面浮层（群组 230） @@ -1371,7 +1372,7 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推 | 1800 | `RESULT_BOTTOM_PANEL` | 图片 | 底牌区面板底 | `PANEL_BOTTOM_CARDS` | | 1801 | `RESULT_BOTTOM_TEXT` | 文字 | `叫分{multiple}子 底牌 {grade1}x{bottom.multiple}` | —— | | 1802–1804 | `RESULT_GLOW_LEFT/RIGHT/SELF` | 图片 ×3 | 三家分数光晕 | `GLOW_RESULT` 帧1赢/帧2输 | -| 1805–1807 | `RESULT_SCORE_LEFT/RIGHT/SELF` | 文字 ×3 | 三家总分（`aset.seatlist[i].grade`） | —— | +| 1805–1807 | `RESULT_SCORE_LEFT/RIGHT/SELF` | **多帧图数字精灵** ×3（2026-08-27 由文字精灵改，见 §1.9/§6.9） | 三家总分（`aset.seatlist[i].grade`），正分橙带 `+`/负分蓝带 `-`，与 `ACC_TPL_SCORE_NUM`（1914）同一套资源与用法 | `NUM_RESULT_WIN`（赢）/ `NUM_RESULT_LOSE`（输）+ `NUM_STYLE.RESULT_WIN/RESULT_LOSE.charWidth` | | 1808–1810 | `RESULT_JF_LEFT/RIGHT/SELF` | 文字 ×3 | 捡分子数得分 `grade_jf`【T-13】 | —— | | 1811–1813 | `RESULT_AW_LEFT/RIGHT/SELF` | 文字 ×3 | 算奖得分 `grade_aw`【T-13】 | —— | | ~~1814~~ | ~~`RESULT_JUDGE_TEXT`~~ | —— | **不需要**：结算面板不显示判定文字，改由动画呈现（§1.8） | —— | @@ -1690,7 +1691,7 @@ CARD_SIZE: { | `主N` 角标 | `attach` | `target:头像框, corner:bottomLeft, offsetX:0, offsetY:6, w:40 h:19` | | `对N` 角标 | `attach` | `target:主N角标, hAlign:right, vAlign:middle, offsetX:44, offsetY:0` | | 状态文字（`60分`/`不叫`） | `point` | `bySeat{ LEFT:{x:170,y:165}, RIGHT:{x:980,y:165} }`，`w:130 h:70`，`textStyle{fontSize:46, align:center}` | -| 倒计时 | `point` | `bySeat{ LEFT:{x:195,y:165}, RIGHT:{x:1010,y:165}, SELF:{x:445,y:345} }`，`w:75 h:70` | +| 倒计时（多帧图数字精灵，2026-08-27 订正） | `point` | `bySeat{ LEFT:{x:195,y:165}, RIGHT:{x:1010,y:165}, SELF:{x:445,y:345} }`，`h:NUM_STYLE.COUNTDOWN.charHeight(60)`；`w` 运行时注入（1–2 位数字，`setNumberImage` 按字符数 × `charWidth` 自动改宽） | **提示气泡的朝向与位置**（资源 `BUBBLE_TISHI` 6 帧，§3.7）： @@ -1766,7 +1767,7 @@ CARD_SIZE: { | 底牌面板底 | `point` | `x:430 y:140 w:420 h:148` | | 底牌说明文字 | `attach` | `target:底牌面板底, hAlign:center, vAlign:bottom, offsetY:-14` | | **三家分数光晕** | `point` | `bySeat{ LEFT:{x:175,y:150}, RIGHT:{x:865,y:150}, SELF:{x:490,y:340} }`，`w:225 h:100` | -| 三家总分大字 | `attach` | `target:对应光晕, hAlign:center, vAlign:middle`，`textStyle{fontSize:56, align:center}` | +| 三家总分大字（多帧图数字精灵，2026-08-27 由文字精灵改，见 §1.9/§5.6） | `attach` | `target:对应光晕, hAlign:center, vAlign:middle`，`h:NUM_STYLE.RESULT_WIN.charHeight(62)`（与 `RESULT_LOSE` 相同）；`w` 运行时注入 | | 三家 `牌局分` | `attach` | `target:对应光晕, hAlign:left, vAlign:bottom, offsetX:-15, offsetY:24` | | 三家 `冲关分` | `attach` | `target:对应光晕, hAlign:right, vAlign:bottom, offsetX:15, offsetY:24` | | `冲关牌型` 按钮 | `point` | `x:535 y:515 w:183 h:63` |