ステージを作ろう

1. 講座で使用するプロジェクトのセットアップ

1-1. プロジェクトをダウンロード

今回の講座では、GItHubであらかじめ用意してあるプロジェクトをダウンロードして使用します。

1. 以下のリンクにアクセスしてください。
   inct-densan-org / course2022-2d-unity
2. 「Code」ボタンを押します。するとポップアップが表示されます。
3. 「Download ZIP」ボタンを押してzipファイルをダウンロードします。
4. ダウンロードしたZIPファイルを解凍します。

1-2. プロジェクトをUnityHubから開く

1. UnityHubを起動します。
2. 「プロジェクト」タブから「開く」を押します。解凍したフォルダを選択します。

1-3. Asset FTTGR を追加

今回の講座では他の方が販売しているアセットである Asset FTTGR を使用します。

1. Unity Aseet Storeにアクセスします。

2. ログインします。
   参考：Unityのアセットストアとは？使い方とアセットのインポート手順を解説 ＞手順②アカウントにサインイン

3. Asset FTTGRにアクセスします。

4. 画面中央右側にある「Add to My Assets」を押して、アセットを購入します。
   参考：Unityのアセットストアとは？使い方とアセットのインポート手順を解説 ＞手順④アセットをプロジェクトにインポート

5. 購入に成功するとモーダルウィンドウが開き、「Open in Unity」というボタンが表示されます。表示されたらそのボタンを押します。

6. Unityエディターが開きます。

7. Unityエディターに切り替わったら、ウィンドウが開いているはずです。
   ウィンドウ右下の「Import」ボタンを押します。

8. インポートが終了したら完了です。

2. フィールドを作る

1.3で追加したライブラリを使用してゲームのフィールドを作ります。

2-1. シーンを作る

ゲーム画面用のシーンを作っていきます。

1. Projectウィンドウ上で.. / Aseets / Scenes / に移動する。移動したら右クリック。
2. 一番上の「Create」にカーソルを合わせる。
3. 「Scene」を探し、クリック。
4. GameSceneという名前を付けます。
5. 作成したGameSceneを開きます。

解説：シーンとは？

ゲームには様々な画面があると思います（起動した直後のタイトル画面、ゲーム画面、結果を表示するリザルト画面）。
Unityではこれらの画面を「シーン(Scene)」と呼び、別々のファイルを作って管理しています。

2-2. カメラの位置調整

1. Hierarchyウィンドウにある「Main Camera」を選択します。
2. 選択した状態でInspectorウィンドウに移動します。「Size」という項目を15に設定してください。

2-3. Tilemapでフィールドを作る

Tilemapオブジェクトを使用し、フィールドを作ります。

解説：Tilemapとは？

端的に表すと「お絵かき」出来るオブジェクトです。
あらかじめ作成してあるスプライトを利用するとこで、簡単に規則的な配置をしたオブジェクトを作ることができます。

2-3-1. オブジェクトの作成

1. Hierarchyウィンドウで右クリックします。「2DObject」にカーソルを合わせます。
2. 「Tilemap」にカーソルを合わせます。
3. 「Rectangular」をクリックします。
4. Hierarchyウィンドウに「Grid」というオブジェクトが作成されます。
5. Gridオブジェクトを作成するとSceneウィンドウに線が格子状に表示されます。

2-3-2. フィールドを描く

1. 画像の参考にTilemapウィンドウを表示させます。
2. 表示させたウィンドウは好きな場所に配置してください。（僕は右側）

3. Tilemapウィンドウの格子状の線が表示されている部分から、下の画像で青が囲まれているスプライトと同じものを探し出します。

4. Tilemapウィンドウ上部にあるツールボタングループから「ブラシ」（左から3番目）を選択します。
   ※その他Tilemapの使い方：【Unity】タイルマップの基本的な使い方＞ツールの説明

5. 3で探し出したスプライトをクリックし、選択します。

6. その状態でSceneウィンドウに移動し、左クリックをすると選択したスプライトをSceneウィンドウ上に描くことができます。
   ※描いたものを消すためには「削除」（右から2番目）を選択して、6と同様の操作をします。

7. また、格子状の線のほかに長方形の枠線が引かれているのが分かると思います。これは、カメラが一度にとらえることができる範囲を表しています。

8. ひとまず、下の画像のように描いてみましょう。

9. 描けたら残りの部分も下の画像のように描きます。
   ※画像はクリックするとズームして表示されます。

2-3-3. 当たり判定を設定する。

プレイヤーがしっかり地に足をつけれるようにするために、当たり判定を設定します。

1. Gridオブジェクト内にある「Tilemap」という名前のオブジェクトを選択します。
2. その状態でInspectorウィンドウに移動します。
3. 「Add Component」ボタンを押してください。
4. 画像のように検索欄が表示されるのでTilemap Collider 2Dと入力して一番上に表示されたものを選択します。
5. すると、画像のように緑の枠線がついた状態のオブジェクトになると思います。

2-4. Canvasで背景を作る

Canvasオブジェクトを使用し、背景を作ります。
今回はカメラの位置が変わった場合でも常に同じ背景を表示（背景を追従）してくれるようにします。

解説：Canvasとは？

UI (User Interface) を配置するためのオブジェクトです。
ボタンやテキスト（スコア等）のユーザーが画面上で操作するオブジェクトはCanvasオブジェクト内に配置します。

詳細：今さら聞けない！ UI（ユーザーインターフェース）とは？

2-4-1. Canvasを作る

1. Hierarchyウィンドウで右クリックします。「UI」にカーソルを合わせます。
2. 「Canvas」をクリックします。
3. HierarchyウィンドウにCanvasというオブジェクトが作成されます。
4. Canvasの名前をCanvasCameraに変更します。

6. CanvasCameraオブジェクトを選択した状態でInspectorウィンドウに移動します。
7. Canvas＞RenderModeを「Screen Space - Camera」に変更します。
   ※Screen Space - Camera：カメラのレンズにCanvasが張り付いた状態にするモード
8. Canvas＞RenderCameraにはMain Cameraオブジェクトをドラッグアンドドロップします。
9. Canvas Scaler＞UI Scale Modeを「Scale With Screen Size」に変更します。
   ※Scale With Screen Size：レスポンシブ対応モード（画面の大きさ・比率が違う場合でも同じように表示させる）

2-4-2. Canvas内に背景画像を配置する

1. Hierarchyウィンドウで右クリックします。「UI」にカーソルを合わせます。
2. 「Image」をクリックします。

3. React Transform＞Widthを「960」にします。
4. React Transform＞Heightを「540」にします。
   この時点では真っ白な背景になっていると思います。
5. Image＞Source Imageに../ Aseets / Asset FTTGR / Sprites / Environment / GroundsにあるMainBackground2.pngをドラッグアンドドロップします。

これでカメラが移動しても常に追従してくれる背景が完成しました！

HierarchyウィンドウでMain Cameraオブジェクトを選択して、Positionを変えてみるとわかると思います。

次回

プレイヤーを作る