今回は「Unityの2Dテンプレートのエディタに画像を並べて、表示画像を切り替える」という事を実践してみます。

ちなみに、これは脱出ゲーム・サウンドノベルといったアドベンチャー系のゲームでよく活用される手順です。

画像を並べて、ゲーム画面に表示させる画像を切り替える事で、ゲームの世界を移動する演出をしているのです。

今回は、画像を並べる部分までを実践してみます。

この記事は以下の方を対象にまとめています

  • Unityの2Dテンプレート上で画像を配置したり、表示画像を切り替えたりしてみたい
  • アドベンチャー系（脱出ゲームやサウンドノベル）のゲーム開発に興味がある

事前準備・環境設定

環境設定は以下になります。

  • Unity Ver：2020.3
  • テンプレート：2D
  • プラットフォーム：スマホ向け（今回はAndroid）
  • 画面レイアウト：縦画面

画面設定の詳細については以下の記事を参考にして下さい。

Unityでアプリの画面サイズとスケーリングの設定方法 | Liibercraft｜リーベルクラフト
https://liibercraft.com/archives/7167
Unityでスマホ用アプリ（ゲーム）を作成する際は画面サイズ（解像度）の設定をする必要があります。とはいえ、手順が分からないと設定なんてできません。 という訳で、今回はUnityでスマホ用アプリ（ゲーム）を作る際の画面サ …

2Dの画面に画像を並べてみる

2Dテンプレートでプロジェクトを作成して、UnityのScene上に画像を並べてみます。

※以下の画像１、画像２の背景画像を並べて、背景２の上に画像３を配置してみます。

■使用する画像

そして、単純に並べるだけではなくて、後々、画像から画像へと移動ができる様に設定していきます。
※アドベンチャーゲーム等で使われる画面（画像）の切り替わりテクニックです。

2Dの画面に画像を並べる流れ

  • 土台となるUIを作成
  • UIの位置調整（Rect Transform）
  • 素材データの管理
  • 画像の準備
  • １つ目の画像を配置する
  • 画像サイズを変更する
  • ２つ目の画像を配置する
  • ３つ目の画像を配置する

土台となるUIを作成

まず土台となるUIを作成します。

以下の手順でUIを作成してみて下さい。
※何でこんなUIを作るの？と疑問に思うかもしれませんが、それは後で分かります。

  1. HierarchyウィンドウでCanvasを作成（Canavas Gameに名称変更）
  2. 作成したCanvasを右クリック
  3. UI > Panel を選択（Panelsに名称変更）
  4. Panelを右クリック
  5. 子オブジェクトとして、さらにPanelを作成するため、UI > Panel を選択（Panel0に名称変更）
  6. Panelを右クリック
  7. UI > Imageを選択

■必要なUIが作成される

実際の画像はPanel0の子オブジェクトとして作成します。※ImageUIがそれに当たる

また、この後で詳しく紹介しますが、画像を追加する際はpanelUIを「panel0、Panel1、Panel2、・・・」と増やしていく事になります。

UIの位置調整（Rect Transform）

次に、作成したPanelUIの位置を調整します。

調整の方法はいくつかありますが、以下の方法で調整します。

  1. Hierarchyウィンドウで、shiftを押しながら、Panels、Panel0を選択
  2. Rect Transformコンポーネントを確認（Panels、Panel0両方を選択している状態）
  3. Anchor（以下の赤枠）を確認
  4. Anchorをcenter-middleに変更する

■Anchorを確認

■Anchorをcenter-middleに変更

念のためAnchorが正しく設定されている事を確認しましょう。

  1. Panels、Panel0のRect Transformコンポーネントを確認
  2. center-middleに設定されている事を確認

■center-middleに設定されている

PanelUIの位置を調整したので、実際のゲーム画面を確認しましょう。

  1. Gameビューを確認する
  2. 真ん中にimageが配置されている事を確認する（Panel0をcenter-middleに設定しているので、子オブジェクトのimageが真ん中に設定しています。）

■真ん中にimageが配置されている

素材データの管理

ここで一旦素材データの管理をしましょう。この場合、素材データとなるのは、配置する画像データです。

素材データは、一つのフォルダの中にまとめて整理をしておくのがオススメです。今回は「Resources」という名称のフォルダを作成して、そこに素材を格納します。

  1. Projectウィンドウで任意のパスに移動する
  2. 新規フォルダを作成する（名称をResourcesに変更）

■新規フォルダを作成す

名称はResourcesでも他の名前でもOKですが、よく使用されるResourcesとしました。

さらにこのフォルダの中に「images」「sounds」といったフォルダを作成して、画像データ、音楽データなどを振り分ける事が多いです。

画像の準備

画面上に並べるための画像を準備しましょう。

今回は、以下の様な画像を用意しました。
※フリー素材です。

  • 画像１：背景（木が配置されている壁と床）
  • 画像２：背景（壁と床）
  • 画像３：宝箱

脱出ゲームなどでよく見る様な画像データです。

■画像を用意

以下の手順でUnityエディタに上記の画像を取り込みます

  1. 対象画像を全て選択
  2. Resourcesフォルダにドラッグアンドドロップする
  3. Resourcesフォルダにファイルが格納された事を確認する

■Resourcesフォルダにファイルが格納された

１つ目の画像を配置する

ImageUIに画像１（木が配置されている壁と床）を設定します。

  1. HierarchyウィンドウでImageUIオブジェクトを選択
  2. Imageコンポーネントを確認
  3. Source Imageに画像１（background_1）をドラッグ
  4. Source Imageに画像１（background_1）が設定されている事を確認

■画像をドラッグ

■画像が設定されている

実際のゲーム画面を確認しましょう。

  1. Gameビューを確認
  2. 中央に対象の画像が配置されている事を確認

■中央に対象の画像が配置されている

画像サイズを変更する

ゲーム画面に合わせて、画像サイズを調整していきます。

画像本来のサイズに設定

まずは用意した画像の本来のサイズに設定します。

  1. ImageUIオブジェクトのImageコンポーネントを確認
  2. Set Native Sizeをクリック

■Set Native Sizeをクリック

実際のゲーム画面を確認しましょう。

  1. Gameビューを確認
  2. 画像の大きさが変わっている事を確認（本来の画像サイズになっている）

■本来の画像サイズになっている

一応、画像サイズが大きくなりましたが、これだとまだちょっと小さいですね。。もう少し改善しましょう。

画面サイズに画像サイズを合せる

今のままだと画面に表示されている画像のサイズが小さいので、画面サイズに画像のサイズを合わせましょう。

方法は色々とあるのですが、今回は「Aspect Ratio Fitterコンポーネント」を使用してみます。以下の手順でAspect Ratio Fitterコンポーネントを追加します。

  1. ImageUIオブジェクトを選択
  2. 「Aspect Ratio Fitter」コンポーネントを追加
  3. 設定はそのままでOK

■Aspect Ratio Fitterコンポーネント

次に以下の手順で画像サイズを変更します。

  1. ImageUIオブジェクトのRect Transformコンポーネントを確認
  2. Widthの値を720（画面の横幅）に変更　※お好みで変更してＯＫ
  3. Heightも自動で変更される事を確認

■Widthの値をに変更

実際のゲーム画面を確認しましょう。大丈夫そうです。

  1. Gameビューを確認
  2. 画像の大きさが変わっている事を確認（画面の横幅いっぱいになっている）

■画像の大きさが変わっている

画像が薄いor暗い場合は？

ちなみに、画像を設定した際に、画像が薄くなったり、暗くなったりする場合があります。

これはImageコンポーネントのColorプロパティで意図しない設定をされている事が原因になっている可能性があります。

意図しない設定になっていないか、以下の手順で確認しましょう。

  1. ImageUIのImageコンポーネントを確認
  2. Colorプロパティを選択
  3. 意図しない色が設定されていないか（暗い色が設定されていないか）
  4. 透過度が暗い値になっていなか⇒アルファ（RGBAのA）の値は基本255でOK

■Colorプロパティ

２つ目の画像を配置する

次に２つ目の画像も配置します。

まず、先程作成したPanel0を参考に、もう１つPanelUIを作成します。

以下の手順でPanel0をそのままコピーすると設定も引き継げるので簡単です。

  1. HierarchyウィンドウでPanel0を選択して右クリック
  2. Duplicate（複製）を選択
  3. 名称をPanel1にリネーム
  4. 各種設定がPanel0と同じである事を確認

■Panel0を複製してPanel1を作成

現在、２つのPanelUI（その子オブジェクトとして画像）が重なって表示されていると思います。

このままでは、２つの画像を切り替える（移動する）事はできません。

そこで、２つ目に作成したPanelUI（Panel1）のＸ座標をずらします。手順は以下の通りです。

  1. HierarchyウィンドウでPanel1を選択
  2. Panel1のRect Transformコンポーネントを確認
  3. AnchorのPosXの値を1000に変更（元々0）

これで、Panel0よりもX座標が1000ずれた位置にPanel1が配置されます。この様にPanelUIの座標位置（PoxXやPosY）をずらして配置するのが重要ポイントです。

■PosXの値を1000に変更

次に、実際に２つ目の画像を設定してみましょう。

  1. HierarchyウィンドウでPanel1の子オブジェクトのImageUIを選択
  2. imageUIのImageコンポーネントを確認
  3. Source Imageに画像２（background_2）をドラッグ
  4. Source Imageに画像２（background_2）が設定されている事を確認

■画像２（background_2）が設定されている

Sceneビューを確認してみると、２つの画像が並べて配置されている事が分かると思います。

※画像１（左）はPosXの値が0、画像２（右）はPosXの値が1000になっています。

■２つの画像が並べて配置されている

３つ目の画像を設定する

３つ目の画像の設定方法はこれまでの手順を踏んでいれば簡単です。

ただ、画像１、画像２が背景だったのに対して、画像３は背景の全面に配置するオブジェクトになるので、その点だけ注意が必要です。

以下の手順で３つ目の画像（宝箱）を配置します。

画像の配置手順

  • 新たにImageUIを追加
  • 作成したImageUIに画像３を設定
  • ImageUI（画像３）の大きさや位置を調整
  • SceneビューでScene全体の位置を確認

それぞれ詳しく紹介します。

新たにImageUIを追加

以下の手順でImageUIを追加します。

  1. HierarchyウィンドウでPanel1を選択して右クリック
  2. UI > Imageを選択
  3. Imageが作成されている事を確認（名称はImageBoxに変更）

■Imageが作成されている

作成したImageUIに画像３を設定

以下の手順で画像３を設定します。

  1. ImageUI（ImageBox）のImageコンポーネントを確認
  2. Source Imageに画像３（Item1）をドラッグ
  3. Source Imageに画像３（Item1）が設定されている事を確認
  4. さらに、画像のアスペクト比を維持したいので、Set Native Sizeをクリック

■Source Imageに画像３（Item1）が設定されている

ImageUI（画像３）の大きさや位置を調整

以下の手順でImageUI（画像３）の大きさや位置を調整します。

  1. ImageUI（オブジェクト名：ImageBox、画像３を設定済）のRect Transformコンポーネントを確認
  2. Sceneビューを見ながらAnchorのPosX、PosYの値を変更して画像の位置を調整する
  3. Width、HeightやScaleの値を変更する事大きさを変更する（今回は変更してません）

■PosX、PosYの値を変更して画像の大きさを整える

SceneビューでScene全体の位置を確認

これまでの設定が完了したら、SceneビューでScene全体の位置を確認しましょう。

以下の様になっていればOKです。

■Scene全体の位置

表示画像を切り替える

画像１～３を配置できたので、画像を切り替える仕組みを紹介します。

先程、画像を配置する際に、わざわざPanelsというUIを作成して、その子オブジェクトとしてPanel0、Panel1というUIを作成しました。

そして、Panel0のRect Transformを確認すると、PosXの値は0、Panel1のPosXの値は1000となっていると思います。

■Panelsの子オブジェクトとしてPanel0、Panel1が作成されている

この状態でPanels（親オブジェクト）のPoxXの値を切り替えて、表示画像を切り替える事になります。

Panelsの「PosX=0」の場合

まずはPanelsのRect Transformの「PosXが0」の場合に表示される画像を確認しましょう。

これは現状デフォルトの状態ですから、以下の様な状態になっています。

  • PanelsのRect TransformコンポーネントのPosX=0
  • Sceneビューでpanel0（画像１）がカメラ枠に収まっている
  • Gameビューでpanel0（画像１）が表示されている

■Sceneビュー（panel0（画像１）がカメラ枠に収まっている、PosX=0）

■Gameビュー（panel0（画像１）が表示されている、PosX=0）

Panelsの「PoxX=-1000」の場合

次にPanelsのRect Transformの「PosXを-1000」に変更しましょう。

以下の様な状態になっているはずです。

  • PanelsのRect TransformコンポーネントのPosX=-1000
  • Sceneビューでpanel1（画像２＆画像３）がカメラ枠に収まっている
  • Gameビューでpanel1（画像２＆画像３）が表示されている

■Sceneビュー（panel1（画像２＆画像３）がカメラ枠に収まっている、PosX=-1000）

■Gameビュー（panel1（画像２＆画像３）が表示されている、PosX=-1000）

同じ要領で画像の追加・切り替えが可能

上記の様に、カメラの表示位置は基本的にPosX=0を基準としますので、親パネルの位置を（子パネルの配置位置とは逆に）ずらす事で、表示画像を切り替えます。
※表示画像を切り替える仕組みが分かっていただけたと思います。

画像をさらに増やしたとしても、同じ要領で画像の追加・切り替えが可能です。

画像追加時は、親PanelUIの子オブジェクトとして複数のPanelUIを作成し、子オブジェクトのimageUIに画像を設定する。そして、それぞれのPosXの位置をずらしていきます。（PosX=0、1000、2000、・・・など）

この状態で親PanelUIのPosXの位置を0、-1000、-2000、・・・とずらす事で表示画像を切り替える事ができます。

言葉だけだと分かりにくいかもしれませんが、実際に同じ様にPanelUIを作って画像を並べる事で、仕組みはすぐに分かると思います！

実際のゲームではボタン操作で画像を切り替える

今回は手動でPosXの値を変更して画像を切り替えましたが、実際のゲームでは手動でPosXを変更はできません。

なので、画面上に別のUIを配置してボタンを押すとPosXの値を変更する（それによって画像が切り替わる）といった処理を作成する必要があります。

この辺りの処理については、また別に記事で詳しく紹介をしたいと思います！

まとめ

この記事では「Unityのエディタ上に画像を配置して、さらに、表示画像を切り替える」という事を実践しました。

この記事のまとめ

■画面（エディタ）に画像を並べる

  • 土台となるUIを作成
  • UIの位置調整（Rect Transform）
  • 配置用画像準備
  • １つ目の画像を配置する
  • ２つ目の画像を配置する（PosXをずらして配置）
  • ３つ目の画像を配置する（２つ目の画像の上に重ねて配置）

■表示画像の切り替え

  • Panelsの「PosX=0」の場合の、表示画像を確認した
  • Panelsの「PoxX=-1000」の場合の、表示画像を確認した

冒頭でもお伝えした通り、脱出ゲームやサウンドノベル等のアドベンチャー系のゲームでよく活用されるテクニックです。

実際には、別UIを作成してボタン操作によって画像を切り替える処理が必要になりますが、画像の切り替え方法については、今回紹介した方法で実現が可能です！

重要テクニックなので、しっかりと押さえておいて下さい。