Unityでボタンなどを配置していると描画順の設定が分からなくなって調べました。描画順を制御する設定は「SortingLayer」「Order in Layer」の2種類です。それとは別に「Layer」という設定があり混乱しました。ややこしい。
なお、描画順は「SortingLayer」「Order in Layer」以外にもカメラの設定の影響も受けるんですが本記事では扱っていません。というか調べきれてません。
描画順に関するドキュメントはこちら
docs.unity3d.com
SortingLayer と Order in Layer
SortingLayer は複数のスプライト(2Dオブジェクト)の順序を設定できます。同じSortingLayer 内はOrder in Layerで順序を設定できます。
Layer
Layerは描画順に影響ありません。同じレイヤーを表示非表示したり、ライトを照らすかどうかなどに使います。
docs.unity3d.com
動作確認
ボタン、テキスト、パーティクルシステムを使って描画順を確認しました。
ButtonやTextはuGUIの一つ
ButtonやTextはuGUI(UnityのUIシステム)と呼ばれます。uGUIは単体で配置できずCanvasの子として配置します。また、今回設定したい「SortingLayer」「Order in Layer」はCanvasにしか設定できません。Canvas内のButtonとButtonの間に別のSpriteを配置したい場合はCanvasを分ける必要があります。さらにCanvasを配置した直後はRenderModeが最前面固定の「Screen Space - Overlay」になっているため、「SortingLayer」などが変更できませんので注意です。RenderModeは「Screen Space - Camera」を選択してください。
また、同Canvas内のButton等の順番はHierarchyの順と一致します。たとえば、Button2とButton1の並びが下記の場合はButton2が上になります。
反対にするとButton1が上になります。
Particle Systemの画像はスプライト
Particle Systemは「SortingLayer」「Order in Layer」が設定できます。Renderer設定内に「SortingLayer」「Order in Layer」があります。
SortingLayerの設定
Sorting Layerの設定項目からAdd Sorting Layer ...をクリックすると、SortingLayerを設定する画面になります。その中でレイヤーを追加したり順番を入れ替えてレイヤーを設定をします。その後、各スプライトの「SortingLayer」を変更します。
Order in Layer
同じSorting Layerが設定されたスプライト順が設定できます。入力数値が大きければ前面になります。
今回の設定
今回のヒエラルキーの設定です。
Button1-1とButton2-1の間にパーティクルを出現させたかったので、それぞれのCanvasでSorting Layerを別にしました。Particle SystemはButton1-1と同じSorting LayerでOrder in Layerを別にしました。
Sorting Layer順：Default > Btn1 > Btn2 (右が最前面)
CanvasBtn1：Sorting Layer[Btn1] Order in Layer[0]
CanvasBtn2：Sorting Layer[Btn2] Order in Layer[0]
CanvasText：Sorting Layer[Default] Order in Layer[0]
Particle System：Sorting Layer[Btn1] Order in Layer[1]
その結果、以下の挙動となりました。
まとめ
- オブジェクトの描画順は「SortingLayer」と「Order in Layer」が影響
- uGUIのCanvasは「SortingLayer」と「Order in Layer」が設定できる
