【Unity】UIElements Expansions: Navigation

UIElements Expansions是Unity Editor的扩展资产。

UIElements Expansions: Navigation

「UIElements Expansions: Navigation」系列强烈支持「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: Navigation」主要支持以下功能。

  • UIElements Expansions通用功能
    • 全局样式表
    • 检查器自动转换功能
    • 添加标签/功能
    • 附加类
  • 导航
  • 响应对应
  • 侧导航

UIElements Expansions通用功能

请参阅以下页面。

【Unity】UIElements Expansions

导航

在「UIElements Expansions:Navigation」中,可以安装您在网站上经常看到的「标题导航」等。

您可以在页眉中设置页面标题和菜单,并可以在菜单中设置鼠标悬停弹出的子菜单。

每个菜单都允许您在单击时执行静态方法或切换页面。

由于您可以执行静态方法,您还可以使用Application.OpenURL打开外部站点,或者运行ExecuteMenuItem来运行Unity菜单。

响应对应

头导航支持响应,通过减小窗口大小,菜单部分看起来像手风琴菜单。

您无需进行任何特殊设置,可以使用在标题导航中设置的菜单,包括子菜单。

侧导航

「UIElements Expansions:Navigation」可以使用应用程序和网站上常见的「侧导航」。

在「侧导航」中,通过单击按钮从侧面显示菜单。

由于您可以在菜单中自由编写UXML标签,因此您不仅可以放置菜单,还可以放置图像和配置文件。

显示/隐藏侧面导航显示为动画,如现代HTML网站和应用程序。

利用方法

导入

请从Unity Asset Store购买。

购买后可从「我的资产」导入。

导航

要设置「标题导航」,请使用「editor:Navigation」标签。「editor:Navigation」将标题和菜单内容嵌套在标签中。

<editor:Navigation>
  Any contents
</editor:Navigation>

使用「engine:Label」标签描述标题,并使用「editor:BindableButton」描述菜单。如果要构建子菜单,请描述「editor:MenuGroup」标签并在其中设置「editor:BindableButton」或「editor:MenuGroup」。

<!-- Navigation -->
<editor:Navigation sidenav-target="sidenav">

  <!-- Navigation Title -->
  <engine:Label text="UIElements Expansions: Navigation" />

  <!-- Menu 1 -->
  <editor:BindableButton text="UIElements Expansions" assembly="UnityEditor" type="UnityEditor.EditorApplication" method="ExecuteMenuItem" value="Masamune/UIElements Expansions" />

  <!-- Menu 2 -->
  <editor:MenuGroup text="Links">
    <!-- SubMenu 1 -->
    <editor:BindableButton text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
    <!-- SubMenu 2 -->
    <editor:BindableButton text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
    <!-- SubMenu 3 -->
    <editor:MenuGroup text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net">
      <editor:BindableButton text="Masamune framwork" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net/unity/masamune/" />
      <editor:BindableButton text="UIElements Expansions" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net/unity/uielements/" />
    </editor:MenuGroup>
  </editor:MenuGroup>
</editor:Navigation>

「MenuGroup」可以像BindableButton一样设置「assembly」和「方法」等属性。

如果已设置,则执行单击与BindableButton相同的操作时指定的操作,并在鼠标悬停时显示子菜单。如果未设置,则在鼠标悬停时显示子菜单,单击时不执行任何操作。

响应对应

「标题导航」将自动响应。没有特别设定。

侧导航

侧导航的设置方法

「侧导航」使用「editor:Sidenav」标签。

<editor:Sidenav>
  Any contents
</editor:Sidenav>

内部可以自由设置UXML标签。当您捏「engine:ScrollView」时,如下例所示,您可以在侧面导航中滚动,因此即使内部内容较多也没有问题。

<editor:Sidenav>
  <engine:ScrollView>
    <editor:BindableImage src="https://storage.googleapis.com/media.mathru.net/1/2019/10/7e24dc4f39aafb5a70dbb55aa8fd84de.png" />
    <engine:H1 text="mathru.net" />
    <editor:BindableButton class="list" text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
    <editor:BindableButton class="list" text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
    <editor:BindableButton class="list" text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
  </engine:ScrollView>
</editor:Sidenav>

您还可以通过将其与「engine:Template」结合使用来使用模板。这允许您使用外部UXML文件。

<engine:Template path="Assets/.../Sidenav.uxml" name="Sidenav" />
<editor:Sidenav template="Sidenav" />

侧面导航显示

如果要显示侧面导航,请使用基于BindableButton的标签,例如「BindableButton」或「BindableIconButton」。

<editor:BindableButton text="Show" target="sidenav" control="show" />

<editor:Sidenav name="sidenav">
  <engine:ScrollView>
    <editor:BindableImage src="https://storage.googleapis.com/media.mathru.net/1/2019/10/7e24dc4f39aafb5a70dbb55aa8fd84de.png" />
    <engine:H1 text="mathru.net" />
    <editor:BindableButton class="list" text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
    <editor:BindableButton class="list" text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
    <editor:BindableButton class="list" text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
  </engine:ScrollView>
</editor:Sidenav>

将「editor:Sidenav」标签设置为「name」属性,并将与「BindlableButton」中设置的「name」属性相同的名称设置为「target」属性。然后通过将「control」设置为「show」属性来显示指定的侧面导航。

头部导航和侧面导航的组合

如果要在头部导航的适当位置安装侧面导航激活按钮,可以使用「editor:Navigation」标签的「sidenav-target」属性。显示具有指定名称的侧面导航的按钮位于头部导航中。

<editor:Navigation sidenav-target="sidenav">
  <engine:Label text="UIElements Expansions: Navigation" />
  <editor:BindableButton text="UIElements Expansions" assembly="UnityEditor" type="UnityEditor.EditorApplication" method="ExecuteMenuItem" value="Masamune/UIElements Expansions" />
  <editor:MenuGroup text="Links">
    <editor:BindableButton text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
    <editor:BindableButton text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
    <editor:MenuGroup text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net">
      <editor:BindableButton text="Masamune framwork" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net/unity/masamune/" />
      <editor:BindableButton text="UIElements Expansions" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net/unity/uielements/" />
    </editor:MenuGroup>
  </editor:MenuGroup>
</editor:Navigation>

<editor:Sidenav name="sidenav">
  <engine:ScrollView>
    <editor:BindableImage src="https://storage.googleapis.com/media.mathru.net/1/2019/10/7e24dc4f39aafb5a70dbb55aa8fd84de.png" />
    <engine:H1 text="mathru.net" />
    <editor:BindableButton class="list" text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
    <editor:BindableButton class="list" text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
    <editor:BindableButton class="list" text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
  </engine:ScrollView>
</editor:Sidenav>

总结

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

此外,通过使用导航功能,可以在编辑器窗口等中正确地向用户提供菜单。

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

如果您有兴趣,请务必考虑一下,因为它在资产商店出售！

发表评论

您的电子邮箱地址不会被公开。

前の記事

【Unity】UIElements Expansions: V…

次の記事

【Unity】Localize - Masamune fram…