二七王：UI 清单增补布局配置规范，并据 4 张新/改参考图更新
新增/更新的参考图带来的确定项： - 小局结算.png 更新：两个小字标签定为「牌局分」(grade_jf) /「算奖分」(grade_aw)， 关闭 T-13；新增「算奖牌型」「下一局」两个按钮。 - 算奖牌型显示.png：算奖明细走独立的半透遮罩叠加层（aset.seatlist[i].cards）， 关闭 T-14。 - 自己是闲家时的踩有分没分按钮.png：提示入口 = 底栏三按钮，占用庄标区域、 与庄标互斥；气泡资源定为 3x2 六帧，按「头像在气泡哪一侧」选箭头朝向， 关闭 D-5。 - 创建房间选项参考图：属他游戏内容，只取视觉范式；二七王实际为 4 行 （局数/扣卡/玩法多选/查牌），无人数行，D-1 降级为「缺定稿」。 - 左上家出牌区确认为右上家的左右镜像，关闭 D-12。 §6 由「布局坐标表」重写为「布局配置规范与配置清单」： - 所有布局参数一律外提为配置，业务代码零裸值（工程总则 §6 / client 02 §2）。 - 定义 5 种布局器 point / line / fan / grid / attach，参数名直接对齐框架 AlignmentUtils 的入参，配置可原样喂入、零转换。 - fan 给出唯一的自适应间距算法；bySeat 表达三个显示位的差异； 另有 textStyle 预设与 CARD_SIZE 尺寸档，改一处全局跟随。 - 补充配置文件组织与「与平台 PLAYER_INFO_LAYOUT 坐标一致性」的衔接要求。 待办变化：关闭 T-1/T-13/T-14 与 D-5/D-12，新增 T-22..T-28。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+452
-113
@@ -6,7 +6,7 @@
|
||||
>
|
||||
> **权威源**：玩法规则以 `server/games/erqiwang/docs/design/design.md` 为准；下发字段以 `server/games/erqiwang/docs/protocol/packet_protocol.md` 为准；前端规范以 `docs/client/development-guide/` 为准。本文只做「规则/协议 → 界面资源」的映射，**不重新定义规则**。
|
||||
>
|
||||
> **参考图**：`./uiref/*.png`，共 9 张，设计分辨率 1280×720。
|
||||
> **参考图**：`./uiref/*.png`，共 12 张，设计分辨率 1280×720。
|
||||
|
||||
---
|
||||
|
||||
@@ -23,7 +23,14 @@
|
||||
- [3. 图片资源总表](#3-图片资源总表)
|
||||
- [4. 声音资源总表](#4-声音资源总表)
|
||||
- [5. 精灵结构表](#5-精灵结构表)
|
||||
- [6. 布局坐标表](#6-布局坐标表)
|
||||
- [6. 布局配置规范与配置清单](#6-布局配置规范与配置清单)
|
||||
- [6.0 与框架 AlignmentUtils 的对齐](#60-与框架-alignmentutils-的对齐)
|
||||
- [6.1 五种布局器（kind）](#61-五种布局器kind)
|
||||
- [6.2 座位变体 bySeat](#62-座位变体-byseat)
|
||||
- [6.3 文字样式 / 6.4 牌尺寸档](#63-文字样式-textstyle)
|
||||
- [6.5–6.9 各区配置清单](#65-常驻区配置)
|
||||
- [6.10 配置文件组织](#610-配置文件组织)
|
||||
- [6.11 与平台布局配置的衔接](#611-与平台布局配置的衔接)
|
||||
- [7. 待补充清单](#7-待补充清单)
|
||||
|
||||
---
|
||||
@@ -34,7 +41,7 @@
|
||||
|
||||
| 项 | 值 | 来源 |
|
||||
| --- | --- | --- |
|
||||
| 设计分辨率 | **1280 × 720** | `client/output/gameabc_Project.json` `ScreenWidth/ScreenHeight`；9 张参考图均为此尺寸 |
|
||||
| 设计分辨率 | **1280 × 720** | `client/output/gameabc_Project.json` `ScreenWidth/ScreenHeight`；11 张牌桌参考图均为 1280×720；建房参考图为局部截图，不含整屏尺寸 |
|
||||
| 适配模式 | `ScreenFitMode: 1` | 同上 |
|
||||
| 帧率 | 30 fps | 同上 |
|
||||
| 玩家数 | **3 人** | design §2（三家各摸 28 张） |
|
||||
@@ -265,26 +272,49 @@ var CARD_BACK_FRAME = 55; // 牌背（二七王固定用牌背
|
||||
→ 出牌对局(§1.7) → 末轮扣底 + 小局结算(§1.8) → 大局结算(§1.9) → 解散(§1.10) → 重连(§1.11)
|
||||
```
|
||||
|
||||
### 1.1 建房 / 房间设置 【待设计】
|
||||
### 1.1 建房 / 房间设置 【图：创建房间选项的UI参考内容根据实际二七王游戏改动.png（**样式范式，非内容**）】
|
||||
|
||||
**平台提供界面骨架 + 确认按钮（精灵 25）；子游戏提供规则选项区。**
|
||||
|
||||
要渲染 5 个开关行，对应 `roomtype` 定长位串（协议 §0.5）：
|
||||
> ⚠️ 参考图是**另一个游戏**的建房选项（局数 8/16/24、人数 2/3/4、霸王 ×2/×4 等，二七王都没有）。
|
||||
> 如文件名所示：**只照搬视觉范式与控件样式，内容一律按二七王的 `roomtype` 重写**。
|
||||
|
||||
| 位 | 选项 | `'0'` | `'1'` | 附带展示 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 0 | 局数 | 6 局 | 12 局 | 需联动显示房卡消耗 |
|
||||
| 1 | 扣卡方式 | 房主扣卡 | AA 每人扣卡 | 同上 |
|
||||
| 2 | 傍王 | 关 | 开 | design §8.3 |
|
||||
| 3 | 爬坡 | 常规算子 | 爬坡 | design §7.3 |
|
||||
| 4 | 查牌模式 | 可查牌 | 不查牌 | design §9 |
|
||||
#### 视觉范式（照搬）
|
||||
|
||||
房卡消耗联动（协议 §0.5）：房主扣卡 6 局 = 2 张 / 12 局 = 4 张；AA 制 6 局 = 每人 1 张 / 12 局 = 每人 2 张。
|
||||
- **行式布局**：每行 = 左侧标题（青绿色粗体，右对齐）+ 右侧若干选项，等距分布。
|
||||
- **两种控件**：
|
||||
- **单选圆钮**：`◉` 选中（橙色实心圆环）/ `◯` 未选中（灰色空心圆环）；**选中项的文字同步变橙色**。
|
||||
- **多选方框**：`▣` 浅绿方块，选中/未选中两态。
|
||||
- **附注文字**：灰色小字跟在同一行末尾（参考图的 `【3张/人】`），二七王用来显示房卡消耗。
|
||||
- 多选行可折行（参考图「玩法」行为 2 行 × 4 列）。
|
||||
|
||||
- 交互：点击 25 号精灵 → 拼 `roomtype` 串 → `Net.Send_create_room({agentid, playerid, gameid, roomtype})`。
|
||||
- 精灵：群组 250，号段 2050–2099。
|
||||
- 资源：选项勾选框（2 帧：未选 / 已选）、选项行底、说明文字。
|
||||
- **注意**：`roomtype` 的拼串必须只在**一处**实现（对应服务端 `class.config.js` `parse()` 的 SSOT 要求），不得在多处按下标硬拼。
|
||||
#### 内容（二七王实际，对应 `roomtype` 5 位，协议 §0.5）
|
||||
|
||||
| 行 | 标题 | 控件 | 选项 | `roomtype` 位 | design |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 1 | 局数 | 单选 | **6 局** / 12 局 | 位 0 | §10.1 |
|
||||
| 2 | 扣卡 | 单选 | **房主扣卡** / AA 每人扣卡 ＋ 附注房卡数 | 位 1 | §10.1 |
|
||||
| 3 | 玩法 | **多选** | 傍王、爬坡（两者可同时勾选，互不冲突） | 位 2、位 3 | §8.3 / §7.3 / §10.3 |
|
||||
| 4 | 查牌 | 单选 | **可查牌** / 不查牌 | 位 4 | §9 / §10.2 |
|
||||
|
||||
（加粗为缺省值，即 `roomtype = "00000"`。）
|
||||
|
||||
**没有「人数」行**——二七王固定 3 人（design §2），不给玩家选。参考图里的「人数」「霸王」两行**不要照抄**。
|
||||
|
||||
**房卡消耗联动**（协议 §0.5，随「局数 + 扣卡」两行实时变化）：
|
||||
|
||||
| 扣卡方式 | 6 局 | 12 局 |
|
||||
| --- | --- | --- |
|
||||
| 房主扣卡 | 房主 2 张 | 房主 4 张 |
|
||||
| AA 每人扣卡 | 每人 1 张 | 每人 2 张 |
|
||||
|
||||
#### 实现要点
|
||||
|
||||
- 交互：点击平台约定的 25 号精灵 → 拼 `roomtype` 串 → `Net.Send_create_room({agentid, playerid, gameid, roomtype})`。
|
||||
- 精灵：群组 250，号段 2050–2099；挂在平台创建房间界面所在图层（T-3）。
|
||||
- 资源：单选圆钮（2 帧）、多选方框（2 帧）、行底/标题文字。
|
||||
- **`roomtype` 的拼串必须只在一处实现**——与服务端 `class.config.js` `parse()` 对称的 SSOT 要求，不得在多处按下标硬拼。
|
||||
- 房卡数**不要硬编码在 UI 代码里**，做成「局数 × 扣卡方式 → 房卡数」的配置表（工程总则 §6）。
|
||||
|
||||
### 1.2 发牌 `fapai` 【图：等待叫分.png】
|
||||
|
||||
@@ -426,12 +456,31 @@ var CARD_BACK_FRAME = 55; // 牌背（二七王固定用牌背
|
||||
|
||||
**牌型标签**（参考图 `出牌2.png` 左下角橙色 `拖拉机`）：需要一套标签资源，至少含 `单张` / `对子` / `拖拉机` / `甩牌` / `毙` / `垫`【待确认 T-11：标签种类以美术稿为准；「毙/垫/混合出牌」是否也要标】。
|
||||
|
||||
**闲家提示 `tishi`**（design §11）：
|
||||
**闲家提示 `tishi`** 【图：自己是闲家时，底下的踩有分没分按钮.png】（design §11）：
|
||||
|
||||
- 闲家在出牌阶段可向**对家**（另一闲家）发三种提示：`1 = 踩`（我能大过庄家）、`2 = 没分`、`3 = 有分`。
|
||||
- 发送方**收不到成功回执**（协议 §13.7），只有失败才回包 → **前端不得在点击时乐观显示自己发过提示**。
|
||||
- 接收方（对家）收到 `tishi { seat, tip }` → 在发送者的玩家位弹出气泡。
|
||||
- 庄家无对家，不提供此功能。
|
||||
- 需要 3 种气泡资源 + 一个发起入口【待设计：入口在哪、长什么样，参考图未出现】。
|
||||
|
||||
**发起入口**：底栏三个按钮 `踩` `有分` `没分`，**位置就是庄标的位置**——自己是闲家时没有 `庄` 印章，这块区域正好空出来给这三个按钮。
|
||||
|
||||
| 自己的身份 | 底栏该区域显示 |
|
||||
| --- | --- |
|
||||
| 庄家 | `庄` 印章（1 个精灵） |
|
||||
| 闲家 | `踩` `有分` `没分`（3 个按钮） |
|
||||
|
||||
两者**互斥**，同一块区域二选一。注意按钮顺序是 **踩 → 有分 → 没分**，与协议 `tip` 编号（1踩 / 2没分 / 3有分）**不同**，映射不要按位置下标推。
|
||||
|
||||
**气泡资源**：`3 × 2 = 6 帧`。
|
||||
|
||||
| | 箭头向左 | 箭头向右 |
|
||||
| --- | --- | --- |
|
||||
| 踩 | 帧 1 | 帧 4 |
|
||||
| 没分 | 帧 2 | 帧 5 |
|
||||
| 有分 | 帧 3 | 帧 6 |
|
||||
|
||||
**箭头朝向按头像相对气泡的位置选**：头像在气泡**左**侧 → 用**箭头向左**的帧；头像在气泡**右**侧 → 用**箭头向右**的帧。三个座位的取用见 §6.5。
|
||||
|
||||
**报无主**（design §5.4.2 / §9）：
|
||||
- 任一玩家主牌出空 → 服务端 `baozhu = 1` 并整表刷新 `seatlist`；
|
||||
@@ -472,10 +521,29 @@ var CARD_BACK_FRAME = 55; // 牌背（二七王固定用牌背
|
||||
- `multiple` / `grade1` / `grade2` **仅闲家扣底时才有** → 展示 `底牌 20 × 4` 之类的翻倍算式。
|
||||
- 参考图底牌面板下方文字为 `叫分2子 底牌 20x0`，即 `叫分{multiple}子 底牌 {grade1}x{multiple}`【待确认 T-12：`x0` 说明该局闲家未扣底，此时的文案规则待定】。
|
||||
|
||||
**三家结算数字**（`aset.seatlist`，每家）：
|
||||
- 大字总分 = `grade`（本局总分，`+20` 橙色 / `-10` 蓝色）
|
||||
- 下方两个小字 = `grade_jf`（捡分子数得分）与 `grade_aw`（算奖得分）
|
||||
- 参考图两个标签都写作 `牌局分`，属 mock 重复【待确认 T-13：两个标签的正式文案】
|
||||
**三家结算数字**（`aset.seatlist`，每家两行）：
|
||||
|
||||
| 行 | 内容 | 字段 | 样式 |
|
||||
| --- | --- | --- | --- |
|
||||
| 大字 | 本局总分 | `grade` | `+20` 橙色（赢）/ `-10` 蓝色（输），底带光晕 |
|
||||
| 小字左 | **`牌局分 N`** | `grade_jf`（捡分子数得分） | 白标签 + 数值 |
|
||||
| 小字右 | **`算奖分 N`** | `grade_aw`（算奖得分） | 白标签 + 数值 |
|
||||
|
||||
> 两个标签的文案已由更新后的 `小局结算.png` 确定（原图两个都写「牌局分」是 mock 重复，现已修正为 `牌局分` / `算奖分`）。
|
||||
|
||||
**两个按钮**：
|
||||
|
||||
| 按钮 | 位置 | 作用 |
|
||||
| --- | --- | --- |
|
||||
| `算奖牌型`（蓝色） | 中央偏左 | 打开算奖牌型叠加层（见下） |
|
||||
| `下一局`（金黄） | 中央偏右 | 发 `zhunbei { seat }` 进入下一局（§1.12） |
|
||||
|
||||
**算奖牌型叠加层** 【图：算奖牌型显示.png】：
|
||||
|
||||
点 `算奖牌型` 后，在结算面板之上盖一层**半透黑遮罩**，三家各展示自己的算奖相关牌（`aset.seatlist[i].cards`，即王 / 冲关牌），资源用 `CARD_FACE_L`、重叠排列。`下一局` 按钮在遮罩层上**继续可见可点**，`算奖牌型` 按钮本身被遮住。再点一次或点遮罩空白处关闭【待确认 T-22：关闭方式】。
|
||||
|
||||
- 三家牌位：左上家、右上家在各自头像内侧；自己在中央偏下。
|
||||
- 布局配置见 §6.6。
|
||||
|
||||
**`aset` 其余字段的用途**：
|
||||
|
||||
@@ -484,9 +552,10 @@ var CARD_BACK_FRAME = 55; // 牌背（二七王固定用牌背
|
||||
| `banker` / `call` / `flower` | 顶部信息条最终态 |
|
||||
| `multiple` | 基础子数 |
|
||||
| `grade` | 闲家最终捡分（含扣底）→ 顶部 `抓分` 列 |
|
||||
| `upgrade` | **判定倍率（带符号）**：`3` 大光 / `2` 小光 / `1` 过庄 / `-N` 升 N 级（倒庄）/ `-99` 投降 / `0` 解散 → 需要一组判定文字或图标：`大光` `小光` `过庄` `升N级` `投降`【待设计】 |
|
||||
| `upgrade` | **判定倍率（带符号）**：`3` 大光 / `2` 小光 / `1` 过庄 / `-N` 升 N 级（倒庄）/ `-99` 投降 / `0` 解散 → 需要一组判定文字或图标：`大光` `小光` `过庄` `升N级` `投降`【待设计 D-8】 |
|
||||
| `bangwang` / `climb` | 本局规则开关，用于结算面板上标注 |
|
||||
| `cards` / `chongguan` / `wang` / `naward` | 算奖明细展示【待确认 T-14：结算面板是否展示算奖明细，参考图未体现】 |
|
||||
| **`cards`** | **算奖牌型叠加层**的牌（见上） |
|
||||
| `chongguan` / `wang` / `naward` | 常规算奖奖数 / 王数 / 总奖数 —— 是否在叠加层上并列显示数字【待确认 T-23】 |
|
||||
|
||||
**投降结算**：只有 `aset`，无 `chupai`、无 `bottom` → 结算面板必须容忍**底牌区缺失**，不能因为读不到 `bottom.cards` 就崩或显示空框。
|
||||
|
||||
@@ -577,11 +646,12 @@ var CARD_BACK_FRAME = 55; // 牌背（二七王固定用牌背
|
||||
|
||||
三家各一个区域，展示本轮打出的牌（资源 `CARD_FACE_M`）。
|
||||
|
||||
- 自己：中央偏下，x≈565–735, y≈265–420
|
||||
- 右上家：x≈945–1100, y≈120–280
|
||||
- 左上家：对称位置（参考图未出现，按对称推）
|
||||
- 自己：中央偏下
|
||||
- 右上家（下家）：右上，头像内侧
|
||||
- **左上家（上家）：与右上家左右镜像**——排列方式、牌尺寸、标签位置全部参照右上家，只是 x 方向对称、牌的堆叠朝向相反。已确认无需单独设计稿。
|
||||
- 每张牌可叠加角标：`庄`（橙色斜标）、`大`（大王圆标）等
|
||||
- 区域左下角：**牌型标签**（`拖拉机` 等，§1.7）
|
||||
- 三家的布局参数走同一份配置的 `bySeat` 三个变体，见 §6.5
|
||||
- **每家预置 28 个牌精灵**（= 单次出牌张数上限，甩牌最多可甩满手牌）。号段每家 100 个，容量充裕，因此**不使用动态复制精灵**，避免 `SpriteCopyUtils` 的清理负担。
|
||||
- 精灵：群组 212 / 213 / 214，号段 1300–1599。
|
||||
|
||||
@@ -612,7 +682,8 @@ y≈648–720 深色条。左侧头像/昵称/分数由平台渲染（§0.2）
|
||||
|
||||
| 元素 | 位置（实测估值） | 显隐规则 |
|
||||
| --- | --- | --- |
|
||||
| `庄` 印章 | x≈338–370 | 自己是庄时显示 |
|
||||
| `庄` 印章 | x≈338–370 | **自己是庄**时显示 |
|
||||
| `踩` / `有分` / `没分` 按钮 | x≈335–573（占用同一区域） | **自己是闲家 + 出牌阶段**时显示，与 `庄` 印章互斥（§1.7） |
|
||||
| 局数 `1/4 局` | 居中 x≈635–700 | 常驻，`asetidx / asetcount` |
|
||||
| `明牌` 按钮 | x≈876–950, y≈672–702 | **仅可查牌模式 + 出牌阶段 + 已报无主** |
|
||||
| `已出牌` 按钮 | x≈965–1052 | **仅可查牌模式 + 出牌阶段** |
|
||||
@@ -671,7 +742,9 @@ y≈648–720 深色条。左侧头像/昵称/分数由平台渲染（§0.2）
|
||||
| 537 | `BTN_PLAY` | `出牌` | 2 | 帧1=可出 帧2=置灰 | 157 × 55 |
|
||||
| 538 | `BTN_BOTTOM_FUNC` | 底栏功能钮底（明牌/已出牌/上一轮/底牌共用） | 1 | 深色圆角 | 88 × 30 |
|
||||
| 539 | `BTN_READY` | 准备【T-15】 | 1 | 待设计 | 待定 |
|
||||
| 540 | `BTN_TISHI_ENTRY` | 踩/没分/有分 发起入口【待设计】 | 待定 | 待定 | 待定 |
|
||||
| 540 | `BTN_TISHI` | 底栏 `踩` / `有分` / `没分` 按钮底（三者共用） | 1 | 深色圆角，同 `BTN_BOTTOM_FUNC` 风格但更窄 | 52 × 30 |
|
||||
| 541 | `BTN_NEXT_ASET` | 结算 `下一局` | 1 | 金黄渐变 | 180 × 65 |
|
||||
| 542 | `BTN_AWARD_CARDS` | 结算 `算奖牌型` | 1 | 蓝色渐变 | 183 × 63 |
|
||||
|
||||
### 3.4 标记类
|
||||
|
||||
@@ -698,6 +771,7 @@ y≈648–720 深色条。左侧头像/昵称/分数由平台渲染（§0.2）
|
||||
| 606 | `PANEL_BOTTOM_CARDS` | 结算底牌区面板底 | 1 | 420 × 148 |
|
||||
| 607 | `GLOW_RESULT` | 结算分数光晕背景 | 2 | 帧1=赢(橙) 帧2=输(蓝) | 225 × 100 |
|
||||
| 608 | `BAR_FOOTER` | 底栏深色条 | 1 | 1280 × 72 |
|
||||
| 609 | `MASK_DIM` | 算奖牌型叠加层的半透黑遮罩（可复用于其他弹窗） | 1 | 1280 × 720（纯色可拉伸，出 1 张小图即可） |
|
||||
|
||||
### 3.6 数字与符号
|
||||
|
||||
@@ -714,7 +788,7 @@ y≈648–720 深色条。左侧头像/昵称/分数由平台渲染（§0.2）
|
||||
|
||||
| ID | 键名 | 用途 | 帧数 | 帧说明 | 尺寸 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 651 | `BUBBLE_TISHI` | 踩 / 没分 / 有分 提示气泡 | 3 | 帧1=踩 帧2=没分 帧3=有分（对应 `tip` 1/2/3） | 待定 |
|
||||
| 651 | `BUBBLE_TISHI` | 踩 / 没分 / 有分 提示气泡 | **6**（3×2） | **帧1=踩·箭头向左 帧2=没分·箭头向左 帧3=有分·箭头向左 帧4=踩·箭头向右 帧5=没分·箭头向右 帧6=有分·箭头向右**。帧序内层是 `tip`(1踩/2没分/3有分)、外层是箭头朝向 → `frame = (arrowRight ? 3 : 0) + tip`。**箭头向左 = 头像在气泡左侧**、箭头向右 = 头像在气泡右侧 | 待定 |
|
||||
| 652 | `TXT_BAOZHU` | 「报无主」提示【待设计】 | 1 | 待定 | 待定 |
|
||||
| 653 | `TXT_SHUAICUO` | 「甩错」提示【待设计】 | 1 | 待定 | 待定 |
|
||||
| 654 | `TXT_GRADE_FLOAT` | 捡分飘字底（`20分` 金色） | 1 | 待定 | 待定 |
|
||||
@@ -724,8 +798,9 @@ y≈648–720 深色条。左侧头像/昵称/分数由平台渲染（§0.2）
|
||||
|
||||
| ID | 键名 | 用途 | 帧数 | 帧说明 | 尺寸 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 681 | `CHECKBOX_ROOM_OPT` | 规则选项勾选框 | 2 | 帧1=未选 帧2=已选 | 40 × 40 |
|
||||
| 682 | `ROW_ROOM_OPT` | 选项行底 | 1 | 待定 | 待定 |
|
||||
| 681 | `RADIO_ROOM_OPT` | 建房**单选**圆钮（局数 / 扣卡 / 查牌） | 2 | 帧1=未选（灰色空心环） 帧2=已选（橙色实心环） | 22 × 22 |
|
||||
| 682 | `CHECKBOX_ROOM_OPT` | 建房**多选**方框（玩法：傍王 / 爬坡） | 2 | 帧1=未选（浅绿空方块） 帧2=已选 | 20 × 20 |
|
||||
| 683 | `ROW_ROOM_OPT` | 选项行底（可选，参考图为无底透明） | 1 | —— | 待定 |
|
||||
|
||||
---
|
||||
|
||||
@@ -789,6 +864,12 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推
|
||||
| | 1047 | `BTN_LAST_ROUND_TEXT` | 文字 | —— | —— |
|
||||
| | 1048 | `BTN_BOTTOM_CARDS` | 图片 | `底牌` | `BTN_BOTTOM_FUNC` |
|
||||
| | 1049 | `BTN_BOTTOM_CARDS_TEXT` | 文字 | —— | —— |
|
||||
| | 1050 | `BTN_TISHI_CAI` | 图片 | `踩`（闲家，占庄标区） | `BTN_TISHI` |
|
||||
| | 1051 | `BTN_TISHI_CAI_TEXT` | 文字 | `踩` | —— |
|
||||
| | 1052 | `BTN_TISHI_HAS` | 图片 | `有分` | `BTN_TISHI` |
|
||||
| | 1053 | `BTN_TISHI_HAS_TEXT` | 文字 | `有分` | —— |
|
||||
| | 1054 | `BTN_TISHI_NONE` | 图片 | `没分` | `BTN_TISHI` |
|
||||
| | 1055 | `BTN_TISHI_NONE_TEXT` | 文字 | `没分` | —— |
|
||||
| **202** 左上家标记 | 1100 | `P_LEFT_BANKER` | 图片 | `庄` 印章 | `MARK_BANKER` |
|
||||
| | 1101 | `P_LEFT_ZHU_BG` | 图片 | `主N` 角标底 | `BADGE_ZHU_PAIR` 帧1 |
|
||||
| | 1102 | `P_LEFT_ZHU_TEXT` | 文字 | 剩余主牌数 | —— |
|
||||
@@ -873,9 +954,26 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推
|
||||
| 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` | 文字 | 判定结果（大光/小光/过庄/升N级/投降，据 `aset.upgrade`） | —— |
|
||||
| 1815 | `RESULT_BTN_AWARD` | 图片 | `算奖牌型` 按钮 | `BTN_AWARD_CARDS` |
|
||||
| 1816 | `RESULT_BTN_AWARD_TEXT` | 文字 | 按钮文案 | —— |
|
||||
| 1817 | `RESULT_BTN_NEXT` | 图片 | `下一局` 按钮 | `BTN_NEXT_ASET` |
|
||||
| 1818 | `RESULT_BTN_NEXT_TEXT` | 文字 | 按钮文案 | —— |
|
||||
|
||||
> 底牌 8 张精灵复用 §5.3 群组 215（1258–1265），不在此重复。
|
||||
|
||||
**算奖牌型叠加层**（同 Layer 302，独立群组 **244**，可与群组 240 分别显隐）：
|
||||
|
||||
| 精灵 ID | 键名 | 类型 | 用途 | 资源 / 帧 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 1820 | `AWARD_MASK` | 图片 | 半透黑遮罩（拉伸满屏，兼作点击关闭热区） | `MASK_DIM` |
|
||||
| 1821–1828 | `AWARD_CARD_LEFT_1..8` | 图片 ×8 | 左上家算奖牌 | `CARD_FACE_L` |
|
||||
| 1831–1838 | `AWARD_CARD_RIGHT_1..8` | 图片 ×8 | 右上家算奖牌 | `CARD_FACE_L` |
|
||||
| 1841–1848 | `AWARD_CARD_SELF_1..8` | 图片 ×8 | 自己算奖牌 | `CARD_FACE_L` |
|
||||
| 1851–1853 | `AWARD_COUNT_LEFT/RIGHT/SELF` | 文字 ×3 | 奖数 `naward` 等【T-23】 | —— |
|
||||
|
||||
> 每家预置 **8** 张：常规算奖的最大组合是「四王 + 连对链」，8 张足以覆盖典型展示；若 `cards` 超过 8 张需缩距或分行【待确认 T-24】。
|
||||
> `RESULT_BTN_NEXT`（1817/1818）在遮罩层之上仍需可见可点 —— 其图层内层级须高于 `AWARD_MASK`。
|
||||
|
||||
### 5.7 Layer 303–306 · 其余弹窗 【待设计】
|
||||
|
||||
| 图层 | 群组 | 号段 | 内容 |
|
||||
@@ -885,92 +983,324 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推
|
||||
| 305 | 243 | 2000–2049 | 明牌面板：另两家未出主牌的具体牌面 |
|
||||
| 306 | —— | —— | 解散投票【T-2：是否平台提供】 |
|
||||
|
||||
### 5.8 建房规则选项（群组 250，2050–2099）【待设计】
|
||||
### 5.8 建房规则选项（群组 250，2050–2099）
|
||||
|
||||
5 行开关（局数 / 扣卡 / 傍王 / 爬坡 / 查牌），每行：行底 + 标题文字 + 2 个勾选框 + 2 个选项文字 = 6 精灵 × 5 行 = 30。挂在平台创建房间界面的图层上（T-3）。
|
||||
**4 行**（局数 / 扣卡 / 玩法 / 查牌，§1.1），不是 5 行——傍王与爬坡合并在「玩法」多选行里。
|
||||
|
||||
| 精灵 ID | 键名 | 类型 | 用途 | 资源 / 帧 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 2050–2053 | `ROOM_ROW_TITLE_1..4` | 文字 ×4 | 行标题（局数/扣卡/玩法/查牌），青绿粗体 | —— |
|
||||
| 2054–2055 | `ROOM_RADIO_ASET_1..2` | 图片 ×2 | 局数单选钮（6局 / 12局） | `RADIO_ROOM_OPT` |
|
||||
| 2056–2057 | `ROOM_RADIO_ASET_TEXT_1..2` | 文字 ×2 | 选项文字（选中变橙） | —— |
|
||||
| 2058–2059 | `ROOM_RADIO_CARD_1..2` | 图片 ×2 | 扣卡单选钮（房主 / AA） | `RADIO_ROOM_OPT` |
|
||||
| 2060–2061 | `ROOM_RADIO_CARD_TEXT_1..2` | 文字 ×2 | 选项文字 | —— |
|
||||
| 2062 | `ROOM_CARD_COST_TEXT` | 文字 | 房卡消耗附注（灰色小字，随局数×扣卡联动） | —— |
|
||||
| 2063–2064 | `ROOM_CHECK_RULE_1..2` | 图片 ×2 | 玩法多选框（傍王 / 爬坡） | `CHECKBOX_ROOM_OPT` |
|
||||
| 2065–2066 | `ROOM_CHECK_RULE_TEXT_1..2` | 文字 ×2 | 选项文字 | —— |
|
||||
| 2067–2068 | `ROOM_RADIO_PEEK_1..2` | 图片 ×2 | 查牌单选钮（可查 / 不查） | `RADIO_ROOM_OPT` |
|
||||
| 2069–2070 | `ROOM_RADIO_PEEK_TEXT_1..2` | 文字 ×2 | 选项文字 | —— |
|
||||
|
||||
共 21 个精灵。挂在平台创建房间界面所在图层（T-3）。布局配置见 §6.12。
|
||||
|
||||
---
|
||||
|
||||
## 6. 布局坐标表
|
||||
## 6. 布局配置规范与配置清单
|
||||
|
||||
> ⚠️ **以下坐标全部为参考图（1280×720）的目视实测估值，误差约 ±5px**，用途是给美术和编辑器一个起点，**不是最终值**。最终坐标以设计稿为准；本表在设计稿到位后必须整体复核。
|
||||
> **硬要求：所有布局参数一律外提为配置，业务代码零裸值。**
|
||||
> 位置、大小、排列方式、间距、对齐、朝向、缩放、文字样式——凡是「摆在哪、多大、怎么排」的参数，
|
||||
> 全部写进布局配置文件，代码只读配置。这既是工程总则 §6「配置优先于硬编码」，也是 client 02 §2
|
||||
> 「布局文件是纯数据：无函数、无副作用」的要求。
|
||||
>
|
||||
> ⚠️ 本节所有数值均为参考图（1280×720）目视实测估值，误差约 ±5px，**是给美术和编辑器的起点、不是最终值**。
|
||||
> 设计稿到位后必须整体复核。**但布局器类型（`kind`）与参数结构是设计决定，不随数值变动。**
|
||||
|
||||
### 6.1 常驻
|
||||
### 6.0 与框架 `AlignmentUtils` 的对齐
|
||||
|
||||
| 元素 | x | y | w | h | 参考图 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 顶部信息条 | 486 | 4 | 276 | 68 | 全部 |
|
||||
| 亮牌信息条 | 35 | 400 | 210 | 35 | 全部 |
|
||||
| 底栏 | 0 | 648 | 1280 | 72 | 全部 |
|
||||
| 底栏 · 局数文字 | 635 | 672 | 65 | 26 | 全部 |
|
||||
| 底栏 · `庄` 印章 | 338 | 668 | 32 | 34 | 自己叫分 |
|
||||
| 底栏 · `明牌` | 876 | 672 | 74 | 30 | 庄家埋牌 |
|
||||
| 底栏 · `已出牌` | 965 | 672 | 87 | 30 | 庄家埋牌 |
|
||||
| 底栏 · `上一轮` | 1067 | 672 | 93 | 30 | 庄家埋牌 |
|
||||
| 底栏 · `底牌` | 1172 | 672 | 78 | 30 | 全部 |
|
||||
| 右侧语音钮（平台） | 1210 | 310 | 56 | 56 | 全部 |
|
||||
| 右侧聊天钮（平台） | 1210 | 385 | 56 | 56 | 全部 |
|
||||
参数命名**直接采用框架 `gameabc-framework/ui/AlignmentUtils.js` 的入参名**，配置对象可原样喂进框架方法，中间零转换：
|
||||
|
||||
### 6.2 玩家位
|
||||
| 配置的 `kind` | 落到框架的方法 |
|
||||
| --- | --- |
|
||||
| `line` | `AlignmentUtils.distribute({direction, anchorX, anchorY, count, itemWidth, itemHeight, spacing, anchor})` |
|
||||
| `fan` | 先算出 `spacing`，再走同一个 `AlignmentUtils.distribute` |
|
||||
| `attach`（`corner` 为空） | `AlignmentUtils.alignSpriteToSprite(targetId, spriteId, hAlign, vAlign, offset)` |
|
||||
| `attach`（`corner` 有值） | `AlignmentUtils.alignSpriteCornerTopLeft/TopRight/BottomLeft/BottomRight(targetId, spriteId, offset)` |
|
||||
| `grid` | 逐行调 `distributeHorizontally` |
|
||||
| `point` | 直接 `SpriteManager.setPosition` |
|
||||
|
||||
| 元素 | x | y | w | h |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 左上 · 头像框（平台） | 22 | 122 | 91 | 118 |
|
||||
| 左上 · `庄` 印章 | 120 | 130 | 35 | 38 |
|
||||
| 左上 · `主N` 角标 | 22 | 246 | 40 | 19 |
|
||||
| 左上 · `对N` 角标 | 66 | 246 | 40 | 19 |
|
||||
| 左上 · 状态文字 | 170 | 165 | 130 | 70 |
|
||||
| 左上 · 倒计时 | 195 | 165 | 75 | 70 |
|
||||
| 右上 · 头像框（平台） | 1160 | 122 | 91 | 118 |
|
||||
| 右上 · `庄` 印章 | 1120 | 130 | 35 | 38 |
|
||||
| 右上 · `主N` 角标 | 1160 | 246 | 40 | 19 |
|
||||
| 右上 · `对N` 角标 | 1204 | 246 | 40 | 19 |
|
||||
| 右上 · 状态文字 | 980 | 165 | 130 | 70 |
|
||||
| 自己 · 头像（平台，底栏内） | 22 | 645 | 84 | 53 |
|
||||
对齐常量沿用框架的 `AlignmentUtils.ALIGN`：水平 `left/center/right`、垂直 `top/middle/bottom`。
|
||||
|
||||
> 平台默认 `PLAYER_INFO_LAYOUT.POSITIONS` 为 ind0 南 (6,592)、ind1 东 (1186,85)、ind3 西 (7,59)，与上表不完全一致 → 需在 `01_SubGame_modify.js` 配置区**调整为上表值**（该文件配置区允许改值）。
|
||||
> 精灵锚点**恒在左上角、不可更改**（AlignmentUtils 文件头注释），所有对齐都是基于锚点的换算。配置里写的 `anchorX/anchorY` 是**对齐基准点**，不是精灵左上角坐标。
|
||||
|
||||
### 6.3 中央区（按阶段）
|
||||
### 6.1 五种布局器（`kind`）
|
||||
|
||||
| 阶段 | 元素 | x | y | w | h |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 发牌/叫分 | 暗牌区（8 张背面） | 360 | 110 | 590 | 190 |
|
||||
| 叫分 | 提示条 `70分坐庄才可投降` | 470 | 100 | 345 | 33 |
|
||||
| 叫分 | 面板底 | 355 | 140 | 575 | 170 |
|
||||
| 叫分 | 档位按钮（首个） | 363 | 160 | 74 | 56 |
|
||||
| 叫分 | 档位横向间距 / 行距 | 81 | 80 | —— | —— |
|
||||
| 叫分 | `不叫` 按钮 | 553 | 345 | 184 | 57 |
|
||||
| 叫分 | 自己倒计时 | 445 | 345 | 75 | 57 |
|
||||
| 叫分 | 自己叫分大字（已叫态） | 570 | 320 | 140 | 70 |
|
||||
| 选主 | `亮主` 标题条 | 330 | 315 | 425 | 50 |
|
||||
| 选主 | 花色按钮（首个） | 330 | 373 | 128 | 55 |
|
||||
| 选主 | 按钮横向间距 | 137 | —— | —— | —— |
|
||||
| 选主 | `投降` 按钮 | 878 | 373 | 128 | 55 |
|
||||
| 埋牌 | `提示` 按钮 | 385 | 165 | 180 | 63 |
|
||||
| 埋牌 | 倒计时 | 610 | 165 | 60 | 63 |
|
||||
| 埋牌 | `埋牌 (N/8)` 按钮 | 715 | 165 | 180 | 63 |
|
||||
| 出牌 | 倒计时 | 445 | 345 | 75 | 55 |
|
||||
| 出牌 | `出牌` 按钮 | 555 | 345 | 157 | 55 |
|
||||
| 出牌 | 自己已出牌区 | 565 | 265 | 170 | 155 |
|
||||
| 出牌 | 右上家已出牌区 | 945 | 120 | 155 | 160 |
|
||||
| 出牌 | 捡分飘字 | 570 | 180 | 170 | 55 |
|
||||
| 结算 | 底牌面板 | 430 | 140 | 420 | 148 |
|
||||
| 结算 | 左家分数 | 175 | 150 | 225 | 100 |
|
||||
| 结算 | 右家分数 | 865 | 150 | 225 | 100 |
|
||||
| 结算 | 自己分数 | 490 | 340 | 240 | 100 |
|
||||
每个部件的配置必须声明 `kind`，`kind` 决定它合法的参数集。
|
||||
|
||||
### 6.4 手牌区
|
||||
#### `point` — 定点
|
||||
|
||||
| 形态 | 元素 | x | y | w | h |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 单排 | 整体范围 | 35 | 455 | 1215 | 190 |
|
||||
| 单排 | 单张完整尺寸 | —— | —— | 110 | 190 |
|
||||
| 单排 | 相邻牌 x 间距（36 张时） | 33 | —— | —— | —— |
|
||||
| 双排（埋牌） | 上排（17 张） | 180 | 285 | 928 | 170 |
|
||||
| 双排（埋牌） | 下排（19 张） | 180 | 455 | 928 | 190 |
|
||||
| 通用 | 选中上浮 y 偏移 | —— | **-40** | —— | —— |
|
||||
单个元素放在固定位置。
|
||||
|
||||
> 间距需按实际张数动态计算：`间距 = min(牌宽, (可用宽 - 牌宽) / (张数 - 1))`，具体公式与最小间距下限待定（T-21）。
|
||||
```js
|
||||
{ kind: 'point', x: 486, y: 4, w: 276, h: 68 }
|
||||
// 可选：scale（倍数，业务单位）、opacity（0.0–1.0）
|
||||
```
|
||||
|
||||
#### `line` — 等距排列
|
||||
|
||||
数量可变但**间距固定**的一排（暗牌 8 张、底牌 8 张）。
|
||||
|
||||
```js
|
||||
{ kind: 'line', direction: 'horizontal',
|
||||
anchorX: 655, anchorY: 110, // 对齐基准点
|
||||
itemWidth: 110, itemHeight: 190,
|
||||
spacing: -36, // 负值 = 重叠
|
||||
anchor: 'center' } // left | center | right
|
||||
```
|
||||
|
||||
`count` 由运行时数据给出，不进配置。
|
||||
|
||||
#### `fan` — 自适应压缩排
|
||||
|
||||
张数可变、**总宽受限**、需要动态压缩间距的牌排（手牌、出牌区、算奖牌）。
|
||||
|
||||
```js
|
||||
{ kind: 'fan', direction: 'horizontal',
|
||||
anchorX: 640, anchorY: 455,
|
||||
maxWidth: 1215, // 可用总宽上限
|
||||
itemWidth: 110, itemHeight: 190,
|
||||
spacingMax: 0, // 张数少时的最大间距（0 = 紧贴不重叠）
|
||||
spacingMin: -84, // 张数多时的最大重叠量（负值）
|
||||
anchor: 'center',
|
||||
overlapFrom: 'left' } // left = 右边的牌压在左边的牌之上
|
||||
```
|
||||
|
||||
间距算法（**唯一实现，不散落**）：
|
||||
|
||||
```
|
||||
count <= 1 → spacing 不参与，直接按 anchor 摆一张
|
||||
otherwise → raw = (maxWidth - itemWidth) / (count - 1) - itemWidth
|
||||
spacing = clamp(raw, spacingMin, spacingMax)
|
||||
```
|
||||
|
||||
`overlapFrom` 决定 z 序方向：`'left'` 时后面的牌盖住前面的（自己手牌、右上家）；`'right'` 时反过来（左上家镜像用）。
|
||||
|
||||
#### `grid` — 网格
|
||||
|
||||
固定行列的按钮阵（叫分 14 档 = 7×2）。
|
||||
|
||||
```js
|
||||
{ kind: 'grid',
|
||||
anchorX: 640, anchorY: 160,
|
||||
cols: 7, rows: 2,
|
||||
itemWidth: 74, itemHeight: 56,
|
||||
spacingX: 7, spacingY: 24,
|
||||
anchor: 'center',
|
||||
fillOrder: 'row' } // row = 先填满一行再换行
|
||||
```
|
||||
|
||||
#### `attach` — 相对贴附
|
||||
|
||||
贴在另一个精灵上的从属元素（角标贴按钮、庄标贴头像、气泡贴头像）。
|
||||
|
||||
```js
|
||||
{ kind: 'attach',
|
||||
target: 'P_LEFT_AVATAR', // 目标精灵的键名，不写 ID
|
||||
hAlign: 'right', vAlign: 'top',
|
||||
offsetX: 8, offsetY: -4,
|
||||
corner: 'topRight' } // 可选；有值 = 贴到目标【外侧】角，无值 = 在目标【内部】对齐
|
||||
```
|
||||
|
||||
> `target` 一律写**键名**而非数字 ID——ID 回填时只改一处映射表，配置文件不用动。
|
||||
|
||||
### 6.2 座位变体 `bySeat`
|
||||
|
||||
三个显示位上的同名部件共用一份配置，差异写在 `bySeat` 里；未列出的字段继承外层 base。
|
||||
|
||||
```js
|
||||
PLAY_AREA: {
|
||||
kind: 'fan', direction: 'horizontal', // ← base：三家共同的部分
|
||||
itemWidth: 90, itemHeight: 155, // （牌尺寸、压缩规则三家一致）
|
||||
maxWidth: 170, spacingMax: -35, spacingMin: -62,
|
||||
bySeat: {
|
||||
SELF: { anchorX: 650, anchorY: 265, anchor: 'center', overlapFrom: 'left' },
|
||||
RIGHT: { anchorX: 1022, anchorY: 120, anchor: 'center', overlapFrom: 'left' },
|
||||
LEFT: { anchorX: 258, anchorY: 120, anchor: 'center', overlapFrom: 'right' } // 与 RIGHT 左右镜像
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
座位键固定为 `SELF` / `LEFT` / `RIGHT`（显示位，不是服务端座位号）。服务端座位 → 显示位的换算见 §0.1，**只在一处实现**。
|
||||
|
||||
### 6.3 文字样式 `textStyle`
|
||||
|
||||
文字精灵的样式也进配置，不在代码里写字号颜色。
|
||||
|
||||
```js
|
||||
{ fontSize: 24, color: '#FFFFFF', align: 'center', maxWidth: 130, bold: false }
|
||||
```
|
||||
|
||||
### 6.4 牌尺寸档
|
||||
|
||||
三套牌面尺寸集中定义，各区域**引用档名**，不重复写数字。
|
||||
|
||||
```js
|
||||
CARD_SIZE: {
|
||||
L: { w: 110, h: 190, res: 'CARD_FACE_L' }, // 手牌、暗牌、算奖牌
|
||||
M: { w: 90, h: 155, res: 'CARD_FACE_M' }, // 已出牌区
|
||||
S: { w: 50, h: 70, res: 'CARD_FACE_S' } // 结算底牌
|
||||
}
|
||||
```
|
||||
|
||||
改牌面尺寸只动这一处，所有引用它的区域自动跟随。
|
||||
|
||||
---
|
||||
|
||||
### 6.5 常驻区配置
|
||||
|
||||
| 部件 | kind | 关键参数（实测估值） |
|
||||
| --- | --- | --- |
|
||||
| 顶部信息条底 | `point` | `x:486 y:4 w:276 h:68` |
|
||||
| 顶部 · 花色图标 | `attach` | `target:TOP_INFO_BG, hAlign:left, vAlign:bottom, offsetX:20, offsetY:-8` |
|
||||
| 顶部 · 叫分角标 | `attach` | `target:TOP_CALL_TEXT, corner:topRight, offsetX:4, offsetY:6` |
|
||||
| 顶部 · 抓分角标 | `attach` | `target:TOP_GRADE_TEXT, corner:topRight, offsetX:4, offsetY:6` |
|
||||
| 亮牌信息条 | `point` | `x:35 y:400 w:210 h:35` |
|
||||
| 底栏条 | `point` | `x:0 y:648 w:1280 h:72` |
|
||||
| 底栏 · 局数文字 | `point` | `x:635 y:672 w:65 h:26`，`textStyle{fontSize:20, align:center}` |
|
||||
| 底栏 · 功能钮组（明牌/已出牌/上一轮/底牌） | `line` | `direction:horizontal, anchorY:672, itemHeight:30, spacing:15, anchor:right, anchorX:1250`；**各钮宽度不等**（74/87/93/78），故按 `anchor:right` 从右往左排，宽度逐项给 |
|
||||
| 底栏 · 庄标 | `point` | `x:338 y:668 w:32 h:34` |
|
||||
| 底栏 · 提示按钮组（踩/有分/没分） | `line` | `direction:horizontal, anchorX:335, anchorY:672, itemWidth:52, itemHeight:30, spacing:26, anchor:left` |
|
||||
| 右侧语音钮（平台） | `point` | `x:1210 y:310 w:56 h:56` |
|
||||
| 右侧聊天钮（平台） | `point` | `x:1210 y:385 w:56 h:56` |
|
||||
|
||||
> 底栏功能钮组是**宽度不等**的一排，`line` 的 `itemWidth` 不适用 → 该组用 `line` + 每项独立 `itemWidth` 的变体，或退化为 4 个 `point`【待确认 T-25：是否给 `line` 增加「逐项宽度」支持】。
|
||||
|
||||
### 6.6 玩家位配置（含气泡朝向）
|
||||
|
||||
平台负责头像/昵称/分数，子游戏的附加标记全部 `attach` 到平台头像框上——这样平台布局一调，标记自动跟随。
|
||||
|
||||
| 部件 | kind | 参数 |
|
||||
| --- | --- | --- |
|
||||
| 头像框（平台） | `point` | `bySeat{ LEFT:{x:22,y:122}, RIGHT:{x:1160,y:122}, SELF:{x:22,y:645} }`，`w:91 h:118`（SELF 为 84×53）。**需同步写进 `Game_Modify.PLAYER_INFO_LAYOUT`**（§6.11） |
|
||||
| `庄` 印章 | `attach` | `bySeat{ LEFT:{corner:'topRight',offsetX:7,offsetY:8}, RIGHT:{corner:'topLeft',offsetX:-40,offsetY:8}, SELF:{point x:338 y:668} }` |
|
||||
| `主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` |
|
||||
|
||||
**提示气泡的朝向与位置**（资源 `BUBBLE_TISHI` 6 帧，§3.7）：
|
||||
|
||||
| 气泡属于 | 头像在气泡的 | 用帧 | 贴附方式 |
|
||||
| --- | --- | --- | --- |
|
||||
| 左上家 | **左**侧 | 箭头向左（帧 1–3） | `attach{ target:LEFT头像框, hAlign:right, vAlign:middle, offsetX:+10 }` |
|
||||
| 右上家 | **右**侧 | 箭头向右（帧 4–6） | `attach{ target:RIGHT头像框, hAlign:left, vAlign:middle, offsetX:-10 }`（气泡向左展开） |
|
||||
| 自己 | **左**侧 | 箭头向左（帧 1–3） | `attach{ target:SELF头像, hAlign:right, vAlign:top, offsetX:+10, offsetY:-70 }` |
|
||||
|
||||
帧号计算：`frame = (arrowRight ? 3 : 0) + tip`（`tip`：1踩 / 2没分 / 3有分）。
|
||||
朝向本身也应是**配置项**（`arrowRight: true|false`）而非代码里按座位硬判。
|
||||
|
||||
> 自己发的提示，本人**看不到自己的气泡**（协议 §13.7 不回执，且只转发给对家）。表格里列出 SELF 的气泡配置，是为了「另一闲家看到我的气泡」时——那时在**对方屏幕上**我处于 LEFT 或 RIGHT 位。SELF 位的气泡实际不会出现【待确认 T-26：是否需要给自己一个本地回显】。
|
||||
|
||||
### 6.7 牌区配置
|
||||
|
||||
| 区域 | kind | 参数（实测估值） |
|
||||
| --- | --- | --- |
|
||||
| **自己手牌 · 单排** | `fan` | `anchorX:640 anchorY:455 maxWidth:1215 size:L spacingMax:0 spacingMin:-84 anchor:center overlapFrom:left` |
|
||||
| **自己手牌 · 双排（埋牌）** | `fan` ×2 | 上排 `anchorX:644 anchorY:285 maxWidth:928 size:L`；下排 `anchorX:644 anchorY:455 maxWidth:928 size:L`。**分行策略**：上排 `ceil(n/2)-1`、下排其余【待确认 T-27：17/19 的分法依据】 |
|
||||
| 手牌 · 选中上浮 | —— | `selectedOffsetY: -40`（配置项，不写死） |
|
||||
| **暗牌区** | `line` | `anchorX:655 anchorY:110 size:L spacing:-36 anchor:center`（8 张） |
|
||||
| **底牌区（结算）** | `line` | `anchorX:640 anchorY:163 size:S spacing:2 anchor:center`（8 张） |
|
||||
| **已出牌区** | `fan` | 见 §6.2 的 `bySeat` 示例（三家共用 base，LEFT 镜像） |
|
||||
| 已出牌 · 牌型标签 | `attach` | `target:该区首张牌, corner:bottomLeft, offsetX:0, offsetY:-24` |
|
||||
| 已出牌 · 牌角 `庄`/`大` 标 | `attach` | `target:对应牌, corner:topRight, offsetX:-28, offsetY:0` |
|
||||
| **算奖牌（叠加层）** | `fan` | `size:L spacingMax:-40 spacingMin:-70 maxWidth:260`；`bySeat{ LEFT:{anchorX:260,anchorY:120}, RIGHT:{anchorX:1035,anchorY:120}, SELF:{anchorX:640,anchorY:400} }` |
|
||||
|
||||
### 6.8 阶段操作区配置
|
||||
|
||||
| 部件 | kind | 参数（实测估值） |
|
||||
| --- | --- | --- |
|
||||
| 叫分 · 面板底 | `point` | `x:355 y:140 w:575 h:170` |
|
||||
| 叫分 · 提示条 | `point` | `x:470 y:100 w:345 h:33` |
|
||||
| **叫分 · 14 档按钮** | `grid` | `anchorX:640 anchorY:160 cols:7 rows:2 itemWidth:74 itemHeight:56 spacingX:7 spacingY:24 anchor:center fillOrder:row` |
|
||||
| 叫分 · 档位分数文字 | `attach` | `target:对应档位按钮, hAlign:center, vAlign:middle, offsetY:4` |
|
||||
| 叫分 · 档位子数角标 | `attach` | `target:对应档位按钮, corner:topRight, offsetX:-30, offsetY:2` |
|
||||
| 叫分 · `不叫` 按钮 | `point` | `x:553 y:345 w:184 h:57` |
|
||||
| 叫分 · 自己叫分大字 | `point` | `x:570 y:320 w:140 h:70`，`textStyle{fontSize:52, align:center}` |
|
||||
| 选主 · 标题斜角条 | `point` | `x:330 y:315 w:425 h:50` |
|
||||
| **选主 · 4 花色 + 投降** | `line` | `direction:horizontal anchorX:330 anchorY:373 itemWidth:128 itemHeight:55 spacing:9 anchor:left`（共 5 项；投降不显示时只排 4 项，`anchor:left` 保证前 4 个位置不变） |
|
||||
| 选主 · 花色图标 | `attach` | `target:对应花色按钮, hAlign:left, vAlign:middle, offsetX:14` |
|
||||
| 选主 · 张数大字 | `attach` | `target:对应花色按钮, hAlign:center, vAlign:middle, offsetX:14` |
|
||||
| 选主 · 对数角标 | `attach` | `target:对应花色按钮, corner:topRight, offsetX:-36, offsetY:2` |
|
||||
| 埋牌 · 操作条 | `line` | `direction:horizontal anchorX:640 anchorY:165 itemHeight:63 spacing:45 anchor:center`（提示 180 / 倒计时 60 / 埋牌 180，宽度不等，同 T-25） |
|
||||
| 出牌 · 操作条 | `line` | `direction:horizontal anchorX:640 anchorY:345 itemHeight:55 spacing:35 anchor:center`（倒计时 75 / 出牌 157） |
|
||||
| 捡分飘字 | `point` | `x:570 y:180 w:170 h:55`；另配 `floatRise:-60`、`floatDuration:800`（动画参数也进配置） |
|
||||
|
||||
### 6.9 结算区配置
|
||||
|
||||
| 部件 | kind | 参数（实测估值） |
|
||||
| --- | --- | --- |
|
||||
| 底牌面板底 | `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}` |
|
||||
| 三家 `牌局分` | `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` |
|
||||
| `下一局` 按钮 | `point` | `x:835 y:518 w:180 h:65` |
|
||||
| 算奖遮罩 | `point` | `x:0 y:0 w:1280 h:720`，`opacity:0.72`（透明度也是配置项） |
|
||||
|
||||
### 6.9b 建房规则选项配置（§1.1）
|
||||
|
||||
参考图是**行式等距**结构，正好用 `line` 嵌套 `line`：外层竖排行，内层每行横排选项。
|
||||
|
||||
| 部件 | kind | 参数（按参考图比例估，实际以平台建房界面尺寸为准） |
|
||||
| --- | --- | --- |
|
||||
| 行容器（4 行） | `line` | `direction:vertical, anchorX:0, anchorY:0, itemHeight:32, spacing:8, anchor:left` |
|
||||
| 行标题 | `attach` | `target:所在行, hAlign:left, vAlign:middle, offsetX:0`，`textStyle{fontSize:18, color:'#7FBFB0', bold:true, align:right, maxWidth:60}` |
|
||||
| 行内选项组 | `line` | `direction:horizontal, anchorX:70, itemWidth:150, spacing:0, anchor:left`（`itemWidth` 即每个「圆钮+文字」的槽宽） |
|
||||
| 单选钮 / 多选框 | `attach` | `target:所在选项槽, hAlign:left, vAlign:middle` |
|
||||
| 选项文字 | `attach` | `target:同槽的钮, hAlign:right, vAlign:middle, offsetX:8` |
|
||||
| 房卡附注 | `attach` | `target:扣卡行最后一个选项, hAlign:right, vAlign:middle, offsetX:20`，`textStyle{fontSize:16, color:'#999999'}` |
|
||||
| 多选行折行 | `grid` | 若「玩法」选项超过一行，改用 `grid{cols:4, spacingX:0, spacingY:8, fillOrder:'row'}`（二七王只有 2 项，单行即可） |
|
||||
|
||||
**选中态是配置驱动的**：单选钮选中时文字变橙，颜色写进配置：
|
||||
|
||||
```js
|
||||
ROOM_OPT_TEXT: {
|
||||
normal: { fontSize: 18, color: '#DDDDDD' },
|
||||
selected: { fontSize: 18, color: '#E8873A' }
|
||||
}
|
||||
```
|
||||
|
||||
不要在代码里写死 `'#E8873A'`。
|
||||
|
||||
### 6.10 配置文件组织
|
||||
|
||||
按 client 02 §2 的三件套拆分，布局部分建议再按界面拆文件，用保护性声明合并：
|
||||
|
||||
```
|
||||
codes/config/
|
||||
LayoutConstants.js // var EQW_Layout = EQW_Layout || {}; —— 总则：CARD_SIZE、textStyle 预设、座位键
|
||||
Layout_Table.js // 常驻区（§6.5）+ 玩家位（§6.6）
|
||||
Layout_Cards.js // 牌区（§6.7）
|
||||
Layout_Action.js // 阶段操作区（§6.8）
|
||||
Layout_Result.js // 结算区（§6.9）
|
||||
Layout_CreateRoom.js // 建房规则选项（§6.9b）
|
||||
ImageResources.js // 图片资源 ID（§3）
|
||||
SoundResources.js // 声音资源 ID（§4）
|
||||
Sprites_*.js // 精灵结构（§5）
|
||||
```
|
||||
|
||||
每个文件顶部 `var EQW_Layout = EQW_Layout || {};`，加载后合并为一份（client 02 §2「多文件用保护性声明」）。
|
||||
|
||||
**布局文件是纯数据**：不得出现函数、不得引用其他模块、不得有副作用。`fan` 的间距算法、`bySeat` 的合并、`attach` 的换算都属于**布局求解器**的职责，放在 `codes/ui/LayoutSolver.js`（或直接调 `AlignmentUtils`），不写进配置文件。
|
||||
|
||||
### 6.11 与平台布局配置的衔接
|
||||
|
||||
平台的玩家信息与气泡布局在 `01_SubGame_modify.js` 的配置区（该文件**只允许在配置区填值**）：
|
||||
|
||||
- `Game_Modify.PLAYER_INFO_LAYOUT.POSITIONS` —— 平台默认 ind0 南 `(6,592)`、ind1 东 `(1186,85)`、ind3 西 `(7,59)`，与 §6.6 实测值不一致，**须改为 §6.6 的值**。
|
||||
- `Game_Modify.BUBBLE_LAYOUT.POSITIONS` —— 平台聊天/语音气泡锚点，同样按三人局位置调整。
|
||||
|
||||
> 这两处是**平台契约配置**，与子游戏自己的 `EQW_Layout` 是两份东西，但**坐标必须一致**（否则平台画的头像和子游戏贴的庄标会错位）。建议：`EQW_Layout` 里的头像框坐标为权威，`01_SubGame_modify.js` 配置区手工抄写并在注释里注明「与 EQW_Layout.PLAYER.AVATAR 保持一致」【T-28：转发壳配置区不能引用 codes，只能手工同步，需在验收清单里加一条一致性检查】。
|
||||
|
||||
---
|
||||
|
||||
@@ -980,18 +1310,18 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推
|
||||
|
||||
| 编号 | 界面 | 所属 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| D-1 | 建房规则选项区 | §1.1 | 5 行开关 + 房卡消耗联动 |
|
||||
| D-1▲ | 建房规则选项区 | §1.1 | **已有样式范式**（他游戏参考图）+ 内容已定（4 行）；仍缺**二七王自己的定稿**与在平台建房界面里的确切尺寸/位置 |
|
||||
| D-2 | 70 分暗牌公示（3 秒） | §1.4 | 全场可见的暗牌展示 + 倒计时 |
|
||||
| D-3 | 甩错提示 | §1.7 | 整套收回、只出最小一张的表现 |
|
||||
| D-4 | 报无主提示 | §1.7 | 玩家主牌出空时的全场提示 |
|
||||
| D-5 | 踩 / 没分 / 有分 气泡与发起入口 | §1.7 | 入口位置与气泡样式 |
|
||||
| ~~D-5~~ | ~~踩 / 没分 / 有分 气泡与发起入口~~ | §1.7 | **已定**：入口 = 底栏三按钮（占庄标区，闲家时显示）；气泡 = 3×2 六帧、按头像相对位置选朝向 |
|
||||
| D-6 | 明牌面板 | §1.7 | 另两家未出主牌的具体牌面 |
|
||||
| D-7 | 出牌历史面板 | §1.7 | 按轮次 × 3 家 |
|
||||
| D-8 | 判定结果文字（大光/小光/过庄/升N级/投降） | §1.8 | 结算时的判定展示 |
|
||||
| D-9 | 大局总结算 | §1.9 | 三家 × N 局成绩表 |
|
||||
| D-10 | 解散结算 / 解散投票 | §1.10 | 可能复用 D-9 + 平台投票界面 |
|
||||
| D-11 | 准备标识 | §1.12 | 或复用平台准备标识 |
|
||||
| D-12 | 左上家已出牌区 | §2.3 | 参考图未出现，按右上家对称推 |
|
||||
| D-11 | 准备标识 | §1.12 | 或复用平台准备标识；**`下一局` 按钮已有图**（§1.8），准备状态标识仍缺 |
|
||||
| ~~D-12~~ | ~~左上家已出牌区~~ | §2.3 | **已定**：与右上家左右镜像，无需单独设计稿 |
|
||||
|
||||
### 7.2 待确认的规格问题
|
||||
|
||||
@@ -1009,15 +1339,22 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推
|
||||
| **T-10** | 出牌阶段是否保留 `提示` 按钮？提示什么？ | 精灵 1712 是否需要 |
|
||||
| **T-11** | 牌型标签种类：除单张/对子/拖拉机/甩牌外，是否还要标「毙」「垫」「混合出牌」？ | `LABEL_CARDTYPE` 帧数 |
|
||||
| **T-12** | 结算底牌文案 `叫分2子 底牌 20x0` 的完整规则（未扣底时怎么显示） | 文案模板 |
|
||||
| **T-13** | 结算面板两个小字标签的正式文案（参考图均为 `牌局分`，重复） | 文案 |
|
||||
| **T-14** | 结算面板是否展示算奖明细（`chongguan` / `wang` / `naward`）？ | 是否需要额外精灵 |
|
||||
| ~~T-13~~ | ~~结算面板两个小字标签的正式文案~~ | **已定论**：`牌局分`(`grade_jf`) / `算奖分`(`grade_aw`)，见更新后的 `小局结算.png` |
|
||||
| ~~T-14~~ | ~~结算面板是否展示算奖明细~~ | **已定论**：走独立的**算奖牌型叠加层**（`算奖牌型` 按钮打开），见 `算奖牌型显示.png` |
|
||||
| **T-15** | 准备状态用平台标识还是自建？ | D-11 |
|
||||
| **T-16** | 顶部 `抓分` 列角标：两张参考图分别为 `1子` / `1倍`，正式取值是什么？ | 精灵 1008 的数据源 |
|
||||
| **T-16** | 顶部 `抓分` 列角标：早期图为 `1子`、三张新图均为 `1倍`。**推定为 `1倍`**，但语义待定：是 `aset.upgrade` 判定倍率，还是 `bottom.multiple` 扣底倍数？ | 精灵 1008 的数据源 |
|
||||
| **T-17** | 倒计时归零后显示 `0` 还是隐藏？ | 渲染规则 |
|
||||
| **T-18** | 底栏 `底牌` 按钮：庄家点了看自己埋的 8 张？闲家点了看什么？未埋牌时呢？ | 交互定义 |
|
||||
| **T-19** | 数字用图片精灵（多帧）还是文字精灵（`setText`）？ | 是否需要资源 631–634 |
|
||||
| **T-20** | **整套音效**：清单、是否需要语音包、是否分男女声 | §4 全节 |
|
||||
| **T-21** | 手牌间距的动态计算公式与最小间距下限 | 布局算法 |
|
||||
| **T-21** | 手牌 `fan` 的 `spacingMin` / `spacingMax` 具体取值（36 张时最大重叠量） | §6.7 配置值 |
|
||||
| **T-22** | 算奖牌型叠加层的关闭方式（再点按钮 / 点遮罩 / 独立关闭钮） | §1.8 交互 |
|
||||
| **T-23** | 算奖叠加层是否并列显示奖数（`chongguan` / `wang` / `naward`） | 精灵 1851–1853 是否需要 |
|
||||
| **T-24** | 算奖牌 `cards` 超过 8 张时怎么排（缩距 / 分行 / 预置更多精灵） | §5.6 精灵数 |
|
||||
| **T-25** | `line` 布局器是否需要支持「逐项不等宽」（底栏功能钮组、埋牌操作条） | §6.1 布局器参数 |
|
||||
| **T-26** | 自己发的提示是否需要本地回显气泡（协议不回执，默认看不到） | §6.6 SELF 气泡 |
|
||||
| **T-27** | 埋牌双排的分行策略（参考图 17/19，依据未知） | §6.7 配置值 |
|
||||
| **T-28** | `EQW_Layout` 与 `Game_Modify.PLAYER_INFO_LAYOUT` 的坐标一致性如何保障（转发壳不能引用 codes） | §6.11 同步机制 |
|
||||
|
||||
### 7.3 开发前置条件
|
||||
|
||||
@@ -1032,6 +1369,7 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推
|
||||
- `client/js/01_SubGame/codes/` 目录结构与 `SubGameHooks.js` 骨架
|
||||
- `cardIdToFrame` 转换与其单元测试（§0.4 的 10 条校验样例可直接作为用例）
|
||||
- 收包分发骨架（一 rpc 一处理器）与 `data.success` 判定
|
||||
- **布局配置骨架与布局求解器**（§6）——`kind` 五型的参数结构与求解逻辑是设计决定、不依赖具体数值，可先写好并用占位坐标跑通，等设计稿到位只改配置值
|
||||
- `shared/` 同步机制
|
||||
|
||||
---
|
||||
@@ -1043,5 +1381,6 @@ design 与协议均**未定义任何音效**。以下是按牌类游戏常规推
|
||||
| `server/games/erqiwang/docs/design/design.md` | **玩法规则权威源**。本文引用其条款，不重新定义规则 |
|
||||
| `server/games/erqiwang/docs/protocol/packet_protocol.md` | **协议字段权威源**。本文的「渲染什么」全部溯源到具体字段 |
|
||||
| `docs/client/development-guide/` | **前端规范权威源**。ID 范围、组件范式、红线均以其为准 |
|
||||
| `docs_dev/uiref/*.png` | 参考图，9 张 |
|
||||
| `docs_dev/uiref/*.png` | 参考图，12 张（11 张牌桌态 + 1 张建房**样式范式**，后者内容属他游戏、不可照抄） |
|
||||
| `client/js/gameabc-framework/ui/AlignmentUtils.js` | **布局求解的框架能力**。§6 的配置参数名与其入参一一对应，配置可原样喂入 |
|
||||
| `client/js/gameabc-framework/templates/*.template.js` | 常量文件写法蓝本。本清单落地为常量文件时按其格式 |
|
||||
|
||||
Reference in New Issue
Block a user