はじめに
2Dゲームで、複数の背景画像を重ねて表示したいけど、思ったように表示されないことはありませんか？
この記事では、画像を重ねて以下のゲーム画面を作成する方法を紹介します。
最終的には、以下のゲーム画面を表示できるようになります。
使用した画像アセット
こちらのアセットを使用しました。無料ですので、ダウンロードして実際にやってみましょう。
事前準備
まずはHierarchyビューの「＋」を押して、Create Emptyを選択します。
名前はBackgroundとつけました。
背景に使う画像を用意します。
今回はアセットを使いましたが、自分で用意した画像を使いたいときは、Projectビューに画像をドラッグ&ドロップすれば取り込みできます。
オブジェクト化
画像をゲーム画面に表示するには、Projectビューの画像をHierarchyビューのBackgroundまでドラッグ&ドロップします。
複数の画像をドラッグ&ドロップしましたが、Gameビューには画像が表示されない場合があります。
その場合は、カメラ側の設定が必要です。
カメラ設定
- カメラのTransformをz = -10に設定
- CameraコンポーネントのProjectionをOrthographicに設定
- Sizeで表示サイズの調節
Transformのz座標が0だと、画面とカメラが重なってしまうため、z = -10にすることで、ある程度距離を離しています。
画像の表示順番
画像オブジェクトのSprite RendererコンポーネントのOrder in Layerの値を設定します。
値が大きいほど、先頭に表示されます。
Hierarchyビューで表示したい順番に並べ、上から順番にOrder in Layer を0,1,2…とそれぞれ設定します。
完成です！
おわりに
画像の表示は、ドラッグ&ドロップ操作と数値の調整でできますので、是非試してみましょう！
