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

UI/HUD 美术资源载入慢（红蓝球与底栏有约 2 秒纯色占位回退），需预烘焙合并图集并消除首帧延迟 #134

New Issue
Closed
opened 2026-09-21 02:00:12 +00:00 by troytt · 1 comment
troytt commented 2026-09-21 02:00:12 +00:00
Owner
Copy Link

问题描述

参考截图：https://screenshot-v2.corp.google.com/0surpevfmm1i0
进入游戏场景时，底部红球、蓝球、技能图标、腰带及控制栏需要约 2 秒左右才载入完毕，期间渲染了纯色椭圆/色块占位回退（Fallback）。

根因分析

  1. HTTP 瀑布流与多文件请求竞争：当前 HudManager.preload() 在场景初始化时异步发起 manifest.json 请求，随后串行触发 15 张面板 PNG、6 张字体图集 PNG、12 张技能图标 PNG（共 34+ 个独立请求），与场景瓦片图集（atlas_0.png）及角色/怪物精灵图集争抢连接带宽。
  2. 首帧未就绪即绘制纯色占位块：在 images.get("ctrlPnl") / globeLife / globeMana 尚未解码完成前，HudManager.render() 回退绘制了纯红/纯蓝几何圆与纯色方块。

解决方案

  1. 全量预烘焙单张 UI 超级图集（Pre-baked UI Mega-Atlas）：在离线构建脚本 scripts/pack-ui-assets.ts 中，将底栏、红蓝球、左右哥特边框、角色/背包/任务/小站/储物箱/方块面板、所有按钮、27 个任务图标、技能图标、字体图集与全量物品图标合并预烘焙为单张 public/ui/ui_mega_atlas.png，并生成内联坐标元数据模块 src/ui/baked-ui-meta.ts（零 JSON 瀑布流等待）。
  2. HTML <link rel="preload"> 与首帧同步预解码：在 acts.html 中加入 <link rel="preload" as="image" href="/ui/ui_mega_atlas.png">，并在首帧渲染前完成纹理位图预载，彻底消除 2 秒延迟与纯色回退块。
### 问题描述 参考截图：https://screenshot-v2.corp.google.com/0surpevfmm1i0 进入游戏场景时，底部红球、蓝球、技能图标、腰带及控制栏需要约 2 秒左右才载入完毕，期间渲染了纯色椭圆/色块占位回退（Fallback）。 ### 根因分析 1. **HTTP 瀑布流与多文件请求竞争**：当前 `HudManager.preload()` 在场景初始化时异步发起 `manifest.json` 请求，随后串行触发 15 张面板 PNG、6 张字体图集 PNG、12 张技能图标 PNG（共 34+ 个独立请求），与场景瓦片图集（`atlas_0.png`）及角色/怪物精灵图集争抢连接带宽。 2. **首帧未就绪即绘制纯色占位块**：在 `images.get("ctrlPnl")` / `globeLife` / `globeMana` 尚未解码完成前，`HudManager.render()` 回退绘制了纯红/纯蓝几何圆与纯色方块。 ### 解决方案 1. **全量预烘焙单张 UI 超级图集（Pre-baked UI Mega-Atlas）**：在离线构建脚本 `scripts/pack-ui-assets.ts` 中，将底栏、红蓝球、左右哥特边框、角色/背包/任务/小站/储物箱/方块面板、所有按钮、27 个任务图标、技能图标、字体图集与全量物品图标合并预烘焙为单张 `public/ui/ui_mega_atlas.png`，并生成内联坐标元数据模块 `src/ui/baked-ui-meta.ts`（零 JSON 瀑布流等待）。 2. **HTML `<link rel="preload">` 与首帧同步预解码**：在 `acts.html` 中加入 `<link rel="preload" as="image" href="/ui/ui_mega_atlas.png">`，并在首帧渲染前完成纹理位图预载，彻底消除 2 秒延迟与纯色回退块。
troytt commented 2026-09-21 11:10:59 +00:00
Author
Owner
Copy Link

验证通过并已随提交 14443c6 修复关单

  1. 改动方案：

    • 使用 scripts/pack-ui.ts 离线解析 DC6/PL2/TBL，将底栏、红蓝球体、高光层、27 个任务图标、技能图标与物品图集统一预烘培至静态图集 public/ui/ 与 src/ui/baked-ui-meta.ts。
    • 将掉落表重构为嵌入式内存直读（getEmbeddedDropTables），彻底移除运行期对 MPQ/DLL 的 HTTP Range 依赖（0 请求）。
    • HUD Manager 资源异步就绪后挂载进入主场景循环，首帧即渲染真实美术，消除约 2 秒纯色椭圆占位回退。

  2. 验证结果：

    • 页面加载及操作期间，对 *.mpq 和 *.dll 文件的网络请求数为 0。
    • 单元测试 tests/ui-hud.test.ts 全数通过。
### 验证通过并已随提交 14443c6 修复关单 1. **改动方案**： - 使用 `scripts/pack-ui.ts` 离线解析 DC6/PL2/TBL，将底栏、红蓝球体、高光层、27 个任务图标、技能图标与物品图集统一预烘培至静态图集 `public/ui/` 与 `src/ui/baked-ui-meta.ts`。 - 将掉落表重构为嵌入式内存直读（`getEmbeddedDropTables`），彻底移除运行期对 MPQ/DLL 的 HTTP Range 依赖（0 请求）。 - HUD Manager 资源异步就绪后挂载进入主场景循环，首帧即渲染真实美术，消除约 2 秒纯色椭圆占位回退。 2. **验证结果**： - 页面加载及操作期间，对 `*.mpq` 和 `*.dll` 文件的网络请求数为 0。 - 单元测试 `tests/ui-hud.test.ts` 全数通过。
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#134
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?