読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】スプライトの描画順を「下にある物を手前」にする

f:id:tsubaki_t1:20170414014046j:plain

今回はUnity 5.6から追加されたTransparency Sort Modeを使って「スプライトの描画順を下にある物を優先」にします。

Spriteの描画順

Spriteの描画順は、基本的に

  1. Sorting Layer
  2. Order In Layer
  3. カメラに近い順

で判断されています。

まずSorting Layerで描画順を判断し、同一のSorting Layer内であればOrder In Layerで判断、それで判断つかなければ通常のTransparentと同様にCameraからの距離で判定しています。

f:id:tsubaki_t1:20170414014433j:plain

それでも決着がつかなければ生成順っぽいです。

例えば下のParspectiveのカメラの場合、Zの距離は同じでも中心から離れれば離れるほど奥に描画されます。

f:id:tsubaki_t1:20170414015628j:plain

逆にOrthographicの場合、Zの位置…つまり手前にあるか奥にあるかで判定します。この位置が同一ならば、生成順っぽい気がします。

f:id:tsubaki_t1:20170414015852j:plain

今回はこの「Sorting LayerでもOrder In Layerでも描画順が決着つかなかった時の描画順」を、少し変更して「下にある物を手前に描画」してみます。

下にあるスプライトを手前に描画

Unity 5.6からTransparency sort modeという項目が追加され、Custom Axisなる項目が追加されました。

この値を変更すると、スプライトの描画ルールが変更出来ます。

f:id:tsubaki_t1:20170414014151j:plain

例えばTransparncy Sort ModeをCUsとmAxisに設定しTransparency Sort Axisを(X:0、Y:1、Z:0)とすると、Y軸的に下にあるオブジェクトが手前に描画されます。

f:id:tsubaki_t1:20170414020647g:plain

逆にYが-1だった場合、上にあるものが手前に描画されますし、Xが1なら左にある物が手前に描画されます。
もちろんZが1ならZ軸的に手前にある物が前面に描画されます。

f:id:tsubaki_t1:20170414020822j:plain

同一の大きさのスプライトであれば、これで問題ありません。

縦に長い物体の問題

厄介なのが縦に長い物体、例えば柱や家等の建築物です。

スプライトの「上下」の判定は、どうやらスプライトの中心点で判断しているらしく、Pivotを変更した場合でも下のアニメーションのように「中央」で判定されます。

f:id:tsubaki_t1:20170414021340g:plain

解決:Z軸で描画順を調整する

これを解消する手っ取り早い方法が、奥行きの判定にZを追加し柱のZ値を調整する事です。奥に行って欲しい位置にスプライトを配置し柱のZ値を調整、手前になった所が概ね丁度よい位置になります。

f:id:tsubaki_t1:20170414021929j:plain

f:id:tsubaki_t1:20170414022447g:plain

補足:もう一つ厄介なのがパーティクルです。

Simulation SpaceがLocalならばBounceは固定なので上と同じように調整してやれば良いのですが、Scaling ModeがWorldだと中心地の取得が若干面倒なことになります。

複数のスプライトを合わせて表現しているスプライトの問題

もう一つが複数のスプライトを組み合わせて一つの絵を表現しているケースです。

例えば下の車は車体とタイヤの二つのスプライトで表現されています。この時、単純に「下が手前」としてしまうと、タイヤと車体で奥に行く位置が異なります。

これはAnima2D的な物を表現する際に問題になります。

f:id:tsubaki_t1:20170414023308g:plain

解決:SortingGroupでスプライトを一つのスプライトとして扱う

解決方法は単純で、Sorting Groupを使用します。これでスプライトをまとめると、単一のスプライトのように扱われるようになります。

f:id:tsubaki_t1:20170414024058g:plain

また、グループに纏めたスプライトの描画順が何であれ、周囲にはSorting Groupで指定しているOrder In LayerやSorting Layerになります。

上のZ値も合わせて位置を調整すると、割と普通に使えるようになります。

f:id:tsubaki_t1:20170414023734j:plain

tsubakit1.hateblo.jp

要するに

つまり

  • Custom AxisでY軸・Z軸で描画順を制御する
  • 縦長の物はZ値を使って描画順が変わる位置を微調整
  • 複数のSpriteを組み合わせている物はSortingGroupで纏める

という事

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp