Table of contents
UIElements Expansions是Unity Editor的扩展资产。
UIElements Expansions: Router
「UIElements Expansions: Router」系列强烈支持「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: Router」主要支持以下功能。
- UIElements Expansions通用功能
- 全局样式表
- 检查器自动转换功能
- 添加标签/功能
- 附加类
- 路由功能
UIElements Expansions通用功能
请参阅以下页面。
路由功能

路由功能是一个简单功能。将路由路径与放置在项目中的UXML文件关联。
但是,通过与「RoutableButton」和「BindableButton」结合使用,可以在UXML文件的显示区域「Page」标签和UXML文件之间切换,可以在Unity编辑器中引入简单的页面转换机制。这将是可能的。
利用方法
导入

请从Unity Asset Store购买。
购买后可从「我的资产」导入。
通过路由进行页面迁移
要通过路由功能进行页面转换,您需要做三个准备工作。
- 将UXML文件与路由路径相关联
- 向显示区域添加Page标签
- 切换按钮的排列
将UXML文件与路由路径相关联
有三种方法可以将UXML文件与路由路径相关联。
- 直接描述路由器标签的路径
- 使用Import标签,加载描述路由器标签的UXML文件
- 使用path属性为每个UXML文件描述路径
直接描述路由器标签的路径
您能写入路由路径到UXML文件,直接地与engine:Router标记页转换。path属性描述uxml的文件路径(从Assets下面描述),name属性描述路由路径。
<engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/RouterTag1.uxml" name="/uielements/router/router-tag-1" />
<engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/RouterTag2.uxml" name="/uielements/router/router-tag-2" />
使用Import标签,加载描述路由器标签的UXML文件
使用engine:Import标签,您可以加载UXML文件,其中包含路由器标签。path指定要加载到属性中的UXML文件的路径(Assets以下)。用于在项目中批量管理路由路径。
<engine:Import path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/RouterSettings.uxml" />
// RouterSettings.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"
>
<!-- Directly refer uxml file and path by router tag -->
<engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/ImportTag1.uxml" name="/uielements/router/import-tag-1" />
<engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/ImportTag2.uxml" name="/uielements/router/import-tag-2" />
<engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/ImportTag3.uxml" name="/uielements/router/import-tag-3" />
</engine:UXML>
使用path属性为每个UXML文件描述路径
使用engine:UXML标记的path属性为每个文件描述路由路径。在下面的示例中的路由路径指定「/uielements/router」。
<?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"
path="/uielements/router"
>
<engine:H1 text="This is Index uxml" />
<engine:Label text="Path is /uielements/router." />
<engine:Label text="Click the button to switch pages." />
</engine:UXML>
向显示区域添加Page标签
创建显示区域并且查看路由的UXML文件。
engine:Page描述标签并描述要在path属性中显示的UXML文件的路由路径。在下面的示例中,您首先将看到在路径的UXML文件「/uielements/router」。(所以你会看到「This is Index uxml」)
<!-- 显示路由到/uielements/router的UXML文件 -->
<engine:Page class="col-12" path="/uielements/router" name="main">
</engine:Page>
<?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"
path="/uielements/router"
>
<engine:H1 text="This is Index uxml" />
<engine:Label text="Path is /uielements/router." />
<engine:Label text="Click the button to switch pages." />
</engine:UXML>
切换按钮的排列
通过设置「RoutableButton」和「BindableButton」,您可以在单击按钮时切换Page标签中显示的UXML文件。
描述要切换到每个按钮的path属性的路由路径,以及要切换到target属性的Page标签的名称。
<!-- 将name="main"的内容切换到路由到/uielements/router/router-tag-1的UXML文件 -->
<engine:RoutableButton text="RouterTag1" path="/uielements/router/router-tag-1" target="main" />
<!-- 将name="main"的内容切换到路由到/uielements/router/router-tag-2的UXML文件 -->
<editor:BindableButton text="RouterTag2" path="/uielements/router/router-tag-2" target="main" />
<!-- 首先显示路由到/uielements/router的UXML文件 -->
<engine:Page class="col-12" path="/uielements/router" name="main">
</engine:Page>
由于可以安装多个页面标签,因此如果可以正确使用名称,则可以仅切换页面的部分信息。
总结
「UIElements Expansions: Router」强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。
此外,使用路由功能可以轻松实现页面转换,这将有助于创建文档和教程。
该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。
如果您有兴趣,请务必考虑一下,因为它在资产商店出售!