【Unity】Spriteの描画順をコントロールする方法(2019.3)

f:id:Effect-Lab:20191118030745p:plain

 

こんにちは。

 

今回はSpriteの描画順をコントロールする方法です。

 

Spriteの描画順をコントロールする方法には、主に以下の3つが挙げられます。

  1. Sorting Layer
  2. Order in Layer
  3. Z値

上から順に優先度が高いため、例えばSorting Layerで前面に指定したものは、いくらZ値を変更しても描画順が変わる事はありません。

 

ここからは、各方法について詳細を解説していきます。

 

 

Sorting Layerで描画順を変更する

Sorting Layerとは?

Sorting Layerは、レイヤー単位で描画順をコントロールする機能です。
ここで気をつけたいのが、「Layer」と「Sorting Layer」は別物だという事です。

 

Layerは主にGameObjectのグルーピングのために有り、役割が違います。


LayerとSorting Layerの違いは下記の記事にて詳しく解説されています。
きちんと把握しておかないと頭がこんがらがりますので、違いがあいまいな方は読んでみると良いと思いますよ!(僕はこんがらがってたので助かりましたw)

qiita.com

 

 

Sorting Layerを作る

Sorting Layerは「Tags & Layers」から追加ができます。
右下の「+-」でレイヤーの追加と削除が可能です。

f:id:Effect-Lab:20191227020323p:plain

 

Tags & Layersは、SpriteオブジェクトのInspectorから「Sorting Layer > Add Sorting Layer」を選ぶか、

f:id:Effect-Lab:20191227015855p:plain

 

右上メニューの「Layers > Edit Layers」から開く事ができます。

f:id:Effect-Lab:20191227015930p:plain


 

Sorting LayerをSpriteに割り当てる

追加したSorting Layerを割り当てるには、SpriteのInspectorの「Sorting Layer」から追加したレイヤーを選ぶだけです。

f:id:Effect-Lab:20191227020238p:plain

 

 

Sorting Layerの順序を入れ替えて描画順を変更する

Sorting Lyaderでは、一番下のレイヤーが前面に描画されます。
下図の場合は「Defaultが一番後ろ」「Triangleが一番前」です。

f:id:Effect-Lab:20191227020357p:plain

 

下図のようにレイヤーの順序を入れ替えれば、Spriteの描画順も変わります。

f:id:Effect-Lab:20191227020432g:plain



Sorting Layerについての解説は以上になります!

 

 

Order in Layerで描画順を変更する

Order in Layerとは? 

Order in Layerも先程のSorting Layerと同じで描画順をコントロールする機能ですが、こちらはSorting Layererのようにグループを作るような機能ではなく、Sprite単体ごとに描画順を指定していく機能になります。

 

Order in Layerは、SpriteのInspectorの「Order in Layer」から変更できます。

f:id:Effect-Lab:20191227020526p:plain

 

 

Order in Layerから描画順を変更する

Order in Layerは値が大きいほど前面に描画されます。
(※Sorting Layerが同一の場合)

 

下図はOrder in Layerの値を1ずつズラしたSpriteです。
値の一番大きい赤丸が前面に、小さい緑四角が背面に描画されています。

f:id:Effect-Lab:20191227020554p:plain


Order in Layerはマイナスの値も受けつけます。

 

Order in Layerについての解説は以上になります! 

 

 

Z値をズラして描画順を変更する

Spriteも3Dと同じように、カメラからの奥行き(Z値)の違いで描画順をコントロールする事ができます。
(※Sorting LayerとOrder in Layerが同一の場合)

 

検証のために下図のように赤丸のSpriteと青丸のSpriteの2つを用意しました。カメラは+Z方向へのアングルになっています。

f:id:Effect-Lab:20191227020626p:plain

 

 

Z値で描画順を変更する

まず青丸のZ値を「+1」にしてみました。カメラから見て赤丸より奥に移動したので青丸は後ろに描画されます。

f:id:Effect-Lab:20191227020648p:plain


 

次に青丸のZ値を「-1」にしてみました。今度はカメラから見て赤丸より手前に移動したので青丸は手前に描画されます。

f:id:Effect-Lab:20191227020700p:plain




Z値での描画順コントロールついての解説は以上になります! 

 

 

Sorting Groupを使ってグループ単位で描画順を変更する

ここまでの解説ではSpriteObject単体で描画順をコントロールする方法を解説してきましたが、複数のSpriteを1つのグループにまとめて、そのグループ毎に描画順をコントロールしたいケースがよくあります。

 

そういう時に便利なのが「Sorting Group」というコンポーネントです。

 

Sorting Groupをつくる

複数のSpriteを子供に持った親オブジェクトに、「Sorting Group」コンポーネントを追加します。

f:id:Effect-Lab:20191227020804p:plain


設定はこれだけです。

 

 

Sorting Groupで描画順を変更する

Sorting Groupの描画順は、これまで解説してきた「Sorting Layer」「Order in Layer」「Z値」で同様にコントロールできます。

 

下図は検証用に複製したSorting GroupのOrder in Layerで描画順を変えてみた状態です。
グループ内のスプライトの描画順はそのままで、グループ単位で描画順が変わっているのが分かるかと思います。

f:id:Effect-Lab:20191227020842g:plain

 

Sorting Groupを使った場合、グループ内の子供Spriteの描画順を変えても他のグループのSpriteには影響しなくなります。
あくまでそのグループ内での描画順にしか影響しなくなります。

  

Sortign Groupについては下記サイトで勉強させていただきました。

tsubakit1.hateblo.jp


Sorting Groupについての解説は以上になります! 

 

ParticleでもSpriteと同様の描画順コントロールができるよ!

 

できます!

 

Spriteだけの機能かと思ったら違うんですねw

 

Particleの場合は、Inspectorの「Rendererモジュール」から「Sorting Layer」と「Order in Layer」の変更が可能です。

f:id:Effect-Lab:20191227020913p:plain


例えば、下図のようにSpriteとParticleが混在するシーンでもOrder in Layerの値で描画順が変わります。
これはSorting Layerでも同様です。

f:id:Effect-Lab:20191227021122g:plain

 

 

でも出来ない時もあるよ・・・

ただし、Particleの場合はSpriteと同じことができないケースがいくつかありました。
できるケースがほとんどなので、出来ない方を解説していきます。
(これが正しい挙動なのか、僕のやり方が間違っているだけなのかは不明です…。Unity完全に理解したい…)

 

 

Z値で描画順を変える事はできませんでした

「Sorting Layer」と「Order in Layer」が同一の場合、Spriteであれば「Z値」によって描画順が変わりましたが、Particleの場合は変わりませんでした。
f:id:Effect-Lab:20191227020939g:plain



Sorting Groupに入れてしまうとグループ内でのソートが効かなくなる

下図のように、Sorting GroupにParticleを含めて専用のSorting Layerを作った場合を見てみましょう。

f:id:Effect-Lab:20191227021358p:plain


するとこのように、Sorting Layerの順序を入れ替えても描画順が変わりませんでした。

f:id:Effect-Lab:20191227021420g:plain


SpriteとParticleを同じSorting Layerにしたうえで、Order in Layerの値を変えた時も同様に描画順が変わりませんでした。

f:id:Effect-Lab:20191227021511g:plain



これらを踏まえると、ParticleはSorting Groupに入れると描画順を変更できなくなるようです。

 

 

2つのSorting Groupが重なった場合はどうなる?

ここで1つ気になったのは、Particleを含む2つのSorting Group同士が重なった場合はどうなるのか?です。

 

検証のため、ParticleとSpriteが混在した2つのSorting Groupオブジェクトを用意しました。

f:id:Effect-Lab:20191227021214p:plain

 

まず初めは、全て同一のSorting Layer、同一のOrder in LayerでZ値のみ変えた場合です。
下図のようにSpriteは描画順が変わりますがParticleは両方前面に描かれたままです。

f:id:Effect-Lab:20191227032353g:plain

 

次に、Sorting Layerをそれぞれに用意し、その順番を入れ替えた場合です。
この場合はSpriteだけでなくParticleの描画順も正しく切り替わっていますね。

f:id:Effect-Lab:20191118024922g:plain


最後に、同一のSorting LayerでOrder in Layerの値を変えた場合です。
この場合も正しく描画順が切り替わりましたね。

f:id:Effect-Lab:20191118025410g:plain



これらの事から、Particleを含むSorting Group同士が重なった場合の描画順は、Sorting LayerかOrder in Layerで制御する事ができ、Z値では制御できない事が分かりました。

 

 

おわりに

今回はSpriteの描画順についていろいろと勉強をしてきました。 
(おまけにParticleも)

 

描画順はきちんと理解して運用方法を考えないと、ゲーム中に複数のアセットを表示させた時に大変な事になるので確実に押さえておきたいポイントですね。