Unity2019 UIElement 笔记（十四）UI Builder

---

如果需要了解Unite Copenhagen 2019中有关UI Element的内容，可以看这位大大的文章——【Unity】UIElements 渲染细节，比NGUI/UGUI/FairyGUI好在哪？

---

本文就简单介绍一下UI Builder的使用

1.安装UI Builder

我目前使用的Unity版本是2019.3.0b9，在菜单栏选择Windows——Package Manager，在Advanced中选择Show preview packages（因为目前还是预览版，估计要到2020.3才会有正式版），然后我们就能找到UI Builder了，选择Install

2.界面介绍

2.1. StyleSheet

也就是Unity Style Sheet，Unity样式表，在这里我们可以创建自定义的样式，然后添加给我们需要的元素，在右边的Inspector面板可以对各种属性进行设置

2.2.Hierarchy

在这个面板中，我们可以看到目前的UI结构以及当前UI的名字，当选中某一组件后，就能在右边的Inspector面板看到当前元素的各种属性，并可以进行设置

2.3.Library

这是一个库，在库中有一些预制的组件，我们可以直接拖动进行使用

2.4.UXML/USS Preview

UXML和USS的预览，我们可以直接看到生成的UXML和USS代码

2.5.Inspector

在这个面板中，我们可以对各种属性进行调整

2.6.Viewport

我们可以即时浏览到我们制作的UI界面

3.使用方式

就简单一点，我们做一个自定义Inspector面板
如果你使用过UGUI或者其他UI制作的软件，那你肯定很容易上手，其实只需要拖动几下就好了，这里我就不多解释了，因为在这个界面中大部分的元素都说的很清楚了，那么我就简单的设计了一个界面，如下：

这里要注意的是，在随机伤害这个按钮的上方其实并不是空白，那是两个PropertyField组件，但目前是什么都不显示的，而下面那个滑动条，我是去除了它的Label，所以显示为一整条
接下来我们需要导出生成的uxml和uss，选择File——Save As，然后放到Resources文件夹中
创建一个脚本，比如Enemy，然后加上需要的字段

public class Enemy : MonoBehaviour
{
   
    public string m_name;
    public int m_damage;
}

然后再创建一个EnemyEditor脚本来重新绘制Enemy的编辑器界面

[CustomEditor(typeof(Enemy))