[Unity] Visual Scripting でつくる簡単ゲーム「防空ゲーム」その１

2月 6, 2024 | ALL, Unity, ビジュアルスクリプティング

ビジュアルスクリプティングで作る「防空ゲーム」その１

ビジュアルスクリプティングで簡単なミニゲームを作成して見ましょう。上空から落ちてくるモンスターを下に設置した大砲で撃ち落としましょう。

１．２Dゲームプロジェクトの作成

2Dゲームのプロジェクトを作成します。

Add Variable for Particle

2．使用アセットについて

まず、シーンで使うオブジェクト類の下準備します。
今回は以下のアセットを使って作成しています。もちろんアセットなしでも作成可能です。スプライト画像用のアセットは無料のものです。

1. Pixel Adventure 1
無料
使用箇所：スプライト画像として使用
アセットストア-リンク

スイカゲームオブジェクト構成

2. Pixel Adventure 2
無料
使用箇所：スプライト画像として使用
アセットストア-リンク

スイカゲームオブジェクト構成

3. Epic Toon FX | VFX Particales
有料
使用箇所：パーティクルで使用
アセットストア-リンク

スイカゲームオブジェクト構成

4. GUI Ori -Casual Game
有料
使用箇所：パーティクルで使用
アセットストア-リンク

スイカゲームオブジェクト構成

３．タイルマップによるマップオブジェクトの準備

タイルマップの作成

今回はゲームフィールドをタイルマップ（Tilemap）を使って作ります。
タイルマップは、使える画像があればとても便利な機能です。
Hierarchy > 2D Object > Tilemap > Rectangular を選択します。
色々なタイプを選択できますが、今回はRectangular（長方形）を選択します。

Add Variable for Particle
このようにTilemapが作成されます。
Add Variable for Particle
Add Variable for Particle

タイルパレットの作成

まずタイルパレットを表示します。
Window > 2D > Tile Palette　でタイルパレットを表示させます。
Add Variable for Particle
表示されたタイルパレットに新しいパレットを作ります。
Add Variable for Particle
パレットの名前を入力してCreateボタンを押します。
Add Variable for Particle
ウィンドウが開きますので、保存先を指定してChooseボタンを押します。
Add Variable for Particle
作ったパレットを選択します。
※ここでエラーが出て新しいパレットが表示されない場合があります。その場合、Unityの再起動をすることで新しく作ったパレットを選択することができるようになります。
Add Variable for Particle
ここで画像をパレットにドラックすれば登録ができます。
その前に、画像の設定をします。
タイルパレットに使う画像の設定を行います。
Add Variable for Particle
画像を選択します。
Add Variable for Particle
インスペクター画面で画像の設定を変更します。
Pixels Per Unit を16に変更してApplyボタンを押します。
Add Variable for Particle
画像のまとまりを選択して、パレットエリアにドラッグします。
Add Variable for Particle
タイルパレットを使って、下の動画の様に２Dのフィールドを作ってみましょう。
今回は、下のように地面を作ってみました。もちろん、好きな形でかまいません。
Add Variable for Particle

４．背景の作成

タイルマップの奥に背景を作りましょう。
Hierarchy > + > 2D Object > Sprites > Square で Square を作成します。
Add Variable for Particle
Add Variable for Particle
作ったスプライトをインスペクター(Inspecter)で設定をします。
1. 名前をBackgroundに変更します。
2. Spriteを変更します。
3. Draw Mode を [ Tiled ] にします。
Add Variable for Particle
次にRect Tool をつかって画面全体にひろげます。
Add Variable for Particle
背景の１タイルあたりの大きさを変え方を教えます。
デザイン上タイルの大きさを変えたいときがあると思います。
そんなときは、Spriteに適応しているスプライト画像を選択し、インスペクターを開きます。
Add Variable for Particle
InspectorでPixels Per Unit -> 50 にしてApplyを押します。
Add Variable for Particle
１タイルあたりの大きさが変化しました。
Add Variable for Particle

５．砲台の作成

今回の砲台は、アセットではなかったので、自作しています。
下記、画像をお使いください。
Add Variable for Particle
Add Variable for Particle
下記のように砲台を作って行きます。
Add Variable for Particle
2Dゲームの場合、上下関係をSorting Layersを使って設定します。
まず、Sorting Layersを準備しましょう。
Add Variable for Particle
Add Variable for Particle
+ ボタンをおしてLayerを追加していきます。
今回はDefaltの上の階層に３つ追加します。
Add Variable for Particle
それではオブジェクトを追加します。
Add Variable for Particle

１．空のオブジェクトを追加し、名前を「Cannon」にします。
２．そのなかに以下のオブジェクトを追加します。
　i) Hierarchy > + > 2D Object > Sprites > Square を追加し、名前を「CannonUp」にします。
　ii) Hierarchy > + > 2D Object > Sprites > Square を追加し、名前を「CannonDown」にします。
　iii) 空のオブジェクトを追加し、名前を「RotatePosition」にします。
３．それぞれのオブジェクトの設定を以下のようにします。

【Cannonオブジェクト】
Box Collider 2D を追加します。
cannonオブジェクトインスペクター
cannonオブジェクトインスペクター
【CannonUpオブジェクト】
Rigidbody 2D を追加します。
cannonオブジェクトインスペクター
cannonオブジェクトインスペクター
cannonオブジェクトインスペクター
CannonUpオブジェクト内に空オブジェクトを作成し、名前をBulletDownにします。
cannonオブジェクトインスペクター
cannonオブジェクトインスペクター
【CannonDownオブジェクト】
Rigidbody 2D を追加します。
cannonオブジェクトインスペクター
cannonオブジェクトインスペクター
cannonオブジェクトインスペクター
【RotatePositionオブジェクト】
このオブジェクトは砲の回転軸を指定するためだけのオブジェクトになります。
cannonオブジェクトインスペクター
cannonオブジェクトインスペクター
cannonオブジェクトインスペクター

６．弾の作成

以下の手順で弾を作っていきます。
１．まずHierarchyでたまオブジェクトを作ります。
２．その後、オブジェクトをProjectに入れてプレファブ化します。
事前に弾に使う画像を準備しておきます。
上向きのたまの画像を準備しましょう。
Create Capsule Sprite
１．まずScene上で弾オブジェクトを作ります。
Hierarchy > 2D Object > Sprites > Capsule でCapsuleオブジェクトを作成します。
Create Capsule Sprite
Create Capsule Sprite
インスペクタ画面で弾の設定をします。
Create Capsule Sprite
Create Capsule Sprite
次にスクリプトを入れます。
弾のスクリプトは、敵（Enemyタグ）に触れたら爆発のエフェクトを出現させて、自分を削除します。
まず、Add Component を押します。
Add Component
Script Machine を追加します。
Add Component
New をおしてScriptを作成します。
Add Component
ウィンドウが表示されますので、名前を「BulletController」にし、保存先を指定してSaveを押します。
Add Component
Edit Graphをおしてプログラミングを始めます。
Add Component
スクリプト「BulletController」に以下のノードをくわえます。
Add Component
次につくった、オブジェクトをProjectに入れてプレファブ化します。
Add Component

７．砲台のプログラム作成

Cannonオブジェクトを選択してインスペクタ画面でScript Machineを追加します。
Add Component
Newボタンをおします。
Add Component
スクリプト名を「CannonController」にして、保存します。
Add Component
Edit Graphを押して、スクリプトを編集します。
まず、変数をせっていします。
Add Component
「砲がマウスの方を向くようにするプログラム」
Add Component
Add Component
Add Component