前回、3Dのゲームに2Dの背景画像を設定する方法を解説しました。
ただその方法は、3D空間に板を置いて、そこからつじつまを合わせるという
ものだったので、かなり無理がありました。
今回は、2D画像を背景として使用する方法について解説します。
Canvas の Render Mode 3種類の解説
まずは、画像やボタンなどUI要素を置く UI＞Canvas オブジェクトについてです。
これは透明な板みたいな物なのですが、描画モードを3種類選べます。
描画モードは Canvas に設定しておき、配下においた画像やボタンなどが全部その設定で描かれます。
設定するプロパティは RenderMode で、設定できる値は次の3つから選びます。
- ScreenSpace – Overlay
- ScreenSpace – Camera
- WorldSpace
ScreenSpace – Overlay
1つ目の、ScreenSpace – Overlay は、最前面に描画するための設定です。
一般的に、ボタンやスコア表示などのUI要素は最前面に描画するので、これがデフォルトです。
この設定の Canvas をよく使いますが、
今回は背景を出したいという用途なので、次に説明する別の設定の Canvas を作って背景することになります。
ScreenSpace – Camera
RenderMode を「ScreenSpace – Camera」にすると、
指定したカメラの正面に追従してくる Canvas となります。
この Canvas で重要となるのが、カメラからの距離です。
この値を大きくしないと、手前のモンスターが埋まったりします。
WorldSpace
最後の設定は、WorldSpace です。
こちらは、そのまま UI要素が3D空間に置かれる Canvas です。
前回のような挙動になります。
具体的に背景を配置して設定する
それでは、実際に背景を作っていきます。
今回、背景画像と、エネミーの足元に表示するブロックのテクスチャーを用意しました。
下図のような配置とします。
手順は以下の通り
・Hierarchy に、Canvas を作成（名前は ScreenSpaceCanvas に）
・ RenderMode を ScreenSpace – Camera に
・ Plane Distance を 100 に（Enemyが埋まらない程度に離す）
背景テクスチャ
・Hierarchy の Canvas の配下に、UI ＞ Image を作成（名前は Background に）
・ Image コンポーネントの SourceImage に 背景テクスチャを選択
・ Rect Transform コンポーネントの Scale を 20倍に（画像が背景を覆うように調整）
ブロックのテクスチャ
・Hierarchy の Canvas の配下に、UI ＞ Image を作成（名前は Foreblock に）
・ Image コンポーネントの SourceImage に ブロックのテクスチャを選択
・ Rect Transform コンポーネントの Scale を 5倍。Position.Yを -150（画像が足元に来るように調整）
解像度やアスペクト比に応じて背景画像がどうなるか
ScreenSpace – Camera にすると、Canvas のサイズが自動的に変わります。
スマートデバイスの場合、解像度やアスペクト比の変化が大きいので主要なものについては確認しておきましょう。
例えば、iPhone 9:19.5 だと以下の図のように
旧 iPhone 9:16 だと以下の図のように
iPad 3:4 だと以下の図のように
といった具合です。
画像の外側が見えていたりするとストアに掲載不合格（リジェクト）となるので、必ず確認しましょう。
次回は、今回とは違う「ScreenSpace – Overlay」を使った通常UIを作っていきます。おたのしみに。
