はじめに
2Dゲームで、複数の背景画像を重ねて表示したいけど、思ったように表示されないことはありませんか?
この記事では、画像を重ねて以下のゲーム画面を作成する方法を紹介します。
最終的には、以下のゲーム画面を表示できるようになります。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_912,h_528/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.52.04-1.png)
使用した画像アセット
こちらのアセットを使用しました。無料ですので、ダウンロードして実際にやってみましょう。
事前準備
まずはHierarchyビューの「+」を押して、Create Emptyを選択します。
名前はBackgroundとつけました。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_261,h_289/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.20.45.png)
背景に使う画像を用意します。
今回はアセットを使いましたが、自分で用意した画像を使いたいときは、Projectビューに画像をドラッグ&ドロップすれば取り込みできます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_500,h_345/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.24.39-1024x706.png)
オブジェクト化
画像をゲーム画面に表示するには、Projectビューの画像をHierarchyビューのBackgroundまでドラッグ&ドロップします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_487,h_566/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.28.21-1-881x1024.jpg)
複数の画像をドラッグ&ドロップしましたが、Gameビューには画像が表示されない場合があります。
その場合は、カメラ側の設定が必要です。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_766/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.33.22-1024x766.jpg)
カメラ設定
- カメラのTransformをz = -10に設定
- CameraコンポーネントのProjectionをOrthographicに設定
- Sizeで表示サイズの調節
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_429,h_399/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.38.51.png)
Transformのz座標が0だと、画面とカメラが重なってしまうため、z = -10にすることで、ある程度距離を離しています。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_435,h_290/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.43.25-1024x684.png)
画像の表示順番
画像オブジェクトのSprite RendererコンポーネントのOrder in Layerの値を設定します。
値が大きいほど、先頭に表示されます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_360,h_323/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.45.47.png)
Hierarchyビューで表示したい順番に並べ、上から順番にOrder in Layer を0,1,2…とそれぞれ設定します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_365,h_159/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.48.44.png)
完成です!
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_457,h_264/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-8.52.04.png)
おわりに
画像の表示は、ドラッグ&ドロップ操作と数値の調整でできますので、是非試してみましょう!