【Unity】UIElements Expansions

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

「 UIElements Expansions 」シリーズは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 」シリーズでは現在主に下記のアセットの配信を行っています。

ここではこれらのアセットに共通する機能を紹介していきます。

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

USSの元となった CSS は通常共通のファイルをひとつ以上作り、それをHTMLのヘッダーでまとめて読み込む、という使い方をします。

グローバルスタイルシート はCSSと同じような使い方を実現することができるようになります。

UnityではコンポーネントやスクリプダブルオブジェクトなどのインスペクターのGUIを自由に書き換えることができます。ただその場合、そのコンポーネント用に独自にエディタースクリプトを記述する必要があります。

UXMLで構成をHTMLのように記述することができるようになりましたが作成したUXMLをどのコンポーネントにアサインするかをエディタースクリプトで記述する必要があり若干面倒です。

「 インスペクター自動アサイン機能 」はエディタースクリプトを記述せずともUXMLのファイル名だけでどのコンポーネントで利用するかを自動で判別し、自動でアサインしてくれるようになります。

UIElementsでは独自のUXMLタグを追加して スタイルを適用したり機能を持たせることができます。UIElements Expansionsでは 複数の便利なタグを追加 しておりUIElementsの利用をサポートします。

現在追加されているUXMLタグは以下のとおりです。

• Div
  • VisualElementのエイリアスです。機能は特に無く、USSの指定に利用します。
• Header、Footer、Main、Article
  • VisualElementのエイリアスです。 機能は特に無く、 USSの指定に利用します。
• H1～H6
  • Labelのエイリアスです。 機能は特に無く、 USSの指定に利用します。
• BindableImage
  • シリアライズされたプロパティから画像を取得し表示できます。また外部のURL（http://～）の利用も可能です。
• BindableButton
  • Editor専用のButtonです。UXML上からメソッド名や値を指定してスクリプトを記述することなく静的メソッドの実行を指定できます。また、テンプレートと組み合わせて、テンプレートの切り替えを行うことも可能です。
• BindableLabel、BindableH1～H6
  • シリアライズされた文字列変数をラベルとして表示できます。
• BindableListView
  • PropertyFieldの配列/List専用のエイリアスです。配列/ListのUSSの指定に最適化されています。

UIElementsでは独自のUSSクラスを用いてデザインを行います。「 UIElements Expansions 」シリーズではいくつかの便利クラスが用意されているのでUSSによるデザイニングをサポートします。

• カラークラス
  • 状態に応じたカラークラスを用意しています。
• ボタン用クラス
  • ボタンのデザインを変更します。

下記の「 UIElements Expansions 」シリーズのいずれかをご購入ください。

この記事に記載されている機能は「 UIElements Expansions 」シリーズで共通して利用することができます。

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

そのままでも利用できます。

「 Assets/Masamune/Modules/unity.style/Styles 」フォルダにある「 PersonalStyle 」と「 ProStyle 」を編集してください。

通常の場合は 「 PersonalStyle 」 、Unity ProやPlusで使用できるプロスキン（黒ベースのスキン）をお使いの場合は「 ProStyle 」を編集することで即座にスキンが反映されます。

「 Assets/Masamune/Modules/unity.style/Resources 」フォルダにある「 EditorStyleInfo 」 を選択します。インスペクターに編集画面が表示されます。

「 StyleSheet Settings 」のタブを開くと「 Style Sheets 」と「 Style Sheets For Pro Skin 」のリストが表示されるはずです。それぞれ 通常のエディター と プロスキンを適用したエディター のスタイルファイルを指定しています。

ここからスタイルファイルを追加することができます。 下にあるほど優先順位が高い ので必要に応じ順番を入れ替えてお使いください。

作成した「 MonoBehaviour 」や「 ScriptableObject 」を継承したクラスと 同じ名前 のuxmlファイルを作成することで作成したクラスのインスペクター画面にuxmlを適用することができるようになります。

「MonoBehaviour」を継承した「 MyMonoScript 」を作成します。

// MyMonoScript.cs
public class MyMonoScript : MonoBehaviour {
  public string name;
  public int age;
  ...
}

同じ「 MyMonoScript 」というuxmlファイルを作成します。（ Assetsフォルダ以下であればどこでもOK ）

// MyMonoScript.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"
>
  <editor:PropertyField binding-path="name" class="box" />
  <editor:PropertyField binding-path="age" class="box" />
</engine:UXML>

これでUIElementsのスタイルが適用された インスペクター画面が表示されます。

Listや配列内の独自クラスなど「MonoBehaviour」や「ScriptableObject」でこの機能を利用したい場合、「 SerializableBehaviour 」を継承することで実現することができます。

利用方法は、「MonoBehaviour」や「ScriptableObject」継承クラスと同じように「 SerializableBehaviour 」を継承したクラス「MySerializable」を作ります。独自クラスはシリアライズ可能なことを明示しなければいけないため [System.Serializable] 属性を付与します。

// MySerializable.cs
[System.Serializable]
public class MySerializable : SerializableBehaviour {
  public string name;
  public int age;
  ...
}

同じように「MySerializable」というuxmlファイルを作成します。

// MySerializable.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"
>
  <editor:PropertyField binding-path="name" class="box" />
  <editor:PropertyField binding-path="age" class="box" />
</engine:UXML>

これで「MySerializable」クラスもインスペクターでUIElementsが適用された状態で表示されます。

すでに エディタースクリプト を作成している方もいらっしゃるかもしれません。エディタースクリプトで特定のクラスのインスペクター画面を変更されている場合は 作成したエディタースクリプトが優先 されます。

「 Div 」タグは「 VisualElement 」のエイリアスです。 VisualElement と同じ機能が使えます。

<engine:Div>
  他のUXMLタグ
</engine:Div>

「 Header 」「 Footer 」「 Main 」「 Article 」タグは「 VisualElement 」のエイリアスです。 VisualElement と同じ機能が使えます。

<engine:Header>
  他のUXMLタグ
</engine:Header>

「 H1 」「 H2 」「 H3 」「 H4 」「 H5 」「 H6 」タグは「 Label 」のエイリアスです。 Label と同じ機能が使えます。

表題用に追加されたタグで、 表題用のUSSクラスが予め適用されています。

<engine:H1 text="１番大きいタイトル" />
<engine:H2 text="２番目に大きいタイトル" />
<engine:H3 text="３番目に大きいタイトル" />

「 BindableImage 」は「Image」タグの拡張を行うEditor専用のタグです。 Image の機能に加え、いくつかの機能が使えます。

「 src 」属性を利用することで外部URLの画像を読み込んで表示することができます。

<editor:BindableImage src="外部URL" />

インターネットに接続されていないとき、外部URLにアクセスできないときは画像が表示されないことにご注意ください。

「 binding-path 」属性を利用することで、「 PropertyField 」などと同じ様にシリアライズされた値を読み込むことができます。

<editor:BindableImage binding-path="シリアライズされた変数名" />

「 BindableButton 」は「Button」タグの拡張を行うEditor専用のタグです。 Button の機能に加え、いくつかの機能が使えます。

「 アセンブリ名（省略可） 」「 タイプ名（namespace込み） 」「 メソッド名 」を指定することで、ボタンが押された際のメソッドの実行をUXML上から指定できます。

<editor:BindableButton class="list" text="Beep" assembly="UnityEditor" type="UnityEditor.EditorApplication" method="Beep" />

また「 value 」属性を指定することで引数が文字列のメソッドに値を渡すことができます。

<editor:BindableButton class="list" text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />

「 Template 」タグと組み合わせて、UXML内のテンプレート切り替えを行うことも可能です。

<engine:Template path="Assets/Masamune/UIElements.Expansions.ResponsiveGrid/Assets/Styles/Articles/About.uxml" name="About" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.ResponsiveGrid/Assets/Styles/Articles/ResponsiveGrid.uxml" name="ResponsiveGrid" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.ResponsiveGrid/Assets/Styles/Articles/ReorderableList.uxml" name="ReorderableList" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.ResponsiveGrid/Assets/Styles/Articles/Card.uxml" name="Card" />

<engine:Instance template="About" name="main">
</engine:Instance>

<editor:BindableButton text="About" path="About" target="main" />
<editor:BindableButton text="Reorderable List" path="ReorderableList" target="main" />
<editor:BindableButton text="Responsive Grid" path="ResponsiveGrid" target="main" />
<editor:BindableButton class="list" text="CardView / CardList" path="Card" target="main" />

上記例の場合、最初にAbout.uxmlの中身が「 name="main" 」に表示されます。各ボタンをクリックすることにより「 path 」属性に記載されてある名前のテンプレートが「 target 」属性に記載されてある名前の場所、つまり「 name="main" 」の中身に反映されます。

「 BindableLabel 」「 BindableH1~H6 」 は「Label」タグの拡張を行うEditor専用のタグです。 Label の機能に加え、いくつかの機能が使えます。

「 binding-path 」属性を利用することで、「 PropertyField 」などと同じ様にシリアライズされた値を読み込むことができます。

<editor:BindableLabel binding-path="シリアライズされた変数名" />
<editor:BindableH1 binding-path="シリアライズされた変数名" />
<editor:BindableH2 binding-path="シリアライズされた変数名" />
<editor:BindableH3 binding-path="シリアライズされた変数名" />

「 BindableListView 」は「PropertyField」タグを配列/List用に最適化させたEditor専用のタグです。 PropertyField のクラスパスに変更を加えています。

「 BindableListView 」では配列の各子要素をチェックしており、子要素が下記条件の場合「 unity-listview-field__content 」クラスを付与したVisualElementをそれぞれの子要素の外側に配置しております。

• 子要素が 配列/List でない
• 子要素に PropertyDrawer が設定されていない

これにより配列が 単一要素 と 複数要素 に分類可能になり、 単一要素のときのみボックスで囲む といったUSSの指定が可能になります。

// 単一要素のみ囲む
BindableListView .unity-listview-field__content {
    margin: 2px 0 2px 0;
    padding: 2px;
    color: #888;
    border-width: 1px;
    border-color: #212121;
    background-color: #2f2f2f;
}

下記のカラークラスをclass属性に追加することで特定のタグにおいてそれぞれの色を利用することができます。

Modal や Button などでカラークラスを指定するとそれぞれの色に変更されます。

<engine:Button class="warning" text="Warning Button" />

下記のボタンクラスを用いることでボタンのスタイルを変更させることができます。上記のカラークラスと合わせてご利用ください。

Button や BindableButton などで利用することができます。

<editor:BindableButton class="warning outline" text="Outlined Warning Button" />

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

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

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

mathru.net · Publisher Profile | Unity Asset Store

Create A “Creation”<br /> <br /> Delivering scripting support and editor support assets centered on the Masamune framework.<br /> We also accept orders for other Unity development.<br /> <br /> For details, please visit the following website.<br /> <a href=“https://mathru.net”>https://mathru.net</a>

https://assetstore.unity.com