【Unity】テキストをオブジェクトの後ろに表示する方法(2D編)

2018.06.17 自習室 0

ここでは下の動画のように、テキストをオブジェクトとオブジェクトの間(壁と電柱の間)に表示する方法について説明します。

実際には3DTextを使ったのですが、通常のUITextを使っても実装はできたと思うので記事にして残しておきます。
3DTextを使う方法については以下の記事にまとめてます。

【Unity】テキストをオブジェクトの後ろに表示する方法(3D編)

ちなみにこちらの記事は「3D空間でUI Textの表示順を変える方法」についての説明になっています。完全に2Dの場合はこちらの記事は当てはまらないので、以下の記事を参考にしてみてください。

Unityでオブジェクトの描画順を変更する方法

また、この記事はUnity1weekという1週間ゲームジャムで作ったゲームを元にしています。実際の見え方を知りたい場合は以下のリンクからプレイできますので、試してみてください。

ゲームはこちらからプレイできます

環境

  • Unity 2018.1.2f1

このページの構成

ポイント
事前準備
Render Mode:Cameraを使う方法
Render Mode:World Spaceを使う方法

ポイント

UIは基本的に最前面に表示されるように初期設定されている
描画順を変えるには、UITextの親要素のCanvasのRender Modeを変更する
Render ModeがOverlayの場合、常に最前面に表示される
Render ModeがCameraの場合、CanvasのPlane Distanceの値によって表示順を変更できる
Render ModeがWorld Spaceの場合、CanvasのRect Transformの値によって表示順を変更できる

事前準備

ステージの作成

説明のため、簡単にステージを作成しておきます。
なんでもいいのですが、ここでは以下のように壁と電柱っぽいオブジェクトを作成しました。

適当に作っていただけば大丈夫ですが、一応、各オブジェクトの設定も書いておきます。

Cube(壁)
Position x:0 y:0 z:0
Scale x:10 y:2 z:0
Cylinder(電柱)
Position x:1 y:1 z:-2
Scale x:1 y:2 z:1
Main Camera
Position x:5 y:1.5 z:-5
Rotation x:10 y:-40 z:0
Scale x:1 y:1 z:1

もし画面が暗い場合は、Directional Lightも追加しておいてください。

UI Textの表示

ヒエラルキービューから「Create」-「UI」-「Text」を選択してTextを表示しておきます。
ゲームビューにテキストが表示されていない場合は、作成したTextのinspectorからRect TransformのPosX,PosY,PosZの値を全て0にすれば表示されると思います。

Render Mode:Cameraを使う方法

まず、CanvasのRenderModeを変えます。
先ほど作成したTextの親要素になっているCanvasを選択し、「Render Mode」を「Screen Space – Camera」に変更してください。
このモードの場合、UI要素を描画するカメラの指定も必要なので、「Render Camera」に「Main Camera」をドラッグ&ドロップしておいてください。

この状態でCanvasの「Plane Distance」の値を変えてみてください。
下の動画のように、テキストの表示順が変更できるのがわかると思います。(ちょっと見にくかったのでテキストの表示を調整してます)

ちなみに「Plane Distance」は、先ほど「Render Camera」に指定したカメラから「どれくらいCanvasが離れているか」を設定する項目です。
この距離が他のオブジェクトより近ければ前面に、遠ければ背面に表示されるようになります。

参考リンク
Canvas【Unity公式マニュアル】
【Unity】uGUIのCanvasとRenderModeについて 2017.3.2

Render Mode:World Spaceを使う方法

CanvasのRenderModeを変えます。
先ほど作成したTextの親要素になっているCanvasを選択し、「Render Mode」を「World Space」に変更してください。

このモードの場合、通常のゲームオブジェクトのように、RectTransformで指定したPositionの値に応じて表示順が変わります。

参考リンク
Canvas【Unity公式マニュアル】
【Unity】uGUIのCanvasとRenderModeについて 2017.3.2

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です