【Unity】UIElements Expansions: Reorderable List

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

UIElements Expansions: Reorderable List

UIElements Expansions: Reorderable List」は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: Reorderable List」は主に3つの機能をサポートしています。

  • グローバルスタイルシート
  • インスペクター自動アサイン機能
  • Reorderable List

グローバルスタイルシート

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

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

インスペクター自動アサイン機能

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

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

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

Reorderable List

Reorderable ListはIMGUIでも使える便利な機能です。シリアライズされたList<T>配列を直感的に操作でき、その順番を自由に変更できます。ただ、IMGUI時代でもその実装は複雑でとても面倒なものでした。

さらにUIElementsでは実装する手段すらないので、結局IMGUIを利用するしかありません。そのためUIElementsのUSSが適用できず、デザインを自由に設定することができません。

また、IMGUIのReorderable Listはパフォーマンスが悪く、要素数が大量になるとインスペクターのレスポンスがとても遅くなるという欠点があります。

UIElements Expansions: Reorderable Listは、UIElementsで新しく作成したReorderable Listを利用することができます。

IMGUIでのReorderable Listの機能そのままにUSSによる細かいデザインの調整が可能になり、大幅な軽量化に成功しました。

利用方法

インポート

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

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

グローバルスタイルシート

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

スタイルを変更したい

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のスタイルが適用された インスペクター画面が表示されます。

MonoBehaviourやScriptableObject以外での利用

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が適用された状態で表示されます。

エディタースクリプトとの併用

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

Reorderable List

特定クラス内のList配列のインスペクターでの表示をReorderable Listにしたい場合は、クラスのuxmlファイル内に以下のように記述します。

<editor:ReorderableList binding-path="適用したいListや配列の変数名" />

これで自動でスタイルが適用されたReorderable Listが表示されます。

Reorderable List内の要素にスキンを適用したい

通常のスタイルシートの記述ではReorderableList内の要素のスタイルを変更することはできません。

ただし、他の要素と同じように内部のクラスが用意されているので各クラスを指定することでスタイルを変更することが可能です。

.unity-reorderable-list : Class that specifies the entire Reorderable List
 .unity-reorderable-list__header : Header part
     .unity-reorderable-list__icon : Icon in header
     .unity-reorderable-list__label : Label in header
     .unity-reorderable-list__add : Add button in header
     .unity-reorderable-list__remove : Remove button in header
 .unity-reorderable-list__content : Content part
     .unity-reorderable-list__item : Each element in the content
         .unity-reorderable-list__handle : Handle within each element
         .unity-reorderable-list__single : The part excluding the handle when each element is a single field (primitive type such as string or int)
 .unity-reorderable-list__footer : Footer part 

具体的な内容は 「Assets/Masamune/Modules/unity.style/Styles」フォルダにある「PersonalStyle」と「ProStyle」を参考にしてください。

まとめ

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

また、「Reorderable List」を用いることでList形式のデータの編集が容易になります

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

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

コメントを残す

メールアドレスが公開されることはありません。