【Unity】UIElements Expansions: Navigation - mathru.net | Flutter/Unityによるアプリ開発/楽曲・映像制作/素材配布
2020-04-03
Development Unity UIElements AssetStore CSharp

【Unity】UIElements Expansions: Navigation

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

UIElements Expansions: Navigation

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

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: Navigation 」は主に下記の機能をサポートしています。

  • UIElements Expansions共通機能
    • グローバルスタイルシート
    • インスペクター自動アサイン機能
    • 追加タグ / 機能
    • 追加クラス
  • ナビゲーション
  • レスポンシブ対応
  • サイドナビゲーション

UIElements Expansions共通機能

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

ナビゲーション

image block

「 UIElements Expansions: Navigation 」では、ウェブサイトなどでよく見かける「 ヘッダーナビゲーション 」を設置することが可能です。

ヘッダーに ページタイトル や メニュー を設置することができ、メニューにはマウスオーバーでポップアップして表示される サブメニュー を設置することができます。

各メニューには、クリック時に静的メソッドを実行させたり、ページを切り替えたりすることができます。

静的メソッドを実行できるので、 Application.OpenURL で外部サイトを開いたり、 ExecuteMenuItem を実行してUnityのメニューを実行させることも可能です。

レスポンシブ対応

image block

ヘッダーナビゲーションは レスポンシブ対応 しており、ウインドウサイズを小さくすることでメニュー部分がアコーディオンメニューのようになります。

特別な設定を行う必要はなく、ヘッダーナビゲーションで設定したメニューがサブメニューを含めそのまま利用可能です。

サイドナビゲーション

image block

「 UIElements Expansions: Navigation 」では、アプリやウェブサイトでよくある「 サイドナビゲーション 」が利用できます。

「 サイドナビゲーション 」ではボタンをクリックすることでサイドからメニューが表示されます。

メニュー中には自由にUXMLタグを記述できるのでメニューだけでなく画像やプロフィールなどを載せることも可能です。

サイドナビゲーションの表示・非表示はモダンなHTMLサイトやアプリのようにアニメーションで表示されます。

利用方法

インポート

image block

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

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

ナビゲーション

「ヘッダーナビゲーション」を設置するには「 editor:Navigation 」タグを利用します。「 editor:Navigation 」タグにネストする形でタイトルやメニューコンテンツを配置していきます。

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

タイトルは「 engine:Label 」タグを使って記述し、メニューは「 editor:BindableButton 」を用いて記述します。またサブメニューを構築したい場合は「 editor:MenuGroup 」タグを記述しその中に「editor:BindableButton」や「editor:MenuGroup」を設置します。

Copy 
<!-- 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」や「method」といった属性を設定可能です。

設定した場合はBindableButtonと同じ用にクリック時に指定した動作を行い、マウスオーバー時にサブメニューを表示します。設定しない場合はマウスオーバー時にサブメニューを表示し、クリック時にはなにも行いません。

レスポンシブ対応

「ヘッダーナビゲーション」は自動的にレスポンシブ対応します。特に設定することはありません。

サイドナビゲーション

サイドナビゲーションの設置方法

「サイドナビゲーション」は「 editor:Sidenav 」タグを利用します。

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

内部には自由にUXMLタグを設置することが可能です。下記の例のように「 engine:ScrollView 」を挟むとサイドナビゲーション内でスクロールできるようになるので中のコンテンツが多くなっても問題ありません。

Copy 
<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ファイルを利用することもできます。

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

サイドナビゲーションの表示

サイドナビゲーションを表示したい場合は、「 BindableButton 」や「 BindableIconButton 」といったBindableButton系のタグを利用します。

Copy 
<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 」属性を利用すると便利です。指定した名前のサイドナビゲーションが表示されるボタンがヘッダーナビゲーションに設置されます。

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

また、ナビゲーション機能を用いることでエディターウインドウなどにおいて 適切にユーザーにメニューを提供することが可能 です。

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

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

UIElements Expansions: Navigation | GUI Tools | Unity Asset Store
Use the UIElements Expansions: Navigation from mathru.net on your next project. Find this GUI tool & more on the Unity Asset Store.
https://assetstore.unity.com https://assetstore.unity.com
title
Development Unity UIElements AssetStore CSharp
【Unity】Localize - Masamune framework

Development Unity Masamune AssetStore CSharp

◀︎ Next
【Unity】UIElements Expansions: Video

Development Unity UIElements AssetStore CSharp

▶︎ Previous
↑Top
Categories
Application Development Works Books Music Assets Blog
Menu
mathru.netについて 仕事や案件のご依頼について お問い合わせ プライバシーポリシー 利用規約 児童の性的虐待および搾取（CSAE）に関するポリシー ユーザーアカウント・データの削除方法 楽曲の利用に関して
Link
Github YouTube X (Twitter) TikTok Instagram Facebook LinkedIn Booth note