【Unity】uGUIの描画順の制御方法をちゃんと理解する

UnityのuGUIの描画順ルールは意外と複雑なので、描画順の制御方法をまとめます。

Unity2018.4.0

複数のCanvasを別々のカメラに映す場合はカメラの描画順に従う

まず、二つのボタンを別々のCanvasに配置します。

f:id:halya_11:20190525200155p:plain

赤いボタンをCanvasAに、青いボタンをCanvasBに配置しています。
CanvasにはRender Modeというプロパティがあり、どのCameraに映すかを指定できます。

light11.hatenadiary.com

これによりCanvasAとCanvasBを別々のCameraに映した場合、
Canvasに置かれたGUIの描画順はCameraの描画順に従います。

ちなみにRender ModeをScreen-Space Overlayにした場合には最前面に描画されます。
言い方を変えると「最後に描画されるカメラにCanvasが映るように設定した」と考えることもできます。

別々のカメラにCanvasを映す場合は上記のような挙動となりますが、
そもそもGUIを複数のカメラに映すケースは多くない気もします。

同じカメラに映す場合はSorting Layerで描画順が決まる

次に、CanvasAとCanvasBを同じカメラに映すことを考えます。
このケースではSorting LayerとOrder in Layerにより描画順を制御できます。

Sorting LayerはCanvasコンポーネントから設定できるプロパティです。

f:id:halya_11:20190525200936p:plain

上図ではLayerAはLayerBが存在していますが、最初はDefaultしか設定されていません。
Add Sorting Layerを選択することでSorting Layer設定ウィンドウを開けます。

f:id:halya_11:20190525201108p:plain

Sorting Layerはこのウィンドウで+ボタンを押すことで追加できます。
またレイヤー名の左側をドラッグすることで並び替えることもできます。
並び変えた結果、下にあるレイヤーほど手前に描画されます。

f:id:halya_11:20190525201621g:plain

Sorting Layer内の描画順はOrder in Layerで描画順が決まる

同じSorting Layer内の描画順はOrder in Layerで指定します。

f:id:halya_11:20190525201916p:plain

これは値が大きいほど手前に描画されます。
試しにCanvasAのOrder in Layerを編集してみます。

f:id:halya_11:20190525202230g:plain

値が大きいときにCanvasBよりも手前に描画されていることが確認できます。

Sub-Canvasの描画順

Canvas配下のGUI要素にCanvasコンポーネントを付けるとサブCanvasとなります。

f:id:halya_11:20190525202510p:plain

サブCanvasの描画順は基本的には親のCanvasと同じになります。
ただし、Override Sortingにチェックを入れることでSorting LayerとOrder in Layerが設定できるようになります。

f:id:halya_11:20190525202633p:plain

この機能を使うと、親のCanvasの描画順にかかわらず、サブCanvasの描画順を決めることができます。

同じCanvas内の描画順はHierarchy順

最後に同じCanvas内のGUIの描画順について考えます。
これについては直感的で、Hierarchy上で下にある要素ほど手前に描画されます。

f:id:halya_11:20190525202938p:plain

上記の例ではButton3が最前面に描画されることになります。

関連

light11.hatenadiary.com