【Unity】UIElements Expansions: Modal

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通用功能

请参阅以下页面。

【Unity】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 );
   }
   ...
}