クリックゲーム開発

#13. 3Dのゲームに2Dの背景画像を設定するシンプルな方法1

今回から背景画像の設定方法について解説します。

一枚絵を背景として使うメリット・デメリット

まずは、背景に一枚絵を使うメリットについて挙げます

・3Dと比べて、ターゲットとなる端末のスペックに縛られにくい
・個人開発など予算や技術の関係で3Dで背景を作れない場合でも大丈夫
・世界観を統一しやすい

などです。

デメリットとしては
・3Dと2Dを混ぜるとシェーダーやライティングの効果を統一しづらい
・チープに見られる場合がある
・平面なので表現が限られる

などがあります。

ただ板を置くだけの実装

まず、一番かんたんな実装方法を紹介します。

Sprite に設定する画像ファイルを用意します。


背景画像は AssetStore などで手に入ります。

Texture Type を 「Sprite (2D and UI)」と Import Setting しておいてください。
そして、ゲームシーンの Hierarchy に「2D Object > Sprite」を置きます。

すると以下のような見た目になります。
Spriteを3D空間にただ置いた

色々問題がありますね。
2D Object ですが、これは長方形の板を3D空間に置くだけの設定になっているからです。
これを、3D的な方法で補正します。

埋まり対策

板が手前すぎると、ドラゴンの翼が埋まったりするのでZ座標を増やして後ろに持っていきます。

斜め対策

カメラは上から見下ろすような角度を向いているので、
それを打ち消すような角度を入れます。

すなわち、カメラの正面に来るよう、カメラの移す面と平行な角度で板をおいてやります。
映画業界でいうマットペイントですね。

このカメラは固定で、Rotation.X に 15 度を入れているので、
板も同じく 15度X回転して配置すれば、カメラの正面を向くことになります。

動的にカメラの逆行列を計算して・・・みたいな解説を見たことがある方もいると思いますが、
その計算結果が、板と同じ15度を入れるということになります。

見切れ対策

板の後ろの、何もない空間が見えてしまっています。
流石にそれではリリースできないので、スケールを大きめにしたり座標を微調整して見せられる絵にしましょう。

最終的な設定はこちら

これらの設定を全部入れた結果が以下の画像です。
3D空間に2D背景画像を設定

無事、一枚絵を背景に使うことができました。
注意点としては、カメラのパースは背景画像に反映しないので、マッチするような絵をおいてやる必要はあります。

終わりに

いかがでしたでしょうか。
今回は、3D空間に2D背景を設定する単純な方法を解説しました。

ただ、無理矢理感は否めませんね。
次回は、3D空間に2D画像は2D画像として描画する方法について解説したいと思います。

つづきます。