ReorderableListとPropertyDrawerを組み合わせて使う

たびたびですがちょびえです。今日はReorderableListとPropertyDrawerの組み合わせで悩んでしまったのでまた書いときます。

UnityEditorで並び替えできるリストが欲しい

となると、あまり説明がされていないReorderableListをつかうのがとても良い感じです。が海外でも日本でもReorderableListとPropertyDrawerの組み合わせって
分かりやすい解説がなくこんがらがりがちです。御多分にもれずハマってしまったので忘れないように書いときます。

PropertyDrawer

PropertyDrawerはSystem.SerializableのAttributeを付けたPrimitiveやクラスなどをいい感じに表示してくれる機能です。
カスタムInspectorはComponentと対、カスタムPropertyDrawerはプロパティやフィールドと対になっています。

例えば、PersonDataというクラスがあるとして、PropertyDrawerをカスタムしたい場合は下記のようにします。

AddressbookというMonobehaviourを継承したクラスを作成し、PersonDataをもたせてみます

この状態でGameObjectにアタッチすると、このような表示になります。

before_propertydrawer

この場合そのままでも十分見やすい状態なのですが、PropertyDrawerを使ってdataフィールドの表示を変更してみたいと思います。
下記スクリプトをEditor/PersonDataDrawer.csという名前で保存して再読み込みをしてください。

after_propertydrawer

このように、dataフィールドのInspectorでの見た目をカスタムすることができました。
今回の場合、もともとの状態のほうが見やすいのですが自前でカスタムすることができる、というのがわかればOKです。

ReorderableListと組み合わせしてみる

ReorderableListはMecanimなどのPriority変更などで使われているUI部分です。順番が重要なリストをInspector上で変更したい場合はReorderableListを使うのが
現実的な手段だと思います。
Addressbookのカスタムインスペクターを作成し、自前でAddressbookのInspectorを描画できるようにします。

下記スクリプトをEditor/AddressbookInspector.csで保存します。

ついでにAddressbook.csのPersonDataもReordableListで扱いやすいように配列にしておきましょう。

この状態で最新の状態にするとInspectorが次のような表示になります。

reordablelist_1

右下の+ボタンを押すことで行を追加することができます。

reordablelist_2

ReordableListへのイベント追加、登録が若干適当ではありますがまぁまぁ、、、、うごいているので良しとしましょう。
実際に使う場合はReordableListのイベントを正しく設定してください。ドキュメントに記載がありませんが、安藤さんのUnityEditor拡張に詳しく記載あったり、下記ページにイベントについて書いてあったりします。

http://www.toxicfork.com/90/fixed-width-labels-for-fields-in-unity3d

まとめ

簡単ではありますが、ReorderableListとPropertyDrawerを組み合わせた場合のやり方についてまとめました。
primitiveな配列以外を保存したり、描画しようとするとカスタムインスペクター+drawElementCallbackだとかなりつらい感じになってしまうので
PropertyDrawerを作成して利用するのが作り方的にもやりやすいかと思います。

ではでは。

Author: chobi_e

課題になりそうなのがあったら広く浅くジャンル問わず解決していくスタイル。最近もっぱらUnity使うので言語はC#メインですが以前はPHP, Go, Cをよく書いていたなんでもやさん。 利用ツール: Unity, Photoshop, ClipStudio, Blender, ZBrush, houdini, AfterEffects, FilterForge, SubstanceDesigner, Illustrator, Maya, Cubaseなどなど