【Unity】3Dオブジェクトの後ろに背景画像(Canvas)を表示する方法

Unity

はじめに

Canvasは3Dオブジェクトの手前に表示するのは簡単ですが、奥に描画するのって結構難しいですよね?今回やるのはUIは手前だけど背景画像だけ奥に描画する手順を共有したいと思います。

背景を映すカメラを作る

3Dオブジェクトの奥にUIを表示するための設定を行います(デフォは手前になってしまうから)

ヒエラルキービュー上で右クリック→Camera を作成

名称を BG Camera としておく (わかりやすくするため、なんでもいい)

レイヤーを作る

Add Layer をクリック

User Layer6 に BG という専用のレイヤーを作ります

Back Camera の設定を以下のように修正します

Clear Flags → 奥に描画するので Solid Color にします (結局背景画像で塗りつぶすからなんでもいいです)

Background → 塗りつぶし色になります。今回は分かりやすく白色にしておきます

Culling Mask → BG (BGのレイヤーだけを表示するCameraにしたいからです)

Depth → -2 にする (MainCameraが-1なのでそれより奥にするため)

背景画像を映すCanvasを作成する

ヒエラルキービュー上で右クリック → UI → Canvas で新規作成

名称を BG Canvas とします

このCanvasはUIを表示するためではなく、3Dオブジェクトの奥に背景画像を表示するためだけの専用のCanvasにします

BG Canvas の Layer を「BG」に変更します

Render Mode を 「Screen Space - Camera」に変更します

Render Camera に 先ほど作成した BG Camera をドラッグ&ドロップします

背景画像をCanvasに配置

BG Canvas に Imageを配置します

Rect Transformで全幅指定にします

Source Image に 背景画像素材 をセット

Image Type を 「Tiled」に変更