传奇世界H5与单机传奇界面UI修改实操：H5前端路径、WZL/PAK解包与坐标调整流程

传奇世界H5版和单机PC版（含H5UI.wzl这类新界面）底层存储完全两套路：H5是网页前端资源（HTML/CSS/JS/PNG/JSON），单机PC是引擎打包资源（.wzl/.wil/.pak/.dat）。改之前先确认你手里是哪种，找错文件全白搭 。

一、先分清版本类型
1. 传奇世界H5（网页/微端/浏览器运行）
• 资源形态：html + css + js + png/webp + json(atlas) + 九宫格图(.9.png)

- 引擎框架：Cocos Creator、LayaAir、自研H5框架
• 修改方式：直接改前端文件，无需专用UI编辑器

2. 单机传奇PC端带“H5UI”（热血/传世客户端）
• 资源形态：H5UI.wzl / H5UI.wil / NewopUI.pak / Prguse.wzl / Interface.pak

- 修改方式：WIL/WZL编辑器、PAK解包工具、登录器自带UI编辑模块

二、H5版UI文件定位（服务端/前端目录）
根目录常见命名：web / static / res / assets / GameRes/ui / h5res ，与 Mir200 同级或挂在 H5 服务端下 。
核心结构：
• res/ui/ 或 static/html/ ：login.html、main.html、bag.html、views/ 各界面结构

• res/ui/login/ ：bg.png、login_bg.jpg、btn/login_btn.png、login_btn_hover.png

- res/ui/game/ ：hp_bar.png、mp_bar.png、skillbar、bag_panel.png
• res/img/ 或 images/ ：大图背景、loading图

• css/ 或 style/ ：login.css、main.css、ui.css（控制坐标x/y、宽高、颜色、边距）

- js/ 或 script/ ：ui_manager.js、view_ctrl.ts、main.js（控制显隐、事件、血条绘制逻辑）
• ui.json / login_view.json / main_ui.atlas ：按钮坐标、绑定事件、图集索引

三、H5版具体修改步骤
1. 备份：复制整个 res 或 static 文件夹改名 _bak ，别直接动原文件
2. 解包（如资源被打包）：APK用APKTool/MT管理器；.bin/.dat用Cocos/Laya解包脚本；.pak/.dat用H5Unpacker还原出png/json
3. 改图片：PS/GIMP按原尺寸导出PNG-24带透明通道，覆盖同名文件；九宫格按钮保留 .9.png 边缘标记像素，否则拉伸错位
4. 改布局：VS Code/Notepad++打开 json/css/html ，改 "x":800、"y":300、width、height、margin、color ，保存用 UTF-8 无 BOM
5. 改逻辑：隐藏充值/活动按钮搜 btn_recharge / chatBox / hpBar ，设 visible=false 或注释绘制函数；改完重压js或清缓存
6. 本地起服务测试：用 Live Server / HBuilderX 跑目录，别双击 index.html（跨域加载失败）；浏览器F12元素选择器点界面元素反查css路径最省事
7. 封装回EXE/微端：若主程序内嵌资源，需重打包进客户端或用启动参数 --res_path=./custom_ui 指定外部目录

四、单机PC版（H5UI.wzl / PAK）修改步骤
1. 工具：WilEditor / WisTool（开.wzl/.wil）、PAK解包打包器（开NewopUI.pak/UI.pak，密码在登录器目录 Pak.txt ）、登录器生成器自带UI编辑（GOM/GEE/翎风 MakeGameLogin.exe）、PS改BMP/PNG
2. 路径：客户端根目录 Data/H5UI.wzl、Data/Prguse.wzl、Data/NewopUI.pak、登录器目录皮肤补丁、服务端 Mir200/Envir/UIConfig.ini 或 xml布局
3. 操作流程：
• 客户端Data目录取消只读，备份原 wzl/pak

• WilEditor打开 H5UI.wzl → 导出要改的索引图（背包底图、技能框、血条）→ PS按原尺寸改 → 导入覆盖索引 → 保存

- PAK版用解包器解 NewopUI.pak → 改 bag_panel.png 等 → 同索引重打包为存储模式ZIP覆盖回Data
• 坐标错位用登录器生成器“客户端界面设置 / UI编辑”模块，载入客户端目录，鼠标拖血条/背包/技能栏，保存后重新生成登录器覆盖

4. 引擎差异：GOM/GEE直接可视化拖；HERO看 Envir 下 UI 配置；翎风用自带皮肤编辑；改完必须重生成登录器，只换pak不重生登录器常不生效

五、常见改完不生效原因
• H5端没清浏览器缓存 / 没起本地服务导致跨域

- json/css编码存成带BOM的UTF-8，前端解析炸了
• 图片尺寸不一致又没同步改css宽高 → 错位空白

• 漏改 .9.png 九宫格边缘 → 按钮拉伸变形

• PC端只换 wzl/pak 没重生成登录器，或 Pak.txt 密码填错导致资源解密失败

- 改了 Mir200 服务端UI配置但客户端Data没同步换补丁

六、最小改动推荐路径
H5版：F12开发者工具点选元素 → 反查css/json → 改对应png和坐标 → Live Server刷浏览器。
单机PC版：WilEditor开 H5UI.wzl 换图 → 登录器生成器拖坐标 → 重生登录器覆盖。
两套都先整备份再动手，错一处能秒回滚。