# UI调试工具

# 简介

UI调试工具是调试工具的子工具,主要用于调试游戏运行时的界面,它的主要功能包括:

  1. 原生界面支持:支持对《我的世界》原生的界面进行调试,当然也支持调试您的自定义界面。
  2. 控件结构树解析:支持对控件结构进行解析,以树的形式展示,并包含基础信息。
  3. 游戏中定位控件:支持通过游戏中点击的方式快速定位控件。
  4. 控件属性展示:展示选中控件的属性。

除了调试之外,UI调试工具对熟悉和学习原生界面也大有帮助。

# 启动方式

目前仅支持电脑端UI调试,我们会在2.5版本支持手机端

首先,我们需要对希望调试的作品进行开发测试,并打开调试工具,参考使用调试工具进行手机和电脑端调试

调试工具连接到开发包后,点击调试工具的UI调试按钮,在新的窗口中打开UI调试工具。

# 界面介绍

调试工具的界面共分为以下几个部分:

  1. 调试操作:用于开关UI调试功能以及重新加载数据。
  2. 控件树展示:在这里展示游戏当前的界面的控件结构,以及基础信息。
  3. 属性面板:展示控件树中选中的控件的属性值,例如控件当前的路径。

# 开始调试

在游戏中打开希望调试的界面,然后在UI调试工具中勾选“调试UI”,开始调试。

建议电脑端调试时,使用触屏模式,更方便在游戏和UI调试工具之间切换。

开始调试之后,游戏的鼠标点击将用于控件选择,而非游戏内的操作。此时按键的反应仍然是可以正常生效的。

如果需要在游戏中切换界面,可以先取消勾选“调试UI”。

游戏中切换界面时,UI调试工具会自动刷新控件结构。如果没有正常刷新,可以手动点击上图中的“重新加载数据”按钮,对控件结构进行刷新。

# 控件结构树解析

下图中的界面表示当前游戏内界面的控件结构。

此界面中展示如下信息:

  • 控件的树结构,即父子关系
  • 控件名称,例如:pause_screen
  • 眼睛符号,表示该控件是否可见。例如:pause_screen当前可见
  • 控件的基础类型,以图标的形式展示,图标与界面编辑器中的图标含义相同,例如pause_screen是一个画布。

支持在此界面进行控件搜索,在搜索框内输入控件名称或者部分名称,按回车键可以进行搜索,例如下图。

目前不支持模糊搜索,请准确输入包含下划线在内的控件名称或者控件的部分名称

点击眼睛符号可以切换其可见性,如下图。但是控件的可见性可能受多种因素控制,因此在此界面控制可见性不一定会生效

右键控件,可以复制其控件路径,我们目前提供两种复制方法,以下图的loading_bars_background控件为例

  • 相对根节点的路径为:"loading_bars_background"
  • 完整路径为:"/pause_screen/loading_bars_background"

# 游戏中定位控件

开启调试工具后,在游戏中点击,可以快速定位当前界面的控件。

开启显示控件轮廓后,可以对UI控件轮廓进行显示,辅助进行UI控件的点选。

不同控件的轮廓颜色和透明度如下表所示:

控件类型(英文) 控件类型(中文) 控件颜色 控件颜色透明度
custom 自定义渲染类型 橘色 25.00%
dropdown 下拉框 橘色 25.00%
edit_box 文本编辑框 橘色 25.00%
label 文本框 红色 50.00%
image 图片 粉红色 10.00%
scrollbar_box 滚动块 橘色 25.00%
scroll_track 滚动条 绿色 10.00%
selection_wheel 选择滚轮 橘色 25.00%
slider 滑动条 绿色 10.00%
slider_box 滑动块 橘色 25.00%
toggle 开关 橘色 25.00%
button 按钮 绿色 10.00%
combox 多选框 橘色 25.00%
rich_text 富文本 橘色 25.00%
mul_lines 多行文本 橘色 25.00%
anim_porecess_bar 动画进度条 橘色 25.00%
grid 网格 蓝色 1.50%
input_panel 输入面板 蓝色 1.50%
panel 面板 蓝色 1.50%
scroll_view 滚动列表 蓝色 1.50%
stack_panel 布局面板 蓝色 1.50%
stack_grid 布局网格 蓝色 1.50%
screen 画布 透明 0.00%

# 控件属性展示

对于选中的控件,在属性面板中会显示他的属性,如下图。目前主要以查看为主,没有修改的功能。可以在属性的值上右键,通过菜单来拷贝某个属性的值。