Table of contents
UIElements Expansions是Unity Editor的扩展资产。
UIElements Expansions
「UIElements Expansions」系列强烈支持「UIElements」,开始与Unity 2019.1。
所谓UIElements
UIElements是从Unity 2019.1开始引入的替换当前Unity编辑器的GUI系统(IMGUI)的功能。
您可以创建Unity的GUI,就像使用HTML和CSS创建网页一样,组合Unity的HTML「UXML」和Unity的样式表「USS」。
当然,您可以像以前一样在编辑器脚本中为编辑器编写处理,并且有像jQuery这样的方法,因此您可以创建像HTML5这样的动态GUI。
在未来,计划不仅取代编辑器,还取代运行时GUI(当前uGUI),并且有望留给未来的Unity GUI。
只是潜力很高,但由于它刚刚推出,它还没有足够的功能来充分利用它。
「UIElements Expansions」是一种强烈支持其缺失部分的资产。
该「UIElements Expansions」系列目前主要提供以下资产。
在这里,我们将介绍这些资产共有的功能。
- 全局样式表
- 检查器自动转换功能
- 添加标签/功能
- 附加类
全局样式表

成为USS基础的CSS通常会创建一个或多个通用文件,并在HTML标题中一起加载它们。
全局样式表将能够实现与CSS相同的用法。
检查器自动转换功能

在Unity中,您可以自由地重写检查器的GUI,例如组件和脚本双对象。但是,在这种情况下,您需要为该组件编写自己的编辑器脚本。
现在可以使用UXML编写类似HTML的配置,但是使用编辑器脚本编写要将创建的UXML分配给哪个组件有点麻烦。
「检查器自动转换功能」将自动确定哪些组件仅与UXML文件名一起使用而无需编写编辑器脚本,并将自动分配。
添加标签/功能
UIElements允许您添加自己的UXML标签以应用样式和功能。UIElements Expansions添加了多个有用的标签,并支持使用UIElements。
以下是当前添加的UXML标签:
- Div
- VisualElement的别名。没有特别的功能,用于指定USS。
- Header、Footer、Main、Article
- VisualElement的别名。没有特别的功能,用于指定USS。
- H1~H6
- Label的别名。没有特别的功能,用于指定USS。
- BindableImage
- 您可以从序列化属性中检索和查看图像。您还可以使用外部URL (http://~)。
- BindableButton
- Editor专用的Button。您可以通过从UXML中指定方法名称和值来指定静态方法的执行,而无需编写脚本。您还可以将模板与模板结合使用来切换模板。
- BindableLabel、BindableH1~H6
- 您可以将序列化字符串变量显示为标签。
- BindableListView
- PropertyField中的数组/List专用别名。它针对数组/List中的USS规范进行了优化。
附加类
UIElements使用您自己的USS类进行设计。「UIElements Expansions」系列提供了一些有用的类,因此我们支持USS设计。
- 色阶
- 根据状态准备颜色等级。
- 按钮类
- 更改按钮的设计。
利用方法
导入
请购买以下「UIElements Expansions」系列中的任何一个。
本文中描述的功能通常可用于「UIElements Expansions」系列。
购买后可从「我的资产」导入。
全局样式表
就那样也可以使用。
修改样式

在「Assets/Masamune/Modules/unity.style/Styles」文件夹中编辑「PersonalStyle」和「ProStyle」。
在正常情况下「PersonalStyle」,如果您使用的是Unity Pro或Plus提供的专业皮肤(黑底皮),请编辑「ProStyle」以立即反映皮肤。
使用自定义格式表

选择「Assets/Masamune/Modules/unity.style/Resources」文件夹中的「EditorStyleInfo」。编辑屏幕出现在检查器中。
打开「StyleSheet Settings」选项卡时,应显示「Style Sheets」和「Style Sheets For Pro Skin」列表。您为每个应用了常规编辑器和专业皮肤的编辑器指定样式文件。
您可以从此处添加样式文件。下面的优先级更高,因此请根据需要更改顺序。
检查器自动转换功能
通过创建与继承「MonoBehaviour」或「ScriptableObject」的类同名的uxml文件,可以将uxml应用于您创建的类的检查器屏幕。
例子
创建继承了「MonoBehaviour」的「MyMonoScript」。
// MyMonoScript.cs
public class MyMonoScript : MonoBehaviour {
public string name;
public int age;
...
}
创建同一个名为「MyMonoScript」的uxml文件。(Assets文件夹下的任何位置都可以)
// MyMonoScript.uxml
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:engine="UnityEngine.UIElements"
xmlns:editor="UnityEditor.UIElements"
xsi:noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd"
>
<editor:PropertyField binding-path="name" class="box" />
<editor:PropertyField binding-path="age" class="box" />
</engine:UXML>
此时将显示已应用UIElements样式的检查器屏幕。
在MonoBehaviour和ScriptableObject之外使用
如果要在「MonoBehaviour」或「ScriptableObject」中使用此功能,例如数组中的List或唯一类,可以通过继承「SerializableBehaviour」来实现它。
使用方法是创建继承「SerializableBehaviour」的类「MySerializable」,如「MonoBehaviour」和「ScriptableObject」继承类。由于我们必须声明我们自己的类可以序列化,我们将提供[System.Serializable]属性。
// MySerializable.cs
[System.Serializable]
public class MySerializable : SerializableBehaviour {
public string name;
public int age;
...
}
以相同的方式创建名为「MySerializable」的uxml文件。
// MySerializable.uxml
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:engine="UnityEngine.UIElements"
xmlns:editor="UnityEditor.UIElements"
xsi:noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd"
>
<editor:PropertyField binding-path="name" class="box" />
<editor:PropertyField binding-path="age" class="box" />
</engine:UXML>
「MySerializable」类现在也在检查器中以应用UIElements的方式显示。
与编辑器脚本一起使用
有些人可能已经创建了编辑器脚本。如果编辑器脚本更改了特定类的检查器屏幕,则创建的编辑器脚本优先。
添加标签/功能
Div
「Div」标签是「VisualElement」的别名。您可以使用与VisualElement相同的功能。
<engine:Div>
其他UXML标记
</engine:Div>
Header、Footer、Main、Article
「Header」「Footer」「Main」「Article」标签是「VisualElement」的别名。您可以使用与VisualElement相同的功能。
<engine:Header>
其他UXML标记
</engine:Header>
H1~H6
「H1」「H2」「H3」「H4」「H5」「H6」标签是「Label」的别名。可以使用与Label相同的功能。
为标题添加的标签已预先应用用于标题的USS类。
<engine:H1 text="最大标题" />
<engine:H2 text="第二大标题" />
<engine:H3 text="第三大标题" />
BindableImage
「BindableImage」是专门用于Editor扩展「Image」标签的标签。除了Image的功能外,还可以使用几个功能。
显示外部URL图像
可以使用「src」属性扫描并显示外部URL的图像。
<editor:BindableImage src="外部URL" />
请注意,如果未连接到互联网且无法访问外部URL,图像将不会显示。
从序列化变量读取
您可以使用「binding-path」属性读取序列化的值,如「PropertyField」。
<editor:BindableImage binding-path="序列化变量名" />
BindableButton
「BindableButton」是专门用于Editor扩展「Button」标签的标签。除了Button功能外,还可以使用几个功能。
指定方法执行
「汇编名称(可省略)」「类型名称(包含namespace)」通过指定「方法名称」,您可以在按下UXML按钮时指定方法执行。
<editor:BindableButton class="list" text="Beep" assembly="UnityEditor" type="UnityEditor.EditorApplication" method="Beep" />
您还可以通过指定「value」属性,将值传递到字符串方法。
<editor:BindableButton class="list" text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
切换模板
您还可以结合「Template」标签在UXML中切换模板。
<engine:Template path="Assets/Masamune/UIElements.Expansions.ResponsiveGrid/Assets/Styles/Articles/About.uxml" name="About" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.ResponsiveGrid/Assets/Styles/Articles/ResponsiveGrid.uxml" name="ResponsiveGrid" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.ResponsiveGrid/Assets/Styles/Articles/ReorderableList.uxml" name="ReorderableList" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.ResponsiveGrid/Assets/Styles/Articles/Card.uxml" name="Card" />
<engine:Instance template="About" name="main">
</engine:Instance>
<editor:BindableButton text="About" path="About" target="main" />
<editor:BindableButton text="Reorderable List" path="ReorderableList" target="main" />
<editor:BindableButton text="Responsive Grid" path="ResponsiveGrid" target="main" />
<editor:BindableButton class="list" text="CardView / CardList" path="Card" target="main" />
在上面的例子中,About.uxml的内容首先显示在「name="main"」中。通过单击每个按钮,「path」属性中列出的名称的模板将反映在「target」属性中列出的名称的位置,即「name="main"」的内容中。
BindableLabel、BindableH1~H6
「BindableLabel」「BindableH1~H6」是专门用于Editor扩展「Label」标签的标签。除了Label的功能外,还可以使用几个功能。
从序列化变量读取
您可以使用「binding-path」属性读取序列化的值,如「PropertyField」。
<editor:BindableLabel binding-path="序列化变量名" />
<editor:BindableH1 binding-path="序列化变量名" />
<editor:BindableH2 binding-path="序列化变量名" />
<editor:BindableH3 binding-path="序列化变量名" />
BindableListView
「BindableListView」是专门用于Editor的标签,它针对数组/List优化了「PropertyField」标签。您已修改PropertyField中的类路径。
在「BindableListView」中,检查数组中的每个子元素,如果子元素是以下条件,则在每个子元素外部放置一个添加了「unity-listview-field_content」类的VisualElement。
- 子元素不是数组/List
- 未在子元素中设置PropertyDrawer
这使数组可以分为单个元素和多个元素,并允许您指定USS,例如仅在单个元素中包含在框中。
// 仅包含单个元素
BindableListView .unity-listview-field__content {
margin: 2px 0 2px 0;
padding: 2px;
color: #888;
border-width: 1px;
border-color: #212121;
background-color: #2f2f2f;
}
附加类
色阶
通过将以下颜色类添加到class属性,您可以在特定标签中使用每个颜色。
Class Name | Color Code | Color |
---|---|---|
primary | #4285F4 | |
secondary | #AA66CC | |
info | #33B5E5 | |
success | #00C851 | |
warning | #FF8800 | |
danger | #CC0000 |
如果您使用Modal,Button等指定颜色类,它将更改为每个颜色。
<engine:Button class="warning" text="Warning Button" />
按钮类
您可以使用以下按钮类更改按钮样式。请配合上述颜色等级使用。
Class Name | Detail |
---|---|
outline | 大纲按钮样式 |
它可以与Button和BindableButton一起使用。
<editor:BindableButton class="warning outline" text="Outlined Warning Button" />
总结
「UIElements Expansions」系列强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。
该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。
如果您有兴趣,可以在资产店里销售或分发,请务必考虑一下!