Diablo II Resurrected UI编写手册
1. 目录结构
UI布局文件位于 data/global/ui/layouts 目录下，主要分为以下几个部分：
1.1 主目录
- 包含所有基础UI布局文件
- 如
hudpanel.json、mainmenupanel.json、playerinventoryoriginallayout.json等
1.2 Controller目录
- 包含控制器相关的UI布局
- 分为
console和pc子目录 console目录又包含switch子目录
1.3 文件命名规范
- 基础文件名：功能描述 + 布局类型
- 高清版本：在文件名后添加
hd后缀 - 不同分辨率：如
messagelogpanel_640x480.json
2. JSON文件格式
2.1 基本结构
{
"type": "组件类型",
"name": "组件名称",
"fields": {
// 组件属性
},
"children": [
// 子组件
]
}
2.2 核心属性
- type: 组件类型，如
Panel、Widget、ButtonWidget等 - name: 组件名称，用于标识和引用
- fields: 组件属性配置
- children: 子组件列表
3. 组件类型
3.1 面板类
Panel: 基础面板组件SDHeadsUpPanel: 标准清晰度抬头面板HUDPanelHD: 高清版本抬头面板PlayerInventoryPanel: 玩家 inventory面板
3.2 基础组件
Widget: 基础容器组件ClickCatcherWidget: 点击捕获组件，用于处理点击事件
3.3 图像组件
ImageWidget: 静态图像组件AnimatedImageWidget: 动画图像组件GridImageWidget: 网格图像组件
3.4 文本组件
TextBoxWidget: 文本显示组件
3.5 按钮组件
ButtonWidget: 基础按钮组件SkillSelectButtonWidget: 技能选择按钮MiniMenuButtonWidget: 迷你菜单按钮LevelUpButtonWidget: 升级按钮RunButtonWidget: 跑步按钮
3.6 特殊功能组件
AttributeBallWidget: 属性球（生命值、法力值）ExpBarWidget: 经验条StaminaBarWidget: 耐力条BeltWidget: 腰带组件InventoryGridWidget: 物品栏网格InventorySlotWidget: 物品栏槽位
4. 布局配置
4.1 位置和大小
- rect: 组件位置和大小
x: 水平位置y: 垂直位置width: 宽度height: 高度scale: 缩放比例
4.2 锚点
- anchor: 组件锚点，使用相对坐标
x: 水平锚点（0-1）y: 垂直锚点（0-1）
4.3 优先级
- priority: 组件显示优先级，数值越大显示越靠前
4.4 背景和资源
- filename: 资源文件路径
- frame: 当前帧
- frames: 总帧数
- rows: 行数（用于网格图像）
4.5 样式
- style: 文本和UI样式
fontColor: 字体颜色pointSize: 字体大小alignment: 对齐方式spacing: 间距dropShadow: 阴影效果
5. 高清版本差异
5.1 文件命名
- 高清版本文件通常带有
hd后缀
5.2 尺寸和位置
- 高清版本使用更大的尺寸和位置值
- 例如：标准版本 rect 可能为
{"x": 29, "y": 11}，高清版本可能为{"x": 294, "y": 65, "width": 348, "height": 350}
5.3 资源路径
- 高清版本使用更复杂的资源路径
- 例如：
PANEL/HUD_02/HealthManaAnimation/HealthIdle/4k/globe_health_man_idle
5.4 视觉效果
- 高清版本增加了更多动画和视觉效果
- 使用
AnimatedImageWidget实现动画效果 - 增加了颜色变换和高级着色功能
6. 最佳实践
6.1 文件组织
- 按照功能模块组织文件
- 使用清晰的命名规范
- 分离标准清晰度和高清版本
6.2 组件使用
- 根据功能选择合适的组件类型
- 合理使用子组件结构
- 保持组件层次清晰
6.3 布局定位
- 使用相对和绝对定位相结合
- 考虑不同分辨率的适配
- 使用锚点实现灵活布局
6.4 资源引用
- 使用统一的资源路径格式
- 确保资源文件存在且路径正确
- 为高清版本提供适当的资源
6.5 性能优化
- 避免过度使用复杂组件
- 合理设置动画帧率
- 优化图像资源大小
7. 示例
7.1 基础面板
{
"type": "Panel",
"name": "ExamplePanel",
"fields": {
"priority": 50,
"anchor": { "x": 0.5, "y": 0.5 },
"rect": { "x": -150, "y": -100, "width": 300, "height": 200 }
},
"children": [
{
"type": "ButtonWidget",
"name": "CloseButton",
"fields": {
"rect": { "x": 250, "y": 10 },
"filename": "PANEL/buysellbtn",
"normalFrame": 10,
"pressedFrame": 11,
"tooltipString": "@strClose",
"onClickMessage": "ExamplePanel:Close"
}
}
]
}
7.2 技能按钮
{
"type": "SkillSelectButtonWidget",
"name": "SkillButton",
"fields": {
"rect": { "x": 100, "y": 100 },
"side": "left",
"skillIconFilenames": "$SkillIconFilenames"
},
"children": [
{
"type": "TextBoxWidget",
"name": "HotkeyText",
"fields": {
"rect": "$SkillHotkeyTextRect",
"style": "$SkillHotkeyTextStyle"
}
}
]
}
8. 常见问题
8.1 布局定位问题
- 问题：组件位置不正确
- 解决：检查 rect 和 anchor 属性，确保坐标计算正确
8.2 资源加载问题
- 问题：图像不显示
- 解决：检查 filename 路径是否正确，确保资源文件存在
8.3 高清版本适配
- 问题：高清版本布局错乱
- 解决：确保高清版本使用正确的尺寸和资源路径
8.4 动画效果问题
- 问题：动画不播放
- 解决：检查 AnimatedImageWidget 的配置，确保 filename 和 fps 设置正确
9. 总结
Diablo II Resurrected 的UI系统使用JSON文件定义布局，通过组件化的方式构建复杂的用户界面。了解其结构和规则有助于创建和修改UI布局，实现自定义的游戏界面效果。
在编写UI布局时，应注意：
- 遵循文件命名和组织规范
- 使用合适的组件类型
- 合理配置布局属性
- 为高清版本提供适当的资源和配置
- 优化性能和视觉效果
通过本手册的指导，您应该能够理解和创建符合Diablo II Resurrected标准的UI布局文件。
