敵が動かない！

CharacterMove.cs が正しくアタッチされているか確認してください。Inspector で TYPE を ENEMY に設定しましょう。

攻撃アニメーションが再生されない

Animator の Attack フラグが適切に設定されているか確認し、Has Exit Time を無効にしてください。

キャラクターがすり抜けてしまう

BoxCollider2D の Is Trigger を適切に設定し、衝突判定が行われるようにしてください。

【Unity2D】にゃんこ大戦争風タワーディフェンスゲームの作り方！初心者向け完全ガイド

1. はじめに

タワーディフェンスゲームは、プレイヤーがユニットを配置し、敵の進行を防ぐ戦略的なゲームジャンルです。スマホゲームでも人気の**「にゃんこ大戦争」のようなシンプルで遊びやすいタワーディフェンスをUnity**で作ってみましょう！

「タワーディフェンスゲームを作るのは難しそう…」
そんな風に思っていませんか？実は、基本的なゲームの仕組みを理解すれば意外と簡単に作れます！

「この記事では、にゃんこ大戦争風のタワーディフェンスゲームを一から作成する方法を解説しますが、より簡単にタワーディフェンスゲームを作りたい方は、こちらのテンプレートアセット『Two Towers』を活用するのもおすすめです！」

この記事では、初心者でも理解しやすいように、

ステージの作成（背景や拠点の配置）
キャラクターの作成と動きのスクリプト
キャラクター同士の戦闘とアニメーション
UI（HPやゴールドの表示、召喚ボタンの作成）

これらを順番に解説していきます！

また、ゲーム開発をスムーズに進めるために、Unityアセットストアの無料素材を活用します。
例えば、背景やキャラクターはすべて無料アセットを使用するので、グラフィック制作が苦手な方でも大丈夫です！

🌟 完成するとこんなゲームになります！
✅ 敵と味方のキャラクターが拠点から出撃して戦う！
✅ キャラクターが歩いて移動し、敵にぶつかると戦闘開始！
✅ 勝利条件や敗北条件を追加すれば、しっかりとしたゲームになる！

「にゃんこ大戦争」風のタワーディフェンスを作りながら、Unityの基本的な使い方やC#のスクリプトの書き方も学べるので、初心者の方にもオススメです。

それでは、タワーディフェンスゲームの制作を始めていきましょう！ 🚀

2. ステージの作成

タワーディフェンスゲームの舞台となるステージを作成していきます。ここでは背景を設定し、味方と敵の拠点を配置する方法を解説します。

2.1 背景の配置

まず、ステージに背景を設定してゲームの世界観を作ります。無料で利用できる 「Free 2D Cartoon Parallax Background」 アセットを使って、簡単に美しい背景を実装できます。

① 背景アセットをインポート

Unity Asset Store から「Free 2D Cartoon Parallax Background」をダウンロードします。
👉 アセットストアリンク
Unity の 「Window」→「Package Manager」 を開き、「My Assets」タブからダウンロードしたアセットをインポートします。

② 背景を配置する

ヒエラルキー（Hierarchy）ウィンドウ で 「右クリック」→「2D Object」→「Sprite」 を選び、新しいスプライトを作成します。
インスペクター（Inspector）ウィンドウ で 「Sprite Renderer」 の Sprite 欄に、インポートした背景画像を設定します。
背景の位置とサイズを調整し、ゲーム画面全体に背景が表示されるようにします。

2.2 拠点の配置

次に、敵と味方の拠点を配置します。ここでは、 いらすとやのイラスト を使用して拠点を作成し、視覚的にわかりやすいステージを作ります。

① 拠点の画像をインポート

「いらすとや」 などのフリー素材サイトから、拠点として使うイラストをダウンロードします。
Unity の 「Project」ウィンドウ で Assets フォルダ内に「Sprites」というフォルダを作成し、ダウンロードした画像を Sprites フォルダにドラッグ＆ドロップしてインポートします。

② 拠点オブジェクトを作成

ヒエラルキーウィンドウ で 「右クリック」→「2D Object」→「Sprite」 を選び、新しいスプライトを作成します。
インスペクターウィンドウ の Sprite に、先ほどインポートした拠点画像を設定します。
位置を調整して、画面右側に 味方拠点（PlayerBase）、左側に 敵拠点（EnemyBase） を配置します。

③ Order in Layer の設定

拠点が背景の後ろに隠れないように、Order in Layer の値を変更します。

インスペクターウィンドウ で Order in Layer を 1 に設定します。
これにより、背景（デフォルトの Order in Layer: 0）より前面に拠点が表示されるようになります。

④ 名前を変更

整理しやすくするために、ヒエラルキーウィンドウでオブジェクトの名前を変更します。

味方拠点 → PlayerBase
敵拠点 → EnemyBase

まとめ

✅ 背景画像を配置して、ゲームのステージを作成しました。
✅ 拠点としていらすとやの画像を使用し、適切な位置に配置しました。
✅ Order in Layer を設定して、背景より前面に拠点を表示しました。
✅ 拠点のオブジェクト名を EnemyBase と PlayerBase に変更しました。

これで、ステージの基本的なレイアウトが完成しました！次のステップでは、ゲームのUIを作成していきます。

3. UIの作成

ゲームのUI（ユーザーインターフェース）は、プレイヤーに情報を伝えたり、キャラクターを召喚したりするために必要不可欠な要素です。ここでは HPバー、ゴールド表示、召喚ボタン を実装していきます。

Unityの使い方⑪ UI（ユーザーインターフェース）を作ってみよう

3.1 Canvasの設定

まず、すべてのUI要素を管理する Canvas を作成します。

Canvasの作成

ヒエラルキーウィンドウで 右クリック → UI → Canvas を選択して、新しい Canvas を作成します。
名前を GameCanvas に変更しておきましょう。

Canvasの設定

作成した GameCanvas を選択し、 Inspector で以下の設定を変更します。

設定項目	値	説明
Render Mode	`Screen Space - Camera`	カメラを通してUIを表示
Render Camera	`Main Camera`	メインカメラを指定
Order in Layer	`100`	他のUIより手前に表示
UI Scale Mode	`Scale With Screen Size`	画面サイズに応じてUIをスケーリング
Reference Resolution	`(1920, 1080)`	画面の基準解像度を設定
Screen Match Mode	`Expand`	画面サイズに適応する設定

補足
Render Mode を Screen Space - Overlay にすると、カメラに関係なく UI が画面に表示されますが、
Screen Space - Camera にすると、3D空間の要素とUIの調和が取りやすくなります。

3.2 HPバーとゴールドの表示

次に、拠点の HPバー や、キャラクター召喚に必要な ゴールドのUI を作成します。

HPバーの作成

拠点のHPバーを画面に表示させます。

GameCanvas の子オブジェクトとして 右クリック → UI → Text を選択し、新しいテキストを作成します。
名前を EnemyHPText に変更し、敵拠点のHP を表示するようにします。
Inspector で以下の設定を変更しましょう。設定項目値Text100 / 100Font Size40Color赤 (Red)AlignmentCenter
EnemyHPText を EnemyBase の上に配置します。
同様に PlayerHPText を作成し、色を青 (Blue) に変更して PlayerBase の上に配置します。

ポイント
HPの変化 はスクリプトで制御します。現在は 100/100 という固定表示ですが、のちに HitPoint.cs から値を変更できるようにします。

ゴールド表示の作成

ゲーム内でゴールドを管理し、プレイヤーがどれだけゴールドを持っているかを表示します。

GameCanvas の子オブジェクトとして 右クリック → UI → Text を選択し、名前を GoldText に変更します。
Inspector でテキスト内容を変更します。Text0/1000G
GoldText を 画面の右上部 に配置します。

召喚ボタンの作成

キャラクターを召喚するボタンを用意します。

GameCanvas の子オブジェクトとして 右クリック → UI → Empty Object を作成し、名前を SummonPanel に変更します。
SummonPanel の Inspector で Add Component → Grid Layout Group を追加し、以下の設定を行います。設定項目値Cell Size(200, 100)Spacing(10, 10)Child AlignmentMiddle Center
SummonPanel の子オブジェクトとして、 右クリック → UI → Button を選択し、4つのボタンを作成します。
各ボタンの Text を以下のように変更し、ゴールドの消費量を分かりやすくします。
- Knight A (200G)
- Knight B (150G)
- Knight C (100G)
- Knight D (50G)
Inspector でボタンの色をそれぞれ変更し、視認性を向上させます。

3.3 UIのまとめ

ここまでで、基本的なUIが完成しました！

拠点のHP表示
ゴールドの表示
召喚ボタンの配置

次のステップでは、ボタンを押したときに キャラクターを召喚 できるようにスクリプトを追加していきます！

4. キャラクターの作成

タワーディフェンスゲームでは、プレイヤーがユニットを召喚して敵と戦わせるのが基本です。ここでは、プレイヤーユニット（騎士）と敵ユニット（ドラゴン）を作成し、それぞれの設定を行います。

4.1 プレイヤーキャラの作成

プレイヤーキャラクターとして、無料の Knight Sprite Sheet Free アセットを使用します。

無料アセットを使用して簡単にキャラクターを作成できますが、もっと高品質なキャラクターを使いたい場合は、Animated 2D Characters & Monsters のような有料アセットを使うのもおすすめです。これを使うと、より多彩なキャラクターを簡単に追加できます！

1. キャラクターの配置

まず、騎士のスプライトをシーンに配置します。

アセットをインポート
- Knight Sprite Sheet Free をダウンロードしてインポート。
スプライトの選択
- Assets > Knight Sprite Sheet Free > Sprites フォルダを開く。
- 歩行モーションの画像 を複数選択。
- ヒエラルキーウィンドウにドラッグ＆ドロップ。
キャラクターの名前を変更
- ヒエラルキーの新しく作成されたオブジェクトを KnightD にリネーム。
アニメーションの作成
- 歩行モーションを作成すると、自動で Animator と Animation Controller が作成されるので、適切な名前を付けて保存。
攻撃モーションの作成
- 攻撃用のスプライトを同じように KnightD にドラッグ＆ドロップして、新しいアニメーションを作成。

2. 物理コンポーネントの設定

キャラクターが動くように Rigidbody2D や BoxCollider2D を設定します。

Rigidbody2D の追加
- KnightD を選択し、Inspector で Add Component をクリック。
- Rigidbody2D を追加。
- Gravity Scale を 0 に設定（重力の影響を受けないようにする）。
- Constraints の Freeze Rotation Z にチェックを入れる（回転しないようにする）。
BoxCollider2D の追加
- Inspector の Add Component から BoxCollider2D を追加。
- Is Trigger にチェックを入れる（当たり判定のみ）。

Player タグの設定
- KnightD を選択し、Inspector の Tag から Add Tag をクリック。
- Player というタグを新規作成して、KnightD に適用。

4.2 敵キャラの作成

敵キャラクターとして、無料の Dragon Warrior Free アセットを使用します。

1. キャラクターの配置

アセットをインポート
- Dragon Warrior Free をダウンロードしてインポート。
スプライトの選択
- Assets > Dragon Warrior Free > Sprites フォルダを開く。
- 歩行モーションの画像 を複数選択。
- ヒエラルキーウィンドウにドラッグ＆ドロップ。
キャラクターの名前を変更
- EnemyDragon にリネーム。
アニメーションの作成
- 歩行モーションと攻撃モーションを KnightD と同じように作成。

2. 物理コンポーネントの設定

プレイヤーキャラクターと同じ設定を行います。

Rigidbody2D の追加
- EnemyDragon を選択し、Inspector で Add Component から Rigidbody2D を追加。
- Gravity Scale を 0 に設定。
- Constraints の Freeze Rotation Z にチェックを入れる。
BoxCollider2D の追加
- Inspector の Add Component から BoxCollider2D を追加。
- Is Trigger にチェックを入れる。
Enemy タグの設定
- EnemyDragon を選択し、Inspector の Tag から Add Tag をクリック。
- Enemy というタグを新規作成して、EnemyDragon に適用。

まとめ

これで、プレイヤーキャラクターと敵キャラクターの基本設定が完了しました。

✅ プレイヤーキャラ

アセット: Knight Sprite Sheet Free
名前: KnightD
タグ: Player
物理設定: Rigidbody2D（Gravity Scale: 0）, BoxCollider2D（Is Trigger: ON）
アニメーション: 歩行・攻撃

✅ 敵キャラ

アセット: Dragon Warrior Free
名前: EnemyDragon
タグ: Enemy
物理設定: Rigidbody2D（Gravity Scale: 0）, BoxCollider2D（Is Trigger: ON）
アニメーション: 歩行・攻撃

次のステップでは、キャラクターを動かすスクリプトを作成していきます！

5. キャラクターを動かす

タワーディフェンスゲームでは、キャラクターが自動で進んでいく必要があります。今回は、敵と味方のキャラクターを自動で移動させるスクリプトを作成していきます。

5.1 移動スクリプト

キャラクターを動かすために、新しくC#スクリプトを作成しましょう。

Unityの使い方⑤C#スクリプトを作成してみよう

① スクリプトを作成

プロジェクトウィンドウ を右クリックし、
「Create」→「C# Script」を選びます。
名前を CharacterMove に変更します。

② スクリプトを編集

作成した CharacterMove.cs を開いて、以下のコードを入力してください。

using UnityEngine;

public class CharacterMove : MonoBehaviour
{
    // キャラクターの種類（プレイヤー or 敵）
    public enum TYPE { PLAYER, ENEMY }
    public TYPE type;

    // 移動方向
    float direction;
    Vector3 pos;

    // 移動フラグ（trueのとき移動する）
    bool isMove = true;

    void Start()
    {
        // キャラクターの種類によって移動方向を決める
        direction = (type == TYPE.PLAYER) ? -1 : 1;
        pos = new Vector3(direction, 0, 0);
    }

    void Update()
    {
        // isMove が true の場合のみ移動する
        if (isMove) 
        {
            transform.position += pos * Time.deltaTime;
        }
    }
}

5.2 スクリプトの解説

① enum TYPE で敵と味方を区別

public enum TYPE { PLAYER, ENEMY }
public TYPE type;

TYPE という 列挙型（enum） を作成し、

PLAYER（プレイヤーキャラ）
ENEMY（敵キャラ）
の2種類のキャラクターを区別します。

② キャラクターの移動方向を決める

direction = (type == TYPE.PLAYER) ? -1 : 1;
pos = new Vector3(direction, 0, 0);

プレイヤーキャラ（PLAYER）：左へ進む（-1）
敵キャラ（ENEMY）：右へ進む（1）

pos に移動量を設定しておき、Update() の処理で移動 させます。

③ isMove フラグで移動制御

if (isMove) 
{
    transform.position += pos * Time.deltaTime;
}

isMove フラグが true のときだけ移動するようにしました。
この isMove は後ほど戦闘の処理 で活用します。

5.3 スクリプトをキャラクターに適用

作成した CharacterMove.cs を プレイヤーと敵のキャラクター 両方にアタッチしましょう。

① キャラクターにスクリプトをドラッグ＆ドロップ

ヒエラルキーウィンドウ で KnightD を選択
Inspectorウィンドウ に CharacterMove をドラッグ＆ドロップ
type を PLAYER に設定

同じ手順で 敵キャラクター（Dragon） にも CharacterMove を追加し、
type を ENEMY に設定しましょう。

② キャラクターをプレハブ化

敵・味方のキャラクターを プレハブ化 しておくと、後で召喚システムを作る際に便利です。

ヒエラルキーウィンドウ で KnightD を プロジェクトウィンドウ にドラッグ
敵キャラも同様にプレハブ化

5.4 動作確認

ここまでの設定ができたら ゲームを再生 してみましょう！

プレイヤーキャラは左へ移動
敵キャラは右へ移動

これで キャラクターが自動で動く処理 が完成しました！
次は、キャラクターが戦う処理 を作っていきます。

6. キャラクターの戦闘

タワーディフェンスゲームでは、敵と味方のキャラクターがぶつかったときに戦闘を開始し、互いにダメージを与え合います。このセクションでは、キャラクターのHP管理と戦闘処理を実装していきます。

6.1 HP管理

まず、キャラクターのHP（ヒットポイント）を管理するためのスクリプト HitPoint.cs を作成します。これにより、キャラクターがダメージを受け、HPが0になると消滅する仕組みを作ることができます。

スクリプトの作成

プロジェクトウィンドウを右クリックし、「Create」→「C# Script」を選択して、新しいスクリプトを作成し、HitPoint と名前を付けます。

スクリプトの実装

HitPoint.cs を開いて、以下のコードを入力してください。

using UnityEngine;

public class HitPoint : MonoBehaviour
{
    public int hp;  // キャラクターのHP

    // ダメージを受ける処理
    public void Damage(int damage) 
    {
        hp -= damage; // ダメージを受ける
        if (hp <= 0)  // HPが0以下になったらオブジェクトを破壊
        {
            Destroy(gameObject);
        }
    }
}

スクリプトの適用

作成した HitPoint スクリプトを 敵キャラとプレイヤーキャラの両方にアタッチ してください。その後、Inspector から hp の値を設定しましょう。例えば、プレイヤーキャラは hp = 10、敵キャラは hp = 15 など、適当な値を設定してください。

6.2 衝突時の戦闘処理

次に、キャラクター同士がぶつかったときに戦闘を開始し、ダメージを与える仕組みを作ります。

スクリプトの修正

CharactorMove.cs に以下のコードを追加して、戦闘処理を実装します。

void OnTriggerEnter2D(Collider2D collision)
{
    // 敵と味方が衝突したら戦闘開始
    if ((collision.gameObject.tag == "Enemy" && type == TYPE.PLAYER) ||
        (collision.gameObject.tag == "Player" && type == TYPE.ENEMY))
    {
        isMove = false; // 移動を停止
        anim.SetBool("Attack", true); // 攻撃アニメーションに切り替え

        // 相手のHPスクリプトを取得
        HitPoint hitPoint = collision.GetComponent<HitPoint>();
        
        // ダメージ処理をコルーチンで開始
        StartCoroutine(AttackAction(hitPoint));
    }
}

ダメージ処理の実装

AttackAction というコルーチンを作成し、1秒ごとにダメージを与えるようにします。

IEnumerator AttackAction(HitPoint hitPoint)
{
    while (hitPoint.hp > 0) // HPが0になるまで攻撃し続ける
    {
        yield return new WaitForSeconds(1); // 1秒ごとに攻撃
        hitPoint.Damage(1); // 1ダメージを与える
    }
}

スクリプトの解説

OnTriggerEnter2D を使って敵との衝突を検知
- Enemy タグの敵に Player が衝突すると戦闘開始
- 逆に Player タグのキャラに Enemy が衝突しても戦闘開始
移動を停止して攻撃アニメーションを開始
- isMove = false; で移動を停止
- anim.SetBool("Attack", true); でアニメーションを攻撃モーションに変更
HitPoint コンポーネントを取得
- 衝突した相手の HitPoint スクリプトを取得し、ダメージ処理を適用
AttackAction コルーチンで定期的に攻撃
- while (hitPoint.hp > 0) の間、1秒ごとに Damage(1) を実行

6.3 攻撃モーションの設定

キャラクターが攻撃モーションに切り替わるように、Animator の Attack フラグを利用します。

Animator の設定

アニメーション遷移の設定
- 歩くモーション から 攻撃モーション への遷移を作成
- Attack フラグが true のときに 攻撃モーション に遷移
- Attack フラグが false のときに 歩くモーション に戻る
アニメーションの調整
- Has Exit Time のチェックを外す
- Transition Duration を 0 に変更（即時切り替え）

スクリプトへの反映

CharactorMove.cs に OnTriggerExit2D を追加して、戦闘が終了したときに再び移動を開始するようにします。

void OnTriggerExit2D(Collider2D collision)
{
    // 敵とぶつからなくなったら歩き出す
    isMove = true;
    anim.SetBool("Attack", false);
}

7. アニメーションの設定

キャラクターが攻撃モーションに切り替わるように Animator を設定します。これにより、敵と味方がぶつかったときに攻撃アニメーションが再生されるようになります。

7.1 Animatorの設定

Animatorウィンドウを開く
　まず、攻撃モーションを設定するために Animator ウィンドウを開きます。
　Window → Animation → Animator を選択すると Animator ウィンドウが表示されます。
アニメーションステートを確認
　すでに作成済みの Idle（待機）、Walk（歩行）、Attack（攻撃）のアニメーションがあることを確認してください。
アニメーションの遷移を作成
Idle または Walk から Attack への遷移（transition）を作成します。
- Walk アニメーションを 右クリック → Make Transition を選択
- Attack アニメーションへ矢印をつなげる
逆方向の遷移を作成
　攻撃が終わったら Walk に戻るように遷移を追加します。
- Attack アニメーションを 右クリック → Make Transition を選択
- Walk アニメーションへ矢印をつなげる

7.2 遷移条件の設定

攻撃モーションに切り替わる条件を設定 して、キャラクターが敵とぶつかったときに攻撃アニメーションが再生されるようにします。

Parameters タブを開く
　Animator ウィンドウの Parameters タブを開きます。
新しいフラグを作成
+ ボタンをクリックして 新しいパラメータ を追加します。
- 名前： Attack
- 種類： Bool（真偽値）
遷移の条件を設定
- Walk → Attack の矢印をクリック
- Conditions の + ボタンをクリック
- Attack が true のときに Attack アニメーションへ遷移するよう設定
- Attack → Walk の矢印をクリック
- Conditions の + ボタンをクリック
- Attack が false のときに Walk に戻るよう設定

7.3 遷移の最適化

アニメーションの切り替えをスムーズにするために、以下の設定を変更します。

Has Exit Time のチェックを外す
　攻撃モーションに即座に切り替わるように Has Exit Time のチェックを外します。
Transition Duration を 0 に設定
　遷移時間をゼロにして、攻撃モーションの切り替えを素早く行うようにします。

7.4 C#スクリプトでアニメーションを制御

アニメーションを実際に動作させるために、CharacterMove.cs に Animator の制御コードを追加します。

Animatorの追加

Animator anim;

void Start()
{
    anim = GetComponent<Animator>();
}

Start() 内で Animator を取得し、スクリプトからアニメーションを制御できるようにします。

敵と接触したときに攻撃モーションへ切り替える

private void OnTriggerEnter2D(Collider2D collision)
{
    if ((collision.gameObject.tag == "Enemy" && type == TYPE.PLAYER) ||
        (collision.gameObject.tag == "Player" && type == TYPE.ENEMY))
    {
        isMove = false;
        anim.SetBool("Attack", true);
        HitPoint hitPoint = collision.GetComponent<HitPoint>();
        StartCoroutine(AttackAction(hitPoint));
    }
}

OnTriggerEnter2D で敵とぶつかったことを検知
anim.SetBool("Attack", true); で攻撃アニメーションを開始
isMove = false; にして移動を止める
StartCoroutine(AttackAction(hitPoint)); で敵にダメージを与える

敵と離れたときに元のモーションに戻す

private void OnTriggerExit2D(Collider2D collision)
{
    isMove = true;
    anim.SetBool("Attack", false);
}

OnTriggerExit2D で敵との接触がなくなったとき
anim.SetBool("Attack", false); で攻撃モーションを解除
isMove = true; で再び歩行モーションへ

これで、キャラクターが敵とぶつかったときに 攻撃モーション に切り替わるようになりました！
設定を見直して、スムーズにアニメーションが動作するか確認してみてください。

8. まとめ

これで、にゃんこ大戦争風のタワーディフェンスゲームの基本的な部分が完成しました！🎉

今回の記事では、以下のステップを順番に解説しました。

✅ ステージの作成：背景や拠点を配置して、ゲームのフィールドを整えました。
✅ UIの作成：HPバーやゴールド表示、召喚ボタンを設定しました。
✅ キャラクターの作成：プレイヤーと敵のキャラクターを配置し、アニメーションを設定しました。
✅ キャラクターの移動：スクリプトを使って敵と味方のキャラクターが動くようにしました。
✅ キャラクターの戦闘：キャラクターが衝突すると攻撃するようにし、HPがゼロになると消える処理を追加しました。

これらの要素を組み合わせることで、基本的なタワーディフェンスゲームの仕組みができました。👾💥

もっと簡単にタワーディフェンスゲームを作りたいなら？
今回の記事では、にゃんこ大戦争風のタワーディフェンスをゼロから作成しましたが、「Warriors vs Orcs 2D Game Template」 を使えば、より完成度の高いゲームをすぐに作れます！