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 」は主に下記の機能をサポートしています。
-
UIElements Expansions共通機能
- グローバルスタイルシート
- インスペクター自動アサイン機能
- 追加タグ / 機能
- 追加クラス
- Reorderable List
UIElements Expansions共通機能
下記のページを参照ください。
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 からご購入ください。
購入後「 マイアセット 」からインポートすることができます。
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にマッチする形に整えている ので気持ちよく使うことができるでしょう。
気になりましたら アセットストアで販売しています ので是非ご検討ください！
