Grid Layout Groupに追加されたGameObjectをソート
概要
ゲーム中のアイテムリスト、カードリスト等、ScrollViewなどでグリッドレイアウトは頻繁に使用されますが、これはUnity標準のコンポーネントであるGrid Layout Groupで解決することができます。
しかし、そういったリストの大半はソート機能が必要になる場合がほとんどです。
調べた限り、UnityにはのGrid Layout Group上に配置された子GameObjectをソートするような機能は、標準で存在しないようです。
本記事はGrid Layout Groupのソートについて、メモレベルで説明します。
Grid Layout Groupの使い方そのものについては、本記事の下部に記載している参考記事などをご参照下さい。
想定
Grid Layout Group(以降Contentと呼ぶ)に対して、以下ように、Prefabを子GameObject(以下セルと呼ぶ)として動的に生成、関連付けている。
var childObj = Instantiate(/* セルのPrefab */); // セルを生成
childObj.transform.parent = contentObj.transform; // セルをContent配下に配置
この状態から昇順／降順にソートしたい、というシチュエーションを想定しています。
やりかた
以下に雰囲気コードを示します。
var childObjs = /* 何らかの方法でContent内のセル(GameObject)の一覧を取得 */;
var siblingIndexes = childObjs.Select(c => c.transform.GetSiblingIndex()).Reverse().ToArray();
for (var i = 0; i < childObjs.Count; i++) {
childObjs[i].transform.SetSiblingIndex(siblingIndexes[i]);
}
コード解説
- セルをSelectし、全SiblingIndexを取得(GetSiblingIndex)します。
- 前項で取得したSiblingIndexをReverseし、逆順のSiblingIndexを取得します。
- セルを元の順番で順次参照し、前項のSiblingIndexをセット(SetSiblingIndex)します。
補足
ある階層に並列で配置されたオブジェクト、すなわち兄弟(Sibling)間のオブジェクトの表示順序は、Unityにより管理されるSiblingIndexによって決定されています。
このSiblingIndexは、例えばContent以下の兄弟オブジェクトの場合、Unityのエディタ上の見た目そのまま、Hierarchyの表示順に、0から順に振られています。
例:Hierarchyがこんな感じとした場合のSiblingIndex
...
└ Content // ScrollViewのContentとか
├ childObjA // 0
├ childObjB // 1
├ childObjC // 2
└ childObjD // 3
...
Grid Layout Groupの１セルの表示順（Hierarchyの配置順）はSiblingIndexにより決定しています。
ですので、セルのソートを反転したい場合は、現在のSiblingIndexを逆順で取得(GetSiblingIndex)し、
それを現在のセルの配置順に上書き(SetSiblingIndex)していくことでセルの表示順を反転させることができます。
例:すべてのセルのSiblingIndexをReverseしてセットし直した状態のHierarchy
...
└ Content // ScrollViewのContentとか
├ childObjD // 0
├ childObjC // 1
├ childObjB // 2
└ childObjA // 3
...
応用メモ
単純なソートは昇順／降順ソートは上記のように行うことができますが、
たとえば、セルであるGameObjectにスクリプトをアタッチし、そこに「種別」などの情報をもたせて、より複雑なソートアルゴリズムを適用できるでしょう。
今回例に示したソースはReverseを使用して単純反転させましたが、特にこれを使用しなければならないという事はありません。
参考資料
Grid Layout Groupの使い方
https://qiita.com/t_Kaku_7/items/588fada25cf2d519589d
https://tech.pjin.jp/blog/2016/08/30/unity_skill_3/
SiblingIndexについて
https://forum.unity.com/threads/order-of-elements-in-layout-groups.267668/
https://qiita.com/T_2/items/69c22e649441055d2329