Sprite(Square)をUI(Text)の後に描画できません

Question

まず、最初のpngを見てください。
「やりたいこと」は、白い長方形(Canvasの子オブジェクトText)(Assets→Create→Sprite→Squareで作成したもの)が、"Test Text"(Canvasの子オブジェクトSquare 2)(GameObject→UI→Textで作成したもの)の後に描画されるようにする(つまり、"Test Text"の中央付近は白い長方形で覆われる)ことです。

が、以下のいろいろな方法を試してもうまくいかず
(どうしてもTextが上に描画されてしまう)、
手詰まりになっています。
【試したこと一覧】に記載がない限り、Text, Square2の設定は
それぞれ添付の2枚目、3枚目のpng画像のようにしています。

【試したこと一覧】
・Canvasの中で、TextとSquare 2の並び順を入れ替えてみる
・(4枚目、5枚目の画像参照)TSquare 2とTextそれぞれにCanvasコンポーネントを追加、
どちらもOverride sortingをオンにし、それぞれのSort Orderをいろいろ変えてみる
・(6枚目の画像参照)Square 2のLayerを、高優先度のLayer「HighLayer」に変更
・(7枚目の画像参照)もともとのCanvasより高優先度のLayerを設定した
「Canvas_HighLayer」を作成し、Square 2のみそちらに引っ越し

Answer 1

Canvasの描画モードを変えてみてはいかがでしょうか?

たとえば上図の場合、モードを「Screen Space - Camera」として、「Plane Distance」は「10」としました。

この場合、Canvasがカメラ前方10mに浮かんだ板の上に描画されたような状態になります。カメラの位置は(0, 0, -10)にあり、向きはZ軸+方向を向かせていますので、CanvasはZ座標0のXY平面上に位置していることになります。

ここでSquareのZ座標を操作してみますと、Z < 0の場合はSquareがCanvasよりカメラに近い側に位置するのでCanvasより手前に描画され、Z > 0の場合は遠い側に位置するのでCanvasより奥に描画されます。

Comments

[tsubozaemon]

早い回答ありがとうございます。

仰るとおり、CanvasのモードをScreen Space - Cameraに変更したところ、うまくいきました。
ありがとうございます。

すみません、後学のため一点確認させてください。
質問を投稿する前は、
最初の画像のように「モード:OverLayのキャンバス」の子として「白い長方形のSprite」と「Test TextのText」を設定した場合、「SpriteとText間の描画順」は、
Canvas内での並び順やSortOrderで制御できると思っていました。
(「OverLayのCanvasの子になったものは、そうでないものすべてに優先して描画される」が
「OverLayのCanvasの子同士の描画順序は、すべて通常通り並び順やSortOrder値で制御可能)

が、それが誤解で、「OverLayのCanvasの子になった場合、描画順が最強になるのは
GUIオブジェクト(今回の場合Text)のみで、非GUIのSpriteはCanvasの子にしようが
LayerやSortOrderを変更しようが、どうやっても勝てない」という理解でよいでしょうか?

※　完璧に理解しようとすると遥かに複雑でしょうが、大まかな理解としては。

[Bongo]

メニューの「GameObject」→「UI」の中に入っている様々なUI部品を生成してみますと、それらは自動的にCanvasの子として配置されます。UI部品をインスペクタで見てみますと、通常のオブジェクトでは「Transform」になっているところが「Rect Transform」コンポーネントに置き換わっていたり、「Canvas Renderer」コンポーネントが付いていたり...と、ちょっと雰囲気が違っている様子をご覧いただけるかと思います。

Canvasの描画の仕組みは他の一般的なオブジェクトとはちょっと違っていて、Canvasが子階層のUI用コンポーネントを持つオブジェクトをとりまとめて1枚のUI画面に仕上げているようです。おっしゃるように、Canvasの子階層に非UIオブジェクトがまぎれ込んでも、それらはUI用コンポーネントを持っていないためにCanvas特有の描画順制御ルール（ヒエラルキー上の並び順など）には支配されないようですね。

Screen Space - OverlayになっているCanvasの描画は、他のカメラの描画が一通り終わって一枚の映像ができあがってから、さらにその上に重ね描きするようにして行われるようです。調査不十分ですが、カメラで映されている通常のオブジェクトの描画がScreen Space - Overlayに勝つことは無理っぽいですね。

どうしてもCanvasの階層内に通常のオブジェクトを割り込ませたい場合、
- 「Assets」→「Create」→「Render Texture」でレンダーテクスチャを用意する。
- 割り込ませたいオブジェクト専用のカメラを用意し、「Target Texture」をそのレンダーテクスチャに設定する。
- Canvas階層中の割り込ませたい位置に「GameObject」→「UI」→「Raw Image」を配置し、「Texture」をそのレンダーテクスチャに設定する。
といった手段も使えなくはなさそうです。

UI用オブジェクトと非UIオブジェクトの使い分けについては「【Unity】uGUIのImageとSprite Rendererの使い分け - テラシュールブログ」（http://tsubakit1.hateblo.jp/entry/2016/09/26/080000）もご参考になりそうです。両者のパフォーマンス比較なども載っていて興味深いですね。