法术/技能树面板 Tab 页切页样式与资产严格对齐暗黑 2 原版 1.13c 规范 #377

New Issue

troytt · 2026-09-22T08:49:54Z

troytt commented

2026-09-22 08:49:54 +00:00

1. 问题现状与视觉缺陷分析

在当前技能树面板（SkillTreePanel，对应快捷键 T）中：

右侧 Tab 样式严重失真：右侧 3 个技能系切页按钮（如法师的“冰冷法术”、“闪电法术”、“火焰法术”）及顶部“剩余技能点”区域，当前是通过 Canvas 2D 纯代码手工绘制的暗色矩形色块（ctx.fillRect / ctx.strokeRect）。
纯色方框缺乏原版质感：当前绘制仅带有生硬的黄色细边框线（#e8c26b）与平铺单色底色，完全缺失暗黑破坏神 2 原版标志性的石质立体浮雕按键、切角凹槽、哥特铁艺框架、以及当前激活 Tab 向右无缝凸出的连续金属外边框。

2. 暗黑 2 v1.13c 真实资产规范 (Ground Truth)

2.1 资产来源与 320x432 完整规格

在暗黑 2 原版 MPQ 中，每个职业的技能树背景均存放在 data\global\ui\SPELLS\skltree_<class>_back.dc6（如法师为 skltree_s_back.DC6，共 7 大职业）。

真实完整尺寸：320 × 432 像素（左侧 256×432 为技能树连线与技能槽网格，右侧 64×432 为竖向 Tab 导航与剩余技能点框架）。
DC6 帧结构（16 帧，4 组复合）：
- 每组由 4 个图块拼接成 320×432 面板：Piece 0 (256×256 左上), Piece 1 (64×256 右上), Piece 2 (256×176 左下), Piece 3 (64×176 右下)。
- Set 0 (Frames 0..3)：基础通用背景。右上与右下包含原版立体暗色石质未激活 Tab 按钮（带高光立体斜角）及顶部哥特铁艺“剩余技能点”底座与凹陷数值框。
- Set 1 (Frames 4..7)：底层 Tab（火焰法术 / 武学艺术 / 战斗技能）激活态。激活 Tab 处的石质纹理直接横向延伸突出，且带有连续完整的金色外边框。
- Set 2 (Frames 8..11)：中层 Tab（闪电法术 / 暗影武艺 / 攻击灵气）激活态。
- Set 3 (Frames 12..15)：顶层 Tab（冰冷法术 / 陷阱 / 防御灵气）激活态。

2.2 垂直分段与几何坐标（4 等分 108px 高度）

以 320×432 面板坐标系为基准（原点位于技能面板左上角）：

Y = 0 .. 107 (高度 108px)：顶部哥特铁艺“剩余技能点”装饰框架与凹槽（数字居中于槽内）。
Y = 108 .. 215 (高度 108px)：顶层 Tab 按钮（Top Tab，法师对应冰冷法术）。
Y = 216 .. 323 (高度 108px)：中层 Tab 按钮（Middle Tab，法师对应闪电法术）。
Y = 324 .. 431 (高度 108px)：底层 Tab 按钮（Bottom Tab，法师对应火焰法术）。

3. 修复方案与实现要求

3.1 资产离线提取管线重构 (`scripts/pack-skill-assets.ts`)

过去脚本仅提取了左侧 256×432 切片，丢弃了右侧 64px 的原版 Tab 帧资产。
修正提取方案：
- 对 7 大职业的 skltree_*_back.dc6，将 Set 0（基础未激活按键 + 顶部框）与对应的激活 Set（Set 1、2、3）按照透明通道复合，直接导出 320×432 的完整原版 PNG 背景图（如 bg_sor_0.png, bg_sor_1.png, bg_sor_2.png，共 7 职业 × 3 Tab = 21 张）。
- 导出的背景图直接自带完整的立体石质切页按钮、金色激活凸起、及顶部技能点框架。

3.2 面板渲染逻辑重构 (`src/ui/skill-tree-panel.ts`)

移除手绘几何伪代码：
- 彻底删除 ctx.fillStyle = '#14110d'、ctx.fillRect(ox + 258, oy + vt.y, 60, 96)、ctx.strokeRect 等现代 Canvas 手绘纯色方框。
- 直接在 (ox, oy) 绘制 320×432 原版复合背景图片。
文字与数值排版：
- 剩余技能点数值：精准居中绘制于顶部哥特框的内凹数字槽内（使用原版 font16，有未分配点数时显示红色，为 0 时显示白色）。
- Tab 文本：基于 string.tbl 中的 StrSklTree* 文本，使用暗黑原版字体（fontexocet10 / fontformal12）居中排版于对应 108px 高度的 Tab 按钮中心（y 中心对应 162、270、378）。激活 Tab 为明亮金色（#c8a15a），未激活 Tab 为暗金/褐色（#d8c898 或 #696969）。

3.3 点击与热区判定对齐

技能面板在 800×600 停靠于 (400, 60) 时，Tab 按钮命中热区更新为：
- X 范围：400 + 256 至 400 + 320（即 656 .. 720）。
- Y 范围：
  - Top Tab: 60 + 108 至 60 + 215 (168 .. 275)
  - Middle Tab: 60 + 216 至 60 + 323 (276 .. 383)
  - Bottom Tab: 60 + 324 至 60 + 431 (384 .. 491)

4. 验收标准 (Acceptance Criteria)

技能树面板完全采用原版 320×432 MPQ DC6 切片复合图渲染，彻底消除生硬的 Canvas 手绘黑框与黄色线段。
切换 Tab 时，当前选中的 Tab 呈现原版特有的石质横向凸起与无缝金色金属外边框，非选中 Tab 呈现原版立体内凹石质纹理。
剩余技能点框体与数字位置完美契合原版暗黑 2 哥特凹槽。
全 7 大职业技能树背景及 Tab 文字对齐无偏移。
单元测试与自动化类型检查（npm run typecheck, npm test）100% 通过。

## 1. 问题现状与视觉缺陷分析在当前技能树面板（`SkillTreePanel`，对应快捷键 `T`）中： - **右侧 Tab 样式严重失真**：右侧 3 个技能系切页按钮（如法师的“冰冷法术”、“闪电法术”、“火焰法术”）及顶部“剩余技能点”区域，当前是通过 Canvas 2D 纯代码手工绘制的暗色矩形色块（`ctx.fillRect` / `ctx.strokeRect`）。 - **纯色方框缺乏原版质感**：当前绘制仅带有生硬的黄色细边框线（`#e8c26b`）与平铺单色底色，完全缺失暗黑破坏神 2 原版标志性的**石质立体浮雕按键、切角凹槽、哥特铁艺框架、以及当前激活 Tab 向右无缝凸出的连续金属外边框**。 --- ## 2. 暗黑 2 v1.13c 真实资产规范 (Ground Truth) ### 2.1 资产来源与 320x432 完整规格在暗黑 2 原版 MPQ 中，每个职业的技能树背景均存放在 `data\global\ui\SPELLS\skltree_<class>_back.dc6`（如法师为 `skltree_s_back.DC6`，共 7 大职业）。 - **真实完整尺寸**：**320 × 432 像素**（左侧 256×432 为技能树连线与技能槽网格，右侧 64×432 为竖向 Tab 导航与剩余技能点框架）。 - **DC6 帧结构（16 帧，4 组复合）**： - 每组由 4 个图块拼接成 320×432 面板：Piece 0 (256×256 左上), Piece 1 (64×256 右上), Piece 2 (256×176 左下), Piece 3 (64×176 右下)。 - **Set 0 (Frames 0..3)**：基础通用背景。右上与右下包含**原版立体暗色石质未激活 Tab 按钮**（带高光立体斜角）及顶部**哥特铁艺“剩余技能点”底座与凹陷数值框**。 - **Set 1 (Frames 4..7)**：底层 Tab（火焰法术 / 武学艺术 / 战斗技能）激活态。激活 Tab 处的石质纹理直接横向延伸突出，且带有连续完整的金色外边框。 - **Set 2 (Frames 8..11)**：中层 Tab（闪电法术 / 暗影武艺 / 攻击灵气）激活态。 - **Set 3 (Frames 12..15)**：顶层 Tab（冰冷法术 / 陷阱 / 防御灵气）激活态。 ### 2.2 垂直分段与几何坐标（4 等分 108px 高度）以 320×432 面板坐标系为基准（原点位于技能面板左上角）： 1. **Y = 0 .. 107 (高度 108px)**：顶部哥特铁艺“剩余技能点”装饰框架与凹槽（数字居中于槽内）。 2. **Y = 108 .. 215 (高度 108px)**：顶层 Tab 按钮（Top Tab，法师对应冰冷法术）。 3. **Y = 216 .. 323 (高度 108px)**：中层 Tab 按钮（Middle Tab，法师对应闪电法术）。 4. **Y = 324 .. 431 (高度 108px)**：底层 Tab 按钮（Bottom Tab，法师对应火焰法术）。 --- ## 3. 修复方案与实现要求 ### 3.1 资产离线提取管线重构 (`scripts/pack-skill-assets.ts`) - 过去脚本仅提取了左侧 256×432 切片，丢弃了右侧 64px 的原版 Tab 帧资产。 - **修正提取方案**： - 对 7 大职业的 `skltree_*_back.dc6`，将 Set 0（基础未激活按键 + 顶部框）与对应的激活 Set（Set 1、2、3）按照透明通道复合，直接导出 320×432 的完整原版 PNG 背景图（如 `bg_sor_0.png`, `bg_sor_1.png`, `bg_sor_2.png`，共 7 职业 × 3 Tab = 21 张）。 - 导出的背景图直接自带完整的立体石质切页按钮、金色激活凸起、及顶部技能点框架。 ### 3.2 面板渲染逻辑重构 (`src/ui/skill-tree-panel.ts`) - **移除手绘几何伪代码**： - 彻底删除 `ctx.fillStyle = '#14110d'`、`ctx.fillRect(ox + 258, oy + vt.y, 60, 96)`、`ctx.strokeRect` 等现代 Canvas 手绘纯色方框。 - 直接在 `(ox, oy)` 绘制 320×432 原版复合背景图片。 - **文字与数值排版**： - **剩余技能点数值**：精准居中绘制于顶部哥特框的内凹数字槽内（使用原版 `font16`，有未分配点数时显示红色，为 0 时显示白色）。 - **Tab 文本**：基于 `string.tbl` 中的 `StrSklTree*` 文本，使用暗黑原版字体（`fontexocet10` / `fontformal12`）居中排版于对应 108px 高度的 Tab 按钮中心（y 中心对应 162、270、378）。激活 Tab 为明亮金色（`#c8a15a`），未激活 Tab 为暗金/褐色（`#d8c898` 或 `#696969`）。 ### 3.3 点击与热区判定对齐 - 技能面板在 800×600 停靠于 `(400, 60)` 时，Tab 按钮命中热区更新为： - X 范围：`400 + 256` 至 `400 + 320`（即 `656 .. 720`）。 - Y 范围： - Top Tab: `60 + 108` 至 `60 + 215` (`168 .. 275`) - Middle Tab: `60 + 216` 至 `60 + 323` (`276 .. 383`) - Bottom Tab: `60 + 324` 至 `60 + 431` (`384 .. 491`) --- ## 4. 验收标准 (Acceptance Criteria) 1. 技能树面板完全采用原版 320×432 MPQ DC6 切片复合图渲染，彻底消除生硬的 Canvas 手绘黑框与黄色线段。 2. 切换 Tab 时，当前选中的 Tab 呈现原版特有的石质横向凸起与无缝金色金属外边框，非选中 Tab 呈现原版立体内凹石质纹理。 3. 剩余技能点框体与数字位置完美契合原版暗黑 2 哥特凹槽。 4. 全 7 大职业技能树背景及 Tab 文字对齐无偏移。 5. 单元测试与自动化类型检查（`npm run typecheck`, `npm test`）100% 通过。

troytt referenced this issue from a commit

2026-09-22 13:13:51 +00:00

feat(ui): replicate authentic D2 1.13c skill tree tabs and skill points banner (Fixes #377)

troytt closed this issue

2026-09-22 13:13:51 +00:00

Sign in to join this conversation.

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: troytt/diablo2-web#377

法术/技能树面板 Tab 页切页样式与资产严格对齐暗黑 2 原版 1.13c 规范 #377