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

您可以在「UIElements Expansions:Modal」中显示「Modal」,例如对话框和弹出条。
显示模态时,窗口中的其他元素会被黑色输出,无法触摸,因此您可以在执行某些操作后将其用于「确认窗口」或「显示警告」。
您还可以更改垂直,水平,中心和模态显示位置。您可以使用UXML的标签属性轻松更改显示位置,而无需在USS文件中进行设置。
模态显示就像现代网站一样进行动画处理。您还可以更改动画时间。
您可以使用UIElements Expansions系列上的按钮轻松指定模态显示切换,例如「BindableButton」。由于它也可以从脚本中完成,因此您可以在各种场景中自由启动模态。
您可以使用UXML标签或USS自由设计模型的内容。您可以将其设计嵌套在Modal标签中,也可以使用模板在外部文件中描述设计。
利用方法
导入

请从Unity Asset Store购买。
购买后可从「我的资产」导入。
模态函数
基本的利用方法
要使用Modal,只需在UXML标签下编写Modal标签并在其中描述模态设计。
<editor:Modal>
Modal Content
</editor:Modal>
如下所示,它是演示中使用的模态设计。
<editor:Modal name="center" class="info">
<engine:H1 text="Center Modal" />
<engine:Main>
<engine:Label text="You can write a message like this." />
<engine:Label text="Buttons can also be installed. Open the official website?" />
</engine:Main>
<engine:Footer class="row">
<engine:Div class="col-6">
<editor:BindableButton text="NO" class="primary outline" control="hide" target="center" />
</engine:Div>
<engine:Div class="col-6">
<editor:BindableButton text="YES" class="warning" control="hide" target="center" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
</engine:Div>
</engine:Footer>
</editor:Modal>
指定位置
editor:Modal您可以通过将属性「area」附加到标签来指定模态显示位置。
<!-- Upper Modal -->
<editor:Modal name="up" area="top" class="info">
<engine:H1 text="Upper Modal" />
</editor:Modal>
<!-- Downer Modal -->
<editor:Modal name="down" area="bottom" class="info">
<engine:H1 text="Downer Modal" />
</editor:Modal>
<!-- Left Modal -->
<editor:Modal name="left" area="left" class="info">
<engine:H1 text="Left Modal" />
</editor:Modal>
<!-- Right Modal -->
<editor:Modal name="right" area="right" class="info">
<engine:H1 text="Right Modal" />
</editor:Modal>
<!-- Center Modal -->
<editor:Modal name="center" area="center" class="info">
<engine:H1 text="Center Modal" />
</editor:Modal>
设置动画时间
editor:Modal通过将属性「time」附加到标签,您可以设置模态动画时间。以毫秒为单位进行设置。
<!-- 500ms animation time -->
<editor:Modal name="center" time="500" class="info">
<engine:H1 text="Center Modal" />
</editor:Modal>
颜色等级可用
可以利用颜色等级来改变模态的颜色。
<!-- Warning modal -->
<editor:Modal name="center" class="warning">
<engine:H1 text="Warning Modal" />
</editor:Modal>
显示/隐藏模态
来自BindableButton的控件
通过使用BindableButton的control和target属性,您可以在单击按钮时控制Modal的显示隐藏。
control属性描述控制模态命令的模态名称,target属性描述控制模态的名称。
<editor:BindableButton text="Show modal" control="show" target="center" />
<editor:Modal name="center" time="500" class="info">
<engine:H1 text="Center Modal" />
</editor:Modal>
您可以为control属性指定以下命令:
Command | Detail |
---|---|
show | 显示模态 |
hide | 隐藏模态 |
toggle | 切换模态显示 (显示模式时隐藏模式,不显示时显示模式) |
脚本控件
您可以从脚本中控制模态状态。
public class ModalDemo : EditorWindow {
...
// 模态显示
public void Show( ) {
// 从根目录获取模态
Modal modal = rootVisualElement.QRoot<Modal>();
if( modal != null ) modal.Show( );
}
// 隐藏模态
public void Hide( ) {
// 从根目录获取模态
Modal modal = rootVisualElement.QRoot<Modal>();
if( modal != null ) modal.Hide( );
}
// 莫代尔的切换
public void Toggle( ) {
// 从根目录获取模态
Modal modal = rootVisualElement.QRoot<Modal>();
// 动画时间可以作为参数传递
if( modal != null ) modal.Toggle( 500 );
}
...
}
总结
「UIElements Expansions: Modal」强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。
通过使用模态,您将能够创建更用户友好的GUI。
该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。
如果您有兴趣,请务必考虑一下,因为它在资产商店出售!