![スイカゲーム風「ベジタブルゲーム」の作り方 Vol.01](https://fivebox.pro/wp-content/uploads/2024/01/0fa64497d150896ac6fe3093c0438120-1.png)
最近「スイカゲーム」が大流行の様で、ファイブボックスに通われている小中学生も、授業前や終わった後に、スクラッチで作られたのスイカゲーム(もどき)で遊んでいるようです。
このゲーム、Unityで作れば、簡単にできそう・・
ということでスイカゲーム風「ベジタブルゲーム」の作り方、早速進めていきましょう!
完成イメージはこのような感じです。
今回使用している画像は、adobe の生成AI「Firefly」で作ってみました。なかなかうまくできていますよね、ジャガイモがレンコンっぽいですけど・・・。
![ファイブボックス作成 スイカゲーム風、ベジタブルゲームイメージ画像](https://static.wixstatic.com/media/09450c_77fdeb3417f542e6982b60f3e8fa2492~mv2.png/v1/fill/w_869,h_482,al_c,lg_1,q_90,enc_auto/09450c_77fdeb3417f542e6982b60f3e8fa2492~mv2.png)
では今回から、その作り方をこのブログでご紹介していきます。
その他のベジタブルゲームの作り方の記事
今回はゲームパッドなど、パソコン以外のデバイスでも操作ができるように、InputSystem を活用して作っていきます。
ご興味のある方は、ぜひご参照くださいませ!
環境構築
プロジェクトの作成
UnityHubで以下のように新規プロジェクトを作成します。
- Editorバージョン:InputSystem を使用するため2021.2以降のものを指定
- テンプレート:2Dを指定
- プロジェクト名:任意の名前を指定(サンプルではVegetableGame)
![Unityで作る「スイカゲーム風 ベジタブルゲーム」環境構築編1](https://static.wixstatic.com/media/09450c_9798d28c84094ee29fd210d39990b26c~mv2.png/v1/fill/w_911,h_479,al_c,lg_1,q_90,enc_auto/09450c_9798d28c84094ee29fd210d39990b26c~mv2.png)
この作品では最終的に、Webブラウザで共有できる様にしたいと思います。そのための環境設定を行います。
上部メニューの 「Flie」 → 「Build Settings」 を選択
![スイカゲーム風ベジタブルゲーム 環境構築説明画像2](https://static.wixstatic.com/media/09450c_1fcb7fff32fd4659ba75d615355ad457~mv2.png/v1/fill/w_718,h_682,al_c,lg_1,q_90,enc_auto/09450c_1fcb7fff32fd4659ba75d615355ad457~mv2.png)
『 WebGL 』 を選択して、[ Swich Plathome ] ボタンを押します。
![スイカゲーム風ベジタブルゲーム 環境構築説明画像3Platformの変更](https://static.wixstatic.com/media/09450c_89ed4bee71f546ddac97c3d7d7922bc6~mv2.png/v1/fill/w_641,h_617,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/09450c_89ed4bee71f546ddac97c3d7d7922bc6~mv2.png)
下のようにUnityのアイコンが 『 WebGL 』 に移動します。
![スイカゲーム風ベジタブルゲーム 環境構築説明画像4](https://static.wixstatic.com/media/09450c_8b7ba8a1da0c45e8a1612ebda31dd7ec~mv2.png/v1/fill/w_792,h_411,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/09450c_8b7ba8a1da0c45e8a1612ebda31dd7ec~mv2.png)
つづいて、同じ画面から左下の [ Player Settings ] を選択します。
[ Resolution ](解像度) で以下の項目を指定します。
- Default Canvas Width(横幅) 1920
- Default Canvas Height (高さ) 1080
※ここはご自身の環境に合わせて、任意で変更してください。
UnityRoomで共有する場合は、960(横幅)×540(高さ)で作成します
![スイカゲーム風ベジタブルゲーム 環境構築説明画像5解像度変更](https://static.wixstatic.com/media/09450c_df3790961db34051aed66be93c63c0a1~mv2.png/v1/fill/w_879,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/09450c_df3790961db34051aed66be93c63c0a1~mv2.png)
設定が完了したら、そのままポップアップ画面を閉じてください。
Gameビューで画面サイズを 「FullHD(1920×1080)」 に変更しておきましょう。
UnityRoomで共有する場合は「16:9 Aspect」 に指定します。
※上で設定した解像度に指定します。
![スイカゲーム風ベジタブルゲーム 環境構築説明画像6画面サイズの変更](https://static.wixstatic.com/media/09450c_6b01c2e16db24b739dbc4b01615320e3~mv2.png/v1/fill/w_866,h_416,al_c,lg_1,q_90,enc_auto/09450c_6b01c2e16db24b739dbc4b01615320e3~mv2.png)
Sceneとフォルダの準備
【Project】 の [ Assets ] の中に次のようなフォルダを作成しておきます。
フォルダ名 | 保存するオブジェクト |
01_Scenes | Scene を保存(初期フォルダの名前を変更) |
02_Scripts | スクリプトファイルを保存 |
03_Prefabs | プレハブを保存 |
04_Sprites | 画像の素材を保存 |
05_Sounds | 音源素材を保存 |
05_Other | その他の素材を保存 |
![スイカゲーム風ベジタブルゲーム フォルダ準備](https://static.wixstatic.com/media/09450c_35fccca06e65462d955d73beeaf1d865~mv2.png/v1/fill/w_1041,h_228,al_c,lg_1,q_85,enc_auto/09450c_35fccca06e65462d955d73beeaf1d865~mv2.png)
[ 01_Scenes ] の中にある既存のシーン SampleScene をリネーム、GameScene に変更しておきます。
![スイカゲーム風ベジタブルゲーム シーン名変更](https://static.wixstatic.com/media/09450c_43c2c5523eec47eda7628335528df9c6~mv2.png/v1/fill/w_479,h_280,al_c,lg_1,q_85,enc_auto/09450c_43c2c5523eec47eda7628335528df9c6~mv2.png)
InputSystem の追加
今回は InputSystem という仕組みを使って、キーボード だけではなく Gamepad や スマートフォン、タブレット 等でもコントロールできる作品を作っていきます。
Unityの上部メニュー「Window」から「PackageManager」を選択、展開されたメニューから UnityRegistry を選択し、InputSystem を探します。見つけたら [install] ボタンを押して、取り込みます。
![スイカゲーム風ベジタブルゲーム ImputSystemの取り込み](https://static.wixstatic.com/media/09450c_1b7a7b13dc8a43878f12fe146dbb72eb~mv2.png/v1/fill/w_1110,h_467,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/09450c_1b7a7b13dc8a43878f12fe146dbb72eb~mv2.png)
インストール時に Warning のメッセージが表示されますので「Yes」を選択。最後は保存しますか?と聞いてくるので「Save」を選択します。
![スイカゲーム風ベジタブルゲーム ImputSystemの取り込み2](https://static.wixstatic.com/media/09450c_e636ccd6e43e426fac3cf889ec9eeac0~mv2.png/v1/fill/w_1110,h_309,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/09450c_e636ccd6e43e426fac3cf889ec9eeac0~mv2.png)
インストール後、Unity が再起動される場合があるようです。
続いて、入力システムを InputSystem に変更する処理を行います。
Project Settings メニューから「Player」を選択、OtherSetting → Active Input Handring を 「both」 に変更、ポップアップされたメッセージで「Aplay」を選択し、変更を許可します。(すでに「both」に変更されている場合は、そのままでOKです)
![スイカゲーム風ベジタブルゲーム ImputSystemの取り込み3](https://static.wixstatic.com/media/09450c_c89f0e2d350a42fab4f9a1f45ceffd50~mv2.png/v1/fill/w_1110,h_584,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/09450c_c89f0e2d350a42fab4f9a1f45ceffd50~mv2.png)
その後、システムが再起動され、変更が反映されます。
続いて Unity の Hierarchy に戻り、CreateEmpty で空のゲームオブジェクトを作成します。名前を「InputSystem」にしておきましょう。
「InputSystem」には 【 Player Input コンポーネント】 を追加します。
![スイカゲーム風ベジタブルゲーム ImputSystemの取り込み4](https://static.wixstatic.com/media/09450c_f34467820e384e0caffeb0da05cc11c4~mv2.png/v1/fill/w_700,h_524,al_c,lg_1,q_90,enc_auto/09450c_f34467820e384e0caffeb0da05cc11c4~mv2.png)
取り込んだ PlayerInputコンポーネントを以下のように指定します
❶ CreateActions
「Playre Inputコンポーネント」では 「CreateActions」 というボタンを押し、独自のアクションを追加します。保存場所と名前を聞いてくるので、作成済みのフォルダ [06_Other] を指定、名前を「Action」などの名前にして「保存」ボタンを押します。
![スイカゲーム風ベジタブルゲーム ImputSystem PlayerInput 更新](https://static.wixstatic.com/media/09450c_add7769ab8cf4de091c5a4d6086e4377~mv2.png/v1/fill/w_1110,h_452,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/09450c_add7769ab8cf4de091c5a4d6086e4377~mv2.png)
Action に作成したアクションが表示されています。
今回の課題で使用する移動の Action は Move になります。 キーボードの 上下左右の矢印キー、及び WASDキー さらに Gamepad の LeftStick でそれぞれの方向への信号が上がるということが表示されています。
❷ Behavirプロパティ
Behavior には 「Invoke Unity Events」 を指定します。
このことにより❶で確認した Move() Look() Fire() などのイベントをスクリプトファイルから受け取ることができます。
![スイカゲーム風ベジタブルゲーム ImputSystem PlayerInput の更新2](https://static.wixstatic.com/media/09450c_a3f00d9fdecd439fbe6a168efdc0f9a2~mv2.png/v1/fill/w_1110,h_420,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/09450c_a3f00d9fdecd439fbe6a168efdc0f9a2~mv2.png)
素材の取り込み
この作品では複数の野菜を使ってゲームを作っていきます。
サンプルの素材を用意しましたので、下のリンクより取得してください。
ベジタブルゲームで使用するAsset(約37MB)
野菜ではなく、別のテーマで作る場合は、各自オリジナル素材を12個程度用意してください。
ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。