VV自定义UI排错思路：先查空资源，再查热区，最后查脚本

tibaiwan1888

最近整理 VV 自定义 UI 相关内容时，发现很多界面问题表面看起来是坐标错，实际根源不一定在坐标。

尤其是做登录器界面、主界面底栏、装备悬浮框、功能按钮这些东西时，如果一上来就反复改 X/Y，很容易越改越乱。个人感觉，自定义 UI 的排查顺序应该是：先查资源，再查状态，再查热区，最后再查脚本和坐标。

下面是我整理的一套排查思路，欢迎熟悉 VV 的朋友补充或纠正。

一、先查图片资源是否为空

自定义 UI 里最容易忽略的是“资源引用存在，但图片实际不存在”。

有时候配置里写了图片编号，但素材包里没有对应图片；有时候图片文件存在，但补丁没有加载；还有时候格式不一致，导致显示异常。

这类问题表面上看像坐标错，实际是资源根本没出来。

建议先检查：

1. 图片编号是否真实存在
2. 补丁路径是否正确
3. PNG/BMP格式是否和配置一致
4. 是否存在空图片或损坏图片
5. 透明通道、黑底、边缘阴影是否处理干净

如果资源本身有问题，后面怎么调坐标都没有意义。

二、按钮不要只看普通状态

很多按钮不是一张图，而是普通、悬停、按下、禁用几个状态。只替换了普通状态，其他状态还是旧图，就容易出现一些很奇怪的问题。

常见表现：

1. 鼠标移上去变成旧按钮
2. 点击时按钮位置像是跳了一下
3. 图片看起来正常，但没有点击反馈
4. 禁用状态和普通状态看不出区别
5. 按钮背景换了，但文字或图标没跟着对齐

所以按钮问题不能只看静态截图，最好实际移动鼠标、点击、禁用状态都试一遍。

三、热区比图片坐标更容易被忽略

有些问题看起来是图片偏了，其实是点击热区没跟着变。

比如按钮图改大了、透明边变多了、图标换位置了，但热区还是旧尺寸。这样就会出现“看得见点不到”或者“点旁边反而触发”的情况。

我一般会这样测：

1. 鼠标从左到右慢慢扫，看哪里开始触发悬停
2. 鼠标从上到下慢慢扫，看热区高度是否正确
3. 临时换一张带明显边框的测试图
4. 先确认热区，再换回正式美术图

很多精美 UI 边缘透明比较多，肉眼不容易判断实际范围。测试图反而能更快定位问题。

四、分辨率问题不要全靠固定坐标解决

自定义 UI 最麻烦的地方不是某个分辨率下能不能对齐，而是换分辨率之后还对不对齐。

我觉得控件可以分成两类。

适合固定的：

1. 背包格子
2. 装备栏孔位
3. 商城物品格
4. 技能图标格
5. 固定窗口内部按钮

适合动态居中或跟随的：

1. 主界面底栏
2. 血条
3. 快捷栏
4. 弹窗标题
5. 大按钮组
6. 屏幕边缘提示

固定类追求精准，动态类追求跟随。如果所有东西都按固定坐标处理，低分辨率看着正常，高分辨率就可能明显偏。

五、注意图片居中和文字居中不是一回事

有时候背景图已经居中了，但文字没有居中；按钮图对齐了，但按钮文字还是旧位置。这种问题很容易被误判成整体坐标错。

实际排查时可以分开看：

1. 背景图是否居中
2. 按钮图是否居中
3. 文字是否居中
4. 鼠标热区是否居中
5. 悬停状态是否仍然居中

这几个不是同一个问题，最好不要混在一起改。

六、最后再查脚本逻辑

如果资源、状态、热区、分辨率都检查过了，再去查脚本会更有效率。

脚本层面主要看：

1. 打开窗口的条件是否满足
2. 按钮绑定命令是否写错
3. 是否有变量判断导致按钮不可用
4. 是否旧版本命令没有兼容
5. 是否脚本中途被无效命令打断
6. 是否多个窗口层级互相遮挡

很多 UI 问题和脚本问题会混在一起。如果不先排除资源层和热区层，很容易把简单问题复杂化。

七、我的建议排查顺序

简单总结一下，我会按这个顺序查：

1. 图片是否存在
2. 图片格式是否正确
3. 按钮多状态图是否完整
4. 透明底和黑底是否处理干净
5. 点击热区是否正确
6. 分辨率变化后是否偏移
7. 文字和图片是否分别居中
8. 控件层级是否被遮挡
9. 脚本命令是否触发
10. 条件变量是否满足
11. 最后再微调坐标

个人感觉，自定义 UI 真正费时间的地方不是摆控件，而是资源、热区、状态、分辨率之间互相影响。

如果能先把排查顺序固定下来，后面改界面会省很多时间，也能避免一遇到问题就反复改坐标。

以上是个人整理，不一定完全准确。欢迎大家补充 VV 自定义 UI 里更容易踩坑的地方。

tibaiwan1888

个人感觉，自定义 UI 真正费时间的地方不是摆控件，而是资源、热区、状态、分辨率之间互相影响。

如果能先把排查顺序固定下来，后面改界面会省很多时间，也能避免一遇到问题就反复改坐标。

以上是个人整理，不一定完全准确。欢迎大家补充 VV 自定义 UI 里更容易踩坑的地方。