feat:上传mcguide-开发指南部份

mcguide/30-测试/4-UI调试工具.md

@@ -0,0 +1,129 @@
+---
+front: 	
+hard: 入门
+time: 10分钟
+selection: true
+---
+
+# UI调试工具
+
+
+## 简介
+
+UI调试工具是调试工具的子工具，主要用于调试游戏运行时的界面，它的主要功能包括：
+
+1. 原生界面支持：支持对《我的世界》原生的界面进行调试，当然也支持调试您的自定义界面。
+2. [控件结构树解析](#控件结构树解析)：支持对控件结构进行解析，以树的形式展示，并包含基础信息。
+3. [游戏中定位控件](#游戏中定位控件)：支持通过游戏中点击的方式快速定位控件。
+4. [控件属性展示](#控件属性展示)：展示选中控件的属性。
+
+![](./images/U1.png)
+
+除了调试之外，UI调试工具对熟悉和学习原生界面也大有帮助。
+
+## 启动方式
+
+> 目前仅支持电脑端UI调试，我们会在2.5版本支持手机端
+
+首先，我们需要对希望调试的作品进行开发测试，并打开调试工具，参考[使用调试工具进行手机和电脑端调试](./1-使用调试工具进行手机和电脑端调试.md)。
+
+调试工具连接到开发包后，点击调试工具的**UI调试**按钮，在新的窗口中打开UI调试工具。
+
+![](./images/U2.png)
+
+## 界面介绍
+
+调试工具的界面共分为以下几个部分:
+1. **调试操作**：用于开关UI调试功能以及重新加载数据。
+2. **控件树展示**：在这里展示游戏当前的界面的控件结构，以及基础信息。
+3. **属性面板**：展示控件树中选中的控件的属性值，例如控件当前的路径。
+
+![](./images/U3.png)
+
+## 开始调试
+
+在游戏中打开希望调试的界面，然后在UI调试工具中勾选“调试UI”，开始调试。
+
+> 建议电脑端调试时，使用触屏模式，更方便在游戏和UI调试工具之间切换。
+
+![](./images/U4.png)
+
+开始调试之后，游戏的鼠标点击将用于控件选择，而非游戏内的操作。此时按键的反应仍然是可以正常生效的。
+
+如果需要在游戏中切换界面，可以先取消勾选“调试UI”。
+
+游戏中切换界面时，UI调试工具会自动刷新控件结构。如果没有正常刷新，可以手动点击上图中的“重新加载数据”按钮，对控件结构进行刷新。
+
+## 控件结构树解析
+
+下图中的界面表示当前游戏内界面的控件结构。
+
+![](./images/U5.png)
+
+此界面中展示如下信息：
+
+- 控件的树结构，即父子关系
+- 控件名称，例如：pause_screen
+- 眼睛符号，表示该控件是否可见。例如：pause_screen当前可见
+- 控件的基础类型，以图标的形式展示，图标与界面编辑器中的图标含义相同，例如pause_screen是一个画布。
+- ![](./images/U6.png)
+
+支持在此界面进行控件搜索，在搜索框内输入控件名称或者部分名称，按回车键可以进行搜索，例如下图。
+
+> 目前不支持模糊搜索，请准确输入包含下划线在内的控件名称或者控件的部分名称
+
+![](./images/U7.png)
+
+点击眼睛符号可以切换其可见性，如下图。但是控件的可见性可能受多种因素控制，因此在此界面控制可见性不一定会生效
+
+![](./images/U10.gif)
+
+右键控件，可以复制其控件路径，我们目前提供两种复制方法，以下图的loading_bars_background控件为例
+- 相对根节点的路径为："loading_bars_background"
+- 完整路径为："/pause_screen/loading_bars_background"
+
+![](./images/U9.png)
+
+## 游戏中定位控件
+
+开启调试工具后，在游戏中点击，可以快速定位当前界面的控件。
+
+![](./images/U8.gif)
+
+开启显示控件轮廓后，可以对UI控件轮廓进行显示，辅助进行UI控件的点选。
+
+![](./images/uits.png)
+
+不同控件的轮廓颜色和透明度如下表所示：
+
+| 控件类型（英文） | 控件类型（中文） | 控件颜色 | 控件颜色透明度 |
+| --- | --- | --- | --- |
+| 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% |
+
+# 控件属性展示
+
+对于选中的控件，在属性面板中会显示他的属性，如下图。目前主要以查看为主，没有修改的功能。可以在属性的值上右键，通过菜单来拷贝某个属性的值。
+
+![](./images/U11.png)