この講座ではUnity初心者でもできる「スイカゲーム風マージパズルゲーム」の作り方を解説していきます。
Unity入門者向け講座ということで一気に複雑な仕組みを作るのではなくステップバイステップで少しずつ開発する形式で進んでいきます。
- 「果物を表示する」
- 「マウスで左右に動かす」
- 「マウスを離したら落とす」
- 「同じ果物同士が触れたら合体する」
といった形で一つずつ着実にゲーム機能を実装しながら作っていきます。
最初から完璧なパズルゲームを作ろうとすると難しく感じるかもしれませんが、細かく分けて考えればUnity初心者の方でも少しずつゲームを完成させることが可能です。
Unityを使ったゲーム制作の下準備をしよう
まずはUnityプロジェクトを作成し、スイカゲーム風パズルゲームを作れる状態にしていきましょう。
この記事を読むタイミングによって、Unity Hub や Unityエディタの画面が多少異なる場合があります。
基本的な流れは大きく変わらないため、画面の名前や配置が少し違っていても、近い項目を探しながら進めてみてください。
Unityのインストールがまだの方は、先にUnityをインストールしておきましょう。インストール方法については、以下の記事を参考にしてください。
Unity Hubを開いてプロジェクトを作成しよう
それでは、Unity Hubを開きましょう。
Unity Hubは、Unityのプロジェクトを作成したり、インストールされているUnityのバージョンを管理したりするためのアプリです。
Unityで新しくゲームを作るときは、基本的にこのUnity Hubからプロジェクトを作成します。
Unity Hubを開いたら、左側にある「プロジェクト」タブを選択します。
その中にある「新しいプロジェクト」をクリックしてください。
Unityのバージョンを選ぼう
次に、使用するUnityエディタのバージョンを選びます。
この講座では例として、Unity 6000.4.7f1 を使用します。
ただし、Unity 6であれば基本的には同じように進められるため、必ずしも完全に同じバージョンである必要はありません。
テンプレートを選ぼう
今回は2Dゲームを作成するので、テンプレートは「Universal 2D」を選択します。
テンプレートとは、プロジェクトを作成するときの初期設定のようなものです。
Unityには、3D用、2D用、URP用など、いくつかのテンプレートがあります。
今回は2D横スクロールアクションゲームを作るため、最初から2D向けの設定になっている「Universal 2D」を選んでおくと進めやすくなります。
プロジェクト名を決めよう
次に、プロジェクト名を入力します。
プロジェクト名は自由に決めて大丈夫ですが、この講座では分かりやすいように
|
1 |
スイカゲーム風マージパズル |
という名前にしておきます。
もちろん、自分で分かりやすい名前に変更しても問題ありません。プロジェクトの保存場所も自分が管理しやすい場所を選んでおきましょう。
プロジェクトを作成しよう
ここまで設定できたら、「プロジェクトを作成」をクリックします。
初回起動時はプロジェクトの作成に少し時間がかかることがあります。画面がすぐに開かなくてもそのまま待っていれば大丈夫です。
作業しやすいようにUnityの画面と入力設定を整えよう
プロジェクトが開いたらすぐにゲームを作り始めることもできますが、その前に作業しやすいようにUnityの画面や入力設定を整えておきましょう。
SceneビューとGameビューについて
Unityには、よく使う画面として「Sceneビュー」と「Gameビュー」があります。
Sceneビュー：ゲームを作るための画面
Gameビュー：実際にゲームとして表示される画面
ゲーム制作では、果物などを配置しながら、「ゲーム画面ではどのように見えているか」を確認する場面が多くなります。そのため、SceneビューとGameビューを同時に見られるようにしておくと、作業がしやすくなります。
(画面の見方やUnityの基本操作について詳しく知りたい方は、以下の記事も参考にしてみてください。)
Gameビューの配置を変更しよう
Unityの初期配置では、SceneビューとGameビューが同じ場所のタブに並んでいる場合があります。この状態でも作業はできますが、Sceneビューを見ながらGameビューを確認したいときに、毎回タブを切り替える必要があります。
そこで、Gameビューを別の場所に移動して、常に確認できるようにしておきましょう。
Gameタブをクリックしたままドラッグし、ProjectやConsoleタブがある場所の右側あたりに移動します。そこでマウスを離すと、Gameビューを別の場所に配置できます。
これで、SceneビューとGameビューを同時に確認できるようになります。
Gameビューの比率を設定しよう
次に、Gameビューの画面比率を設定します。
Gameビューの左上あたりを見ると、「Free Aspect」と表示されている部分があります。
これは、Gameビューの表示比率を指定する場所です。初期設定では、Free Aspectになっていることが多いです。
Free Aspectは、Gameビューのウィンドウサイズに合わせて自由に比率が変わる設定です。試しにGameビューの大きさを変えると、画面の縦横比も一緒に変わります。
ですが、ゲーム制作中に画面の比率が毎回変わってしまうと見え方を確認しづらくなります。
ある画面サイズでは果物や壁がちょうどよく見えていても、別の比率では画面の端が見切れたり、余白が多く見えたりすることがあります。
本格的なゲーム制作では、画面サイズや解像度が変わったときの見え方も考えて調整していきます。
ただし、今回はUnity初心者向けのチュートリアル講座です。
まずはPC向けのゲームを想定してGameビューの比率を16:9に設定して進めていきます。
Gameビュー左上の「Free Aspect」をクリックし、一覧の中から「16:9」を選択しましょう。
これで、Gameビューが16:9の比率で表示されるようになります。
画面サイズ変更に対する本格的な対策を学びたい方は、以下の参考記事も読んでみてください。
参考記事：Unityの画面のアスペクト比と解像度を自動変換 全スマホ・複数解像度に対応させる）
キーボード入力の設定をしよう
キーボード入力の設定を行います。
Unityには入力を扱う仕組みとして Input System があります。
Input System はとても便利な機能ですが、初心者が最初に学ぶには少しわかりにくい部分があります。
専用の設定ファイルを作成したり、Actionを登録したり、スクリプト側で入力イベントを受け取ったりする必要があります。
本格的なゲーム制作では便利ですが、今回はまず「キーを押したら動く」という基本の考え方を学ぶことを優先します。
そこで、この講座では古い入力方式である旧Input System も使えるように設定します。
旧Input System では、スクリプトに次のような形で入力処理を書くことができます。
|
1 |
Input.GetKeyDown(KeyCode.Space) |
これはSpaceキーが押された瞬間に反応する書き方です。
コードを見たときに、「Spaceキーで反応するんだな」とわかりやすいのが特徴です。
今回のような初心者向け講座では、このように直感的に読める書き方の方が理解しやすいです。
そのため、まずは旧Input Systemを使ってUnityでの入力処理に慣れていきましょう。
それでは、Unityの入力設定を変更していきます。画面左上のメニューから、Edit > Project Settings を選択します。
Project Settingsウィンドウが開いたら、左側のメニューから Player を選択します。
Playerの設定画面を開いたら、下の方にある Other Settings を探します。
Other Settingsの中に、Active Input Handling という項目があります。
この項目は、Unityでどの入力方式を使うかを設定する場所です。ここを Both に変更しましょう。
Bothにすると、新しいInput Systemと古いInput Systemの両方が使える状態になります。
設定を変更すると、Unityから再起動を求められる場合があります。その場合は表示に従ってUnityを再起動してください。
再起動後にプロジェクトを開けば設定は完了です。
設定が終わったら、Project Settingsウィンドウは閉じておきましょう。
スイカゲーム風マージパズルに必要な素材を準備しよう
次に、ゲームに使う画像素材を準備していきます。以下のリンクから素材をダウンロードしてください。
ここで用意したのは、果物とリトライボタンの画像です。
素材をダウンロードできたら、Zipファイルを右クリックし、「すべて展開」を選択して解凍しましょう。
解凍できたら、「スイカゲーム風マージパズル画像素材」の中にさらに「スイカゲーム風マージパズル画像素材」というフォルダがあると思います。
このフォルダをUnityのProjectウィンドウ内にドラッグ＆ドロップしてください。
画像素材のサイズを調整しよう
素材をUnityに入れたら画像の表示サイズを調整していきます。
Unityでは画像素材をそのまま使うと思ったより大きく表示されたり小さく表示されたりすることがあります。
画像の大きさをそろえるためにPixels Per Unitという設定を変更します。
Projectウィンドウ内にある果物の画像をすべて選択します。CTRLキーを押しながら画像をクリックするとまとめて選択できます。
画像を選択したら、Inspectorウィンドウの中にあるPixels Per Unitを「1254」に変更しましょう。
変更したら、Inspectorの下の方にあるApplyボタンを押して設定を反映します。
ちなみに、ここまでの操作の途中で誤って画像の右中央に付いている再生ボタンのようなところを押すと画像から別の画像が出てくるような状態になります。
同じ画像に見えますが、この右側を選んでもPixels Per Unitの数値調整などはできないので気を付けてください。
Pixels Per Unitとは？
Pixels Per Unit は、画像の何ピクセル分を Unity 上の1単位として扱うかを決める設定です。
例えば、このいちごは1254 × 1254ピクセルの Sprite です。
Pixels Per Unit を1254にすると、1254ピクセルが Unity 上の1単位として扱われるため、この Sprite の大きさは 1 × 1 になります。
Pixels Per Unit を418にすると、418ピクセルが Unity 上の1単位として扱われます。
1254 ÷ 418 = 3 なので、この Sprite の大きさは3 × 3になります。
つまり、Pixels Per Unit の数値を大きくすると Sprite は小さく表示され、数値を小さくすると Sprite は大きく表示されます。
ステージを作成しよう
今回のゲームのステージに必要なのは床と左右の壁です。床があることで果物が下に落ちすぎないようになり、壁があることで果物が左右にこぼれないようになります。
まずは床を作成します。Hierarchy ウィンドウで右クリックして、2D Object > Sprites > Square を選択しましょう。作成した Square の名前を Floor に変更します。
次に、Floor のサイズと位置を調整します。Hierarchy で Floor を選択し、Inspector から以下のように調整しましょう。
また、真っ白のままだと少し味気ないので色も変更しておきます。色は基本的にお好みで構いませんが、講座ではピンク色にしておきます。
カラーコードはFF69B4にしました（好きな色に設定してもらって大丈夫です）。
※ただし、果物や背景と似すぎた色にすると見えづらくなるため、オブジェクトや背景に近すぎる色は避けましょう。
次に、右側の壁を作成します。先ほどと同じように、Hierarchy ウィンドウで右クリックして、2D Object > Sprites > Square を選択しましょう。作成した Square の名前を WallRight に変更します。
WallRight を選択し、Inspector から位置とサイズを以下のように調整しましょう。色も床と同じように見やすい色に変更しておきます。
次に、左側の壁を作成します。WallRight を選択した状態で Ctrl + D を押して複製しましょう。
複製したオブジェクトを選択し、Inspector から名前を WallLeft に変更します。
そのあと、Position の X の値に – を付けて、右側の壁と反対側に配置しましょう。
これで床と左右の壁を作成できました。最後に、背景色も調整しておきましょう。Hierarchy から Main Camera を選択します。
Inspector の中にある Environment の Background から、背景色を変更しましょう。背景色もお好みで構いませんが、講座ではやわらかい桃色にしておきます。
カラーコードはFFC0CBにしました。
背景色はゲーム全体の見やすさに関わります。果物や床、壁が見えづらくならないよう少し薄めの色にしておくと扱いやすいです。
果物の準備をしよう
次に、ゲームで使用する果物を準備していきましょう。
スイカゲーム風のパズルゲームで大切なのは、果物が落ちたり、ぶつかったり、積み上がったりする物理の動きです。そのため、今回は果物に Rigidbody2D と Collider を追加して、Unity の 2D 物理で動くようにしていきます。
Rigidbody2D と Collider とは？
Rigidbody2D は、オブジェクトを Unity の 2D 物理で動かすためのコンポーネントです。これを付けると、重力で落ちたり、ぶつかったときに動いたりするようになります。
Collider はオブジェクトの当たり判定を作るためのコンポーネントです。これを付けると、Collider の付いた他のオブジェクトとぶつかれるようになります。
まずは Project ウィンドウから Assets > スイカゲーム風マージパズル画像素材 を開きます。その中にある果物の画像をすべて Scene ビューにドラッグ＆ドロップして、いったんゲーム画面に配置しましょう。
次に、Hierarchy から配置した果物をすべて選択します。複数のオブジェクトをまとめて選択するときは、Shift キーを使うと便利です。
果物をまとめて選択した状態で、Inspector から Add Component をクリックし、Physics 2D > Rigidbody2D を追加しましょう。
ここで一度、再生ボタンを押して確認してみましょう。
果物が下に落ちていけば成功です。
一方で、床や壁はその場に止まったままになっていると思います。これは、床や壁には Rigidbody2D を付けていないためです。Rigidbody2D が付いている果物は、重力や衝突の影響を受けて動きます。それに対して、Rigidbody2D が付いていない床や壁は、物理で動かない固定されたオブジェクトとして扱われます。
確認できたら再生を止めましょう。
次に、果物に当たり判定を追加します。
もう一度、Hierarchy から果物をすべて選択します。
Inspector の Add Component から Physics 2D > Capsule Collider 2D を追加しましょう。
Collider はオブジェクトがどこでぶつかるかを決める当たり判定です。Collider を追加することで、果物同士がぶつかったり、床や壁に当たったりできるようになります。
試しに、いちごなどの果物を1つ選択してみましょう。
Scene ビューに緑色の枠線が表示されると思います。この緑色の枠線が当たり判定です。
Capsule Collider 2D コンポーネントの中にある Edit Collider ボタンを押すと、Scene ビュー上で当たり判定の形を調整できます。
基本的には自動で近い形に設定されますが、果物の見た目と少しずれていることがあります。それぞれの果物を確認しながら、見た目に近い形になるように調整しましょう。
ただし、なしだけは例外です。なしに Capsule Collider 2D を使うと、見た目と当たり判定の隙間が多くなりすぎてしまいます。
そのため、梨だけは別の Collider に変更しておきます。Hierarchy からなしを選択しましょう。
Inspector にある Capsule Collider 2D のタブの上で右クリックし、Remove Component を選択して削除します。
次に、Add Component から Physics 2D > Polygon Collider 2D を選択しましょう。
Polygon Collider 2D は、オブジェクトの形に合わせて、当たり判定を多角形で作る Collider です。丸い形だけでなく、少し複雑な形のオブジェクトにも当たり判定を合わせやすいのが特徴です。
なぜすべて Polygon Collider 2D にしないの？
スイカゲーム風パズルゲームでは、果物が転がったり、積み上がったりするときのバランスが大切です。Polygon Collider 2D は形に合わせやすい反面、完全な円形ではないため果物同士が引っかかりやすくなります。
そのため、基本的には Capsule Collider 2D を使い、見た目と当たり判定のずれが大きい梨だけ Polygon Collider 2D に変更します。
ここで忘れてはいけないのが、床と壁にも当たり判定を付けることです。果物に Collider が付いていても、床や壁に Collider が付いていなければ、果物は床や壁にぶつからずにすり抜けてしまいます。
Hierarchy から Floor、WallRight、WallLeft をまとめて選択しましょう。
Inspector の Add Component から Physics 2D > Box Collider 2D を追加します。
床や壁は四角い形なので、Box Collider 2D を使います。これで、果物、床、壁に必要な物理設定が入りました。
ここで一度、再生して確認してみましょう。
果物が下に落ち、床や壁にぶつかって止まれば成功です。確認できたら再生を止めましょう。
次に、果物ごとのサイズを調整していきます。スイカゲームでは、果物の種類によって大きさが変わります。小さい果物から大きい果物へ順番に合体していくため、それぞれの果物に合ったサイズにしておきましょう。
Hierarchy から果物を1つずつ選択し、Inspector の Scale を以下のように調整します。
- さくらんぼ
- いちご(そのまま)
- ぶどう
- オレンジ
- リンゴ
- なし
- 桃
- パイナップル
- スイカ
最後に、果物を Prefab にしていきます。Project ウィンドウの Assets 内で右クリックし、Create > Folder を選択します。作成したフォルダの名前を Prefabs に変更しましょう。
次に、Hierarchy から果物をすべて選択します。
選択した果物を、先ほど作成した Prefabs フォルダにドラッグ＆ドロップしましょう。
これで、果物を Prefab として保存できました。
Prefab とは？
Prefab とは、GameObject の設定を Project ウィンドウに保存しておける仕組みです。
今回の果物には、画像、大きさ、Rigidbody2D、Collider 2D などの設定が入っています。Prefab にしておくと、これらの設定が入った果物をゲーム中にスクリプトから何度でも同じ状態で作れます。
スイカゲーム風のゲームでは、果物を何度も生成するため果物を Prefab にしておきます。
最後に、Hierarchy に最初から配置していた果物は削除しておきましょう。
今回配置した果物は、Prefab を作るために一時的に置いたものです。ゲーム開始時に最初から果物が置かれていると不自然なので、Prefab化が終わったら Scene 上の果物は削除します。
これで果物オブジェクトの準備は完了です。
プロジェクトファイルのダウンロード
今回の講座で作ったプロジェクトファイルのダウンロードリンクを用意しました。
まとめ
今回はスイカゲーム風パズルゲームの下準備を行いました。
Unityプロジェクトを作成し、果物を落とすための床と左右の壁を用意しました。
また、果物に Rigidbody2D と Collider を追加して、重力で落ちたり、床や壁にぶつかったりできるようにしました。
最後に、果物ごとのサイズを調整し、後からスクリプトで生成・操作できるように Prefab にしました。
これでスイカゲーム風マージパズルに必要なステージと果物の準備は完了です。
次回はPrefabにした果物をランダムに表示し、マウスで左右に動かせるようにします。
さらに、マウスを離した瞬間に果物を落とし、次の果物が出る機能も作成します。
次の記事：
現場レベルのゲーム制作が、すべてここで学べます。
コメント