【Unity】UIElements Expansions: Reorderable List

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

「UIElements Expansions: Reorderable List」は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: 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からご購入ください。

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

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

<editor:ReorderableList binding-path="適用したい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にマッチする形に整えているので気持ちよく使うことができるでしょう。

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

UIElements Expansions: Reorderable List | GUI Tools | Unity Asset Store

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

https://assetstore.unity.com