質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • Unity

    5492questions

    Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 654

tsubozaemon

score 3

やりたいこと
Textの設定
Square 2の設定
SpriteにCanvas追加
TextにCanvas追加
Square 2のLayer変更
Square 2のみ別Canvas引っ越し

まず、最初の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のみそちらに引っ越し

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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より奥に描画されます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/09 23:27

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

    仰るとおり、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を変更しようが、どうやっても勝てない」という理解でよいでしょうか?

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

    キャンセル

  • 2018/08/10 06:22 編集

    メニューの「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)もご参考になりそうです。両者のパフォーマンス比較なども載っていて興味深いですね。

    キャンセル

同じタグがついた質問を見る

  • Unity

    5492questions

    Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。