troytt
/
diablo2-web
1
0
Fork 0
Code Issues 12 Pull Requests Packages Projects Releases Wiki Activity

小站（Waypoint）传送面板图标资产补齐与 Act 1~5 切页样式严格复刻原版 1.13c 规范 #378

New Issue
Closed
opened 2026-09-22 08:56:14 +00:00 by troytt · 0 comments
troytt commented 2026-09-22 08:56:14 +00:00
Owner
Copy Link

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

在当前小站/传送点面板（WorldPanels 中的 waypoint 模式，快捷键 V 或点击场景小站打开）：

  1. 小站状态图标缺失，沦为蓝色方块：
    • 截图中每个小站行左侧本应展示传送门状态图标的位置，当前直接用纯代码绘制了一个极其违和的 12×12 纯蓝色方块（ctx.fillStyle = '#4888ff'; ctx.fillRect(ox + 32, wy + 9, 12, 12)）。
  2. 顶部 Act 1～5 切页粗糙失真：
    • 当前在面板顶部使用 Canvas 2D 绘制了 5 个深黑单色矩形框（ctx.fillRect / ctx.strokeRect），并用现代等宽/衬线字体硬编码绘制英文字符串 "Act I", "Act II", "Act III", "Act IV", "Act V"，完全丧失暗黑 2 原版古朴厚重的石质浮雕风格。
  3. 条目行背景粗暴遮盖原版底图：
    • 每一行小站均通过 ctx.fillRect(ox + 22, wy, 276, 31) 覆盖了半透明黑框，将 waygatebackground.dc6 底板自带的精美石刻纹理与左侧预留的凹陷金属槽位全部抹平遮挡。

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

2.1 顶部 Act 1～5 切页资产 (data\global\ui\MENU\expwaygatetabs.dc6)

  • 帧规格：共 10 帧（5 个 Act × 2 种状态，每帧严格为 63 × 31 像素）。
  • 水平布局：5 块切页水平排列正好占满面板宽度（5 × 63 = 315px，适配 320px 宽度的面板顶部 Y = 0..31）。
  • 纹理与字形：切页表面自带雕刻的罗马数字 I, II, III, IV, V，无需在代码中二次绘制任何文本。
  • 状态成对定义：
    • Act I: Frame 0 (激活态，底边开放融入主面板) / Frame 1 (未激活态，底边金属闭合)
    • Act II: Frame 2 (激活态) / Frame 3 (未激活态)
    • Act III: Frame 4 (激活态) / Frame 5 (未激活态)
    • Act IV: Frame 6 (激活态) / Frame 7 (未激活态)
    • Act V: Frame 8 (激活态) / Frame 9 (未激活态)

2.2 小站状态图标资产 (data\global\ui\MENU\waygateicons.dc6)

  • 帧规格：共 5 帧（30 × 30 像素，精确嵌入底板左侧预制的 9 个凹槽内）。
  • 状态映射：
    • Frame 0 / 1：发光蓝色漩涡传送门（当前所在位置小站或已激活的传送门光晕态）。
    • Frame 2：已开启但未发光的暗色传送门。
    • Frame 3 / 4：未探索/未激活的闭合石门（带交叉斜向刻纹）。

2.3 底板背景布局 (data\global\ui\MENU\waygatebackground.dc6)

  • 尺寸为 320 × 432 像素。
  • 左侧自 Y = 57 起垂直分布 9 个 30×30 金属雕花凹槽，每行垂直步进严格为 36 像素（Y = 57, 93, 129, 165, 201, 237, 273, 309, 345）。

3. 修复方案与实现要求

3.1 资产接入与管线打通

  • 工程中已有 public/ui/waypoint-tabs.png（包含 10 帧切页）和 public/ui/waypoint-icons.png（包含 5 帧图标）。
  • 在 src/ui/hud-manager.ts 中补齐资源预加载，将 waypointTabsImg 与 waypointIconsImg 正确下发至 WorldPanels.draw() 资产对象。

3.2 顶部 Act 切页重构 (drawActTabs)

  • 彻底移除 drawActTabs 中的 Canvas 手工 fillRect、strokeRect 及纯文本绘制。
  • 改为直接通过 ctx.drawImage(assets.waypointTabsImg, frameIdx * 63, 0, 63, 31, ox + 2 + i * 63, oy, 63, 31) 贴图渲染：
    • 选中 Act 渲染偶数帧（底边无缝融入）；
    • 未选中 Act 渲染奇数帧（底边闭合独立）。
  • 更新点击事件中的 Tab 命中热区，与 63×31 几何坐标完全对齐。

3.3 小站列表行与状态图标渲染重构

  • 移除条目手绘半透明纯黑方框，保留 waygatebackground 原始古石背景。
  • 状态图标精准嵌入插槽：
    • 在每个小站行的左侧插槽 (ox + 15, oy + 58 + i * 36) 处，绘制 waypointIconsImg 对应的 30×30 帧切片（已探索显示 Frame 0 发光传送门，未探索显示 Frame 3 闭合石刻）。
  • 文字样式还原：
    • 小站名称使用原版 Exocet / Formal 点阵字体（已激活小站为金色 #c8a15a / 白色，鼠标悬停高亮；未激活小站显示暗灰色 #696969 且不可点击传送）。

4. 验收标准 (Acceptance Criteria)

  1. 彻底清除 12×12 纯蓝方块占位符，全面还原为 30×30 原版石刻传送门与未开启石门图标。
  2. 顶部 Act 1～5 切页采用原版 63×31 石质罗马数字贴图，选中态底边自然融入主面板，未选中态闭合。
  3. 移除列表条目上生硬的 Canvas 2D 纯色长方形遮挡物，透出原版背景凹槽与石刻纹路。
  4. 点击切页与点击小站传送热区精准响应，全五幕小站数据正常运作。
  5. 自动化构建与测试（npm run typecheck, npm test）100% 通过。
## 1. 问题现状与视觉缺陷分析 在当前小站/传送点面板（`WorldPanels` 中的 `waypoint` 模式，快捷键 `V` 或点击场景小站打开）： 1. **小站状态图标缺失，沦为蓝色方块**： - 截图中每个小站行左侧本应展示传送门状态图标的位置，当前直接用纯代码绘制了一个极其违和的 12×12 纯蓝色方块（`ctx.fillStyle = '#4888ff'; ctx.fillRect(ox + 32, wy + 9, 12, 12)`）。 2. **顶部 Act 1～5 切页粗糙失真**： - 当前在面板顶部使用 Canvas 2D 绘制了 5 个深黑单色矩形框（`ctx.fillRect` / `ctx.strokeRect`），并用现代等宽/衬线字体硬编码绘制英文字符串 `"Act I"`, `"Act II"`, `"Act III"`, `"Act IV"`, `"Act V"`，完全丧失暗黑 2 原版古朴厚重的石质浮雕风格。 3. **条目行背景粗暴遮盖原版底图**： - 每一行小站均通过 `ctx.fillRect(ox + 22, wy, 276, 31)` 覆盖了半透明黑框，将 `waygatebackground.dc6` 底板自带的精美石刻纹理与左侧预留的凹陷金属槽位全部抹平遮挡。 --- ## 2. 暗黑 2 v1.13c 真实资产规范 (Ground Truth) ### 2.1 顶部 Act 1～5 切页资产 (`data\global\ui\MENU\expwaygatetabs.dc6`) - **帧规格**：共 10 帧（5 个 Act × 2 种状态，每帧严格为 **63 × 31 像素**）。 - **水平布局**：5 块切页水平排列正好占满面板宽度（`5 × 63 = 315px`，适配 320px 宽度的面板顶部 `Y = 0..31`）。 - **纹理与字形**：切页表面自带雕刻的罗马数字 `I`, `II`, `III`, `IV`, `V`，无需在代码中二次绘制任何文本。 - **状态成对定义**： - **Act I**: Frame 0 (激活态，底边开放融入主面板) / Frame 1 (未激活态，底边金属闭合) - **Act II**: Frame 2 (激活态) / Frame 3 (未激活态) - **Act III**: Frame 4 (激活态) / Frame 5 (未激活态) - **Act IV**: Frame 6 (激活态) / Frame 7 (未激活态) - **Act V**: Frame 8 (激活态) / Frame 9 (未激活态) ### 2.2 小站状态图标资产 (`data\global\ui\MENU\waygateicons.dc6`) - **帧规格**：共 5 帧（**30 × 30 像素**，精确嵌入底板左侧预制的 9 个凹槽内）。 - **状态映射**： - **Frame 0 / 1**：发光蓝色漩涡传送门（当前所在位置小站或已激活的传送门光晕态）。 - **Frame 2**：已开启但未发光的暗色传送门。 - **Frame 3 / 4**：未探索/未激活的闭合石门（带交叉斜向刻纹）。 ### 2.3 底板背景布局 (`data\global\ui\MENU\waygatebackground.dc6`) - 尺寸为 **320 × 432 像素**。 - 左侧自 `Y = 57` 起垂直分布 9 个 30×30 金属雕花凹槽，每行垂直步进严格为 **36 像素**（`Y = 57, 93, 129, 165, 201, 237, 273, 309, 345`）。 --- ## 3. 修复方案与实现要求 ### 3.1 资产接入与管线打通 - 工程中已有 `public/ui/waypoint-tabs.png`（包含 10 帧切页）和 `public/ui/waypoint-icons.png`（包含 5 帧图标）。 - 在 `src/ui/hud-manager.ts` 中补齐资源预加载，将 `waypointTabsImg` 与 `waypointIconsImg` 正确下发至 `WorldPanels.draw()` 资产对象。 ### 3.2 顶部 Act 切页重构 (`drawActTabs`) - 彻底移除 `drawActTabs` 中的 Canvas 手工 `fillRect`、`strokeRect` 及纯文本绘制。 - 改为直接通过 `ctx.drawImage(assets.waypointTabsImg, frameIdx * 63, 0, 63, 31, ox + 2 + i * 63, oy, 63, 31)` 贴图渲染： - 选中 Act 渲染偶数帧（底边无缝融入）； - 未选中 Act 渲染奇数帧（底边闭合独立）。 - 更新点击事件中的 Tab 命中热区，与 63×31 几何坐标完全对齐。 ### 3.3 小站列表行与状态图标渲染重构 - **移除条目手绘半透明纯黑方框**，保留 `waygatebackground` 原始古石背景。 - **状态图标精准嵌入插槽**： - 在每个小站行的左侧插槽 `(ox + 15, oy + 58 + i * 36)` 处，绘制 `waypointIconsImg` 对应的 30×30 帧切片（已探索显示 Frame 0 发光传送门，未探索显示 Frame 3 闭合石刻）。 - **文字样式还原**： - 小站名称使用原版 Exocet / Formal 点阵字体（已激活小站为金色 `#c8a15a` / 白色，鼠标悬停高亮；未激活小站显示暗灰色 `#696969` 且不可点击传送）。 --- ## 4. 验收标准 (Acceptance Criteria) 1. 彻底清除 12×12 纯蓝方块占位符，全面还原为 30×30 原版石刻传送门与未开启石门图标。 2. 顶部 Act 1～5 切页采用原版 63×31 石质罗马数字贴图，选中态底边自然融入主面板，未选中态闭合。 3. 移除列表条目上生硬的 Canvas 2D 纯色长方形遮挡物，透出原版背景凹槽与石刻纹路。 4. 点击切页与点击小站传送热区精准响应，全五幕小站数据正常运作。 5. 自动化构建与测试（`npm run typecheck`, `npm test`）100% 通过。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
main
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
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#378
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?