【Unity】UIElements Expansions: Router

UIElements Expansions はUnityエディター用の拡張アセットです。

「 UIElements Expansions: Router 」はUnity2019.1から導入が始まった「 UIElements 」を強力にサポートします。

UIElements とはUnity2019.1から導入が始まった現在のUnityエディターのGUIシステム（IMGUI）を置き換える機能です。

Unity向けのHTML「 UXML 」、Unity向けのスタイルシート「 USS 」を組み合わせてHTMLとCSSでwebページを作るかのごとくUnityのGUIを制作できます。

もちろんこれまでのように エディタースクリプト でエディター用の処理を記述できますし、 jQuery のようなメソッドが用意されているため、 HTML5のような動的なGUIを作ることができます 。

将来的にはエディターだけでなくランタイムのGUI（現在の uGUI ）を置き換えると計画されており、 将来のUnityのGUIを任せられると期待される存在 なのです。

ただポテンシャルは高いのですがまだ導入されたばかりなので 本格的に使用するにはまだまだ機能が足りません 。

「 UIElements Expansions 」はその 足りない部分を強力にサポートするアセット です。

この「 UIElements Expansions: Router 」は主に下記の機能をサポートしています。

• UIElements Expansions共通機能
  • グローバルスタイルシート
  • インスペクター自動アサイン機能
  • 追加タグ / 機能
  • 追加クラス
• ルーティング機能

下記のページを参照ください。

ルーティング機能は簡単な機能です。 単にプロジェクト内に置かれたUXMLファイルとルーティングパスの関連付けを行います 。

しかしUXMLファイルの表示領域である「 Page 」タグとUXMLファイルの切り替えを行う「 RoutableButton 」や「 BindableButton 」と併用することによりUnityエディターに シンプルなページ遷移の仕組み を導入することができるようになります。

Unity Asset Store からご購入ください。

購入後「 マイアセット 」からインポートすることができます。

ルーティング機能によるページ遷移を行うには ３つの準備 を行う必要があります。

1. UXMLファイルとルーティングパスの関連付け
2. 表示領域に Page タグの追加
3. 切り替え用のボタンの配置

UXMLファイルとルーティングパスの関連付けには３つの方法があります。

1. Routerタグに直接パスを記述
2. Importタグを用い、まとめてRouterタグを記述したUXMLファイルをロード
3. path属性を用い、UXMLファイルごとにパスを記述

engine:Router タグを用いて直接ページ遷移を行うUXMLファイルにルーティングパスを記述することができます。 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" />

engine:Import タグを用いるとRouterタグをまとめて記述した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>

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>

表示領域を作成し、そこにルーティングされたUXMLファイルを表示します。

engine:Page タグを記述し、 path 属性に表示するUXMLファイルのルーティングパスを記述します。下記例では最初に「 /uielements/router 」のパスにあるUXMLファイルが表示されます。（つまり「 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>

Pageタグは複数設置することができるのでうまく名前を使い分けることができればページの一部情報のみを切り替えていくことが可能です。

「 UIElements Expansions: Router 」はUnity2019.1から導入が始まった「 UIElements 」を強力にサポートします。特にこれまでエディタースクリプトを書く必要があった インスペクターのデザインを簡単に記述することができるようになります 。

また、ルーティング機能を用いることで ページ遷移を簡単に実装することができる のでドキュメントやチュートリアルの作成に便利になるでしょう。

デザインは フラットデザインを導入し一気にカッコよくなるUnity2019.3にマッチする形に整えている ので気持ちよく使うことができるでしょう。

気になりましたら アセットストアで販売しています ので是非ご検討ください！

UIElements Expansions: Router | GUI Tools | Unity Asset Store

Use the UIElements Expansions: Router from mathru.net on your next project. Find this GUI tool & more on the Unity Asset Store.

https://assetstore.unity.com