【Unity】UIElements Expansions

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属性,您可以在特定标签中使用每个颜色。

如果您使用Modal,Button等指定颜色类,它将更改为每个颜色。

<engine:Button class="warning" text="Warning Button" />

按钮类

您可以使用以下按钮类更改按钮样式。请配合上述颜色等级使用。

它可以与Button和BindableButton一起使用。

<editor:BindableButton class="warning outline" text="Outlined Warning Button" />

总结

「UIElements Expansions」系列强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。

该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。

如果您有兴趣,可以在资产店里销售或分发,请务必考虑一下!