はんなりと、ゆるやかに

アジャイル、スクラムが好きなITエンジニアが日々から学んだことをアウトプット

UnityのLayerとSortingLayerとOrder in Layerについて調べた

Unityでボタンなどを配置していると描画順の設定が分からなくなって調べました。描画順を制御する設定は「SortingLayer」「Order in Layer」の2種類です。それとは別に「Layer」という設定があり混乱しました。ややこしい。
なお、描画順は「SortingLayer」「Order in Layer」以外にもカメラの設定の影響も受けるんですが本記事では扱っていません。というか調べきれてません。

描画順に関するドキュメントはこちら
docs.unity3d.com

SortingLayer と Order in Layer

SortingLayer は複数のスプライト(2Dオブジェクト)の順序を設定できます。同じSortingLayer 内はOrder in Layerで順序を設定できます。

docs.unity3d.com

Layer

Layerは描画順に影響ありません。同じレイヤーを表示非表示したり、ライトを照らすかどうかなどに使います。
docs.unity3d.com

動作確認

f:id:iucstscui:20200814012719g:plain
ボタン、テキスト、パーティクルシステムを使って描画順を確認しました。

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」を選択してください。
f:id:iucstscui:20200815000010p:plain

また、同Canvas内のButton等の順番はHierarchyの順と一致します。たとえば、Button2とButton1の並びが下記の場合はButton2が上になります。
f:id:iucstscui:20200814233533p:plain
f:id:iucstscui:20200814233606g:plain

反対にするとButton1が上になります。
f:id:iucstscui:20200814233941g:plain

Particle Systemの画像はスプライト

Particle Systemは「SortingLayer」「Order in Layer」が設定できます。Renderer設定内に「SortingLayer」「Order in Layer」があります。
f:id:iucstscui:20200815000109p:plain

SortingLayerの設定

Sorting Layerの設定項目からAdd Sorting Layer ...をクリックすると、SortingLayerを設定する画面になります。その中でレイヤーを追加したり順番を入れ替えてレイヤーを設定をします。その後、各スプライトの「SortingLayer」を変更します。
f:id:iucstscui:20200815001302p:plain

Order in Layer

同じSorting Layerが設定されたスプライト順が設定できます。入力数値が大きければ前面になります。

今回の設定

今回のヒエラルキーの設定です。
f:id:iucstscui:20200815002732p:plain
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]


その結果、以下の挙動となりました。
f:id:iucstscui:20200814012719g:plain

まとめ

  • オブジェクトの描画順は「SortingLayer」と「Order in Layer」が影響
  • uGUIのCanvasは「SortingLayer」と「Order in Layer」が設定できる