【Unity】テキストをオブジェクトの後ろに表示する方法(2D編)
ここでは下の動画のように、テキストをオブジェクトとオブジェクトの間(壁と電柱の間)に表示する方法について説明します。
実際には3DTextを使ったのですが、通常のUITextを使っても実装はできたと思うので記事にして残しておきます。
3DTextを使う方法については以下の記事にまとめてます。
ちなみにこちらの記事は「3D空間でUI Textの表示順を変える方法」についての説明になっています。完全に2Dの場合はこちらの記事は当てはまらないので、以下の記事を参考にしてみてください。
Unityでオブジェクトの描画順を変更する方法また、この記事はUnity1weekという1週間ゲームジャムで作ったゲームを元にしています。実際の見え方を知りたい場合は以下のリンクからプレイできますので、試してみてください。
ゲームはこちらからプレイできます環境
- Unity 2018.1.2f1
このページの構成
ポイント
- 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が離れているか」を設定する項目です。
この距離が他のオブジェクトより近ければ前面に、遠ければ背面に表示されるようになります。
Render Mode:World Spaceを使う方法
CanvasのRenderModeを変えます。
先ほど作成したTextの親要素になっているCanvasを選択し、「Render Mode」を「World Space」に変更してください。
このモードの場合、通常のゲームオブジェクトのように、RectTransformで指定したPositionの値に応じて表示順が変わります。