Rigidbody2DのBodyTypeをKinematicにする理由は？

敵はプレイヤーの攻撃を受けても物理的な影響を受けず、スクリプトで制御するためKinematicを使用します。

HPバーが表示されない場合の対処法は？

CanvasのRender ModeがWorld Spaceになっているか、HPバーのサイズや位置が適切か確認してください。

ダメージを受けたときの色変更が反映されない

Animationウィンドウでキーを追加し、SpriteRendererのColorプロパティが変更されているか確認してください。

【Unity】2Dタワーディフェンスゲームの作り方①！敵の配置と基本アニメーション

1. はじめに
1. この記事で学べること
2. 敵キャラ（Enemy）の配置
3. 敵の歩行モーションの作成
1. Spriteのドラッグ＆ドロップによるアニメーション作成
2. アニメーションの保存と設定
4. 敵がダメージを受けたときのアニメーション
5. HPバーの実装
6. スクリプトの作成
7. まとめ
1. この記事で学んだことの振り返り
2. 次回の記事予告
よくある質問（FAQ）
1. 関連記事:

1. はじめに

Unityを使って2Dタワーディフェンスゲームを作ってみませんか？
この記事では、敵キャラの配置、歩行アニメーション、ダメージアニメーション、HPバーの実装 について解説します。Unity初心者の方でも理解しやすいように、ステップごとに丁寧に説明していくので安心してください。

「Unityでゲームを作ってみたいけど、何から手をつけたらいいのかわからない…」という方も、この記事を読めば 敵キャラの動きやHP管理の基本をしっかり学べます！
さあ、一緒にゲーム開発を始めましょう！

この記事で学べること

この記事では、以下の内容を学ぶことができます：

✅ 敵キャラの配置（SpriteRendererやColliderの設定）
✅ 敵キャラの歩行アニメーションの作成（Animatorの基本）
✅ ダメージを受けた時のアニメーション（色変化での視覚的演出）
✅ HPバーの実装（CanvasのWorld Space設定＆スクリプトでのHP制御）
✅ スクリプトによるHP管理と敵キャラの消滅処理

Unityの 基本操作を学びながら、実際に動くタワーディフェンスの敵キャラを作れる ようになります！

2. 敵キャラ（Enemy）の配置

このステップでは、敵キャラ（Enemy）の配置を行っていきます。
ゲームの中でプレイヤーが攻撃する相手となる重要なキャラクターですので、わかりやすく丁寧に作っていきましょう！

Emptyオブジェクトの作成

まずは敵キャラを配置するためのオブジェクトを作ります。

Unityの Hierarchyウィンドウ の中で、 右クリック します。
表示されたメニューから 「Create Empty」 を選んでクリックします。
新しく作られたオブジェクトが表示されるので、名前をわかりやすく 「Enemy」 に変更しましょう。

これで敵キャラの元となる空のオブジェクトが完成です。

必要なコンポーネントの追加（SpriteRenderer、BoxCollider2D、Rigidbody2D）

次に敵キャラに必要なコンポーネントを追加していきます。

Unityの使い方⑩ Colliderでオブジェクトを衝突させてみよう

Unityの使い方⑨ Rigidbodyでオブジェクトに物理を追加しよう

Hierarchyウィンドウで作成した Enemyオブジェクト をクリックして選択します。
Inspectorウィンドウ の下にある 「Add Component」 をクリックします。
検索欄に 「SpriteRenderer」 と入力して追加します。
同じ方法で次に 「BoxCollider2D」 を追加します。
最後に、もう一度 「Add Component」 から 「Rigidbody2D」 を追加します。

追加が完了したら、次にRigidbody2Dの設定を変更します。

Inspectorウィンドウで、追加した 「Rigidbody2D」 の中の Body Type をクリックします。
メニューが出てくるので 「Kinematic」 を選びます。

「Kinematic」 にすると、敵は重力などの影響を受けず、スクリプトで指定した通りに動くようになります。敵キャラとしては最適な設定です！

敵の画像設定とColliderの調整

いよいよ敵キャラに見た目を設定しましょう。

好きな敵キャラの画像（Sprite）を用意します。
- 無料で使えるおすすめ素材サイト：ぴぽや倉庫
- 私はこちらのサイトのキャラ画像を使っています。
ダウンロードした画像をUnityの Projectウィンドウ にドラッグ＆ドロップして取り込みます。
Enemyオブジェクト を選択し、Inspectorウィンドウ内の SpriteRenderer の Sprite の欄に、取り込んだ敵の画像を設定しましょう。

これで敵の画像が表示されるようになります。

次にColliderの調整をします。

Enemyオブジェクト の BoxCollider2D の Size を調整して、敵の画像にピッタリ合うようにします。
Colliderの緑色の枠が敵の画像の大きさと同じくらいになるように調整してください。

これで敵の配置が完了しました！
次のステップでは、この敵キャラが歩いているように見えるアニメーションを作っていきます。

3. 敵の歩行モーションの作成

敵キャラの配置が完了したら、次は 歩行モーションのアニメーションを作成 していきます。
これを設定することで、敵キャラが歩いているように見えるようになります！

Spriteのドラッグ＆ドロップによるアニメーション作成

まずは敵の歩行アニメーションを作るために、複数の歩行用スプライト（画像）を準備します。

敵キャラの歩行モーション用のスプライト を用意してください。
- 1枚の画像に複数のフレーム（歩くポーズの絵）が入っている場合は、スプライトを 「Multiple」 に設定し、「Sprite Editor」 で分割しておきましょう。
- 画像のインポート方法がわからない場合は、前のステップを確認してください。
Projectウィンドウ で歩行モーション用のスプライトを すべて選択 します。
- 例えば、敵キャラが右足を上げた絵・両足が地面についている絵・左足を上げた絵など、歩行の流れがわかるスプライトを3～4枚選びます。
選択したスプライトを、Hierarchyウィンドウの「Enemy」オブジェクトにドラッグ＆ドロップ します。

すると、Unityが自動的にアニメーションを作成し、保存画面が表示されます。

アニメーションの保存と設定

表示された保存画面で、アニメーションのファイル名を 「EnemyWalk」 に設定します。
「保存」ボタンをクリック して、アニメーションを保存しましょう。

これで 敵キャラの歩行モーションが作成され、Animator（アニメーションコントローラー）も自動的に設定 されました！

次に、アニメーションの設定を調整します。

Enemyオブジェクト を選択し、Inspectorウィンドウ の Animator コンポーネントを確認します。
Animator Controller に、先ほど作成された 「EnemyWalk」 が設定されていることを確認してください。
Windowメニューの「Animation」→「Animation」 を開き、作成したアニメーションを調整できます。

アニメーションの再生速度や繰り返し設定を調整して、違和感なく歩いているように見えるようにしましょう。

✅ ポイント！

「Loop Time」 のチェックをONにすると、敵キャラがずっと歩き続けるようになります。（デフォルトでON）
再生速度を調整したい場合は 「Samples」 の値を変更して、ちょうど良いスピードにしましょう。

これで 敵キャラの歩行アニメーション が完成しました！
次のステップでは、敵がダメージを受けたときのモーション を作成していきます。

4. 敵がダメージを受けたときのアニメーション

敵キャラが攻撃を受けたときに、「ヒットした」ことがわかるようにするアニメーション を作成します。
例えば、一瞬赤く光ることで「ダメージを受けた」ことをプレイヤーに伝える演出ができます。

このステップでは、既存の歩行モーションを元に「ダメージ時のアニメーション」を作成し、Animatorを設定 していきます。

1. ダメージアニメーションの作成

まずは敵が攻撃を受けたときのアニメーションを作成しましょう。

① 既存の歩行モーションをコピー

Projectウィンドウ で、前のステップで作成した「EnemyWalk」アニメーションを探します。
「EnemyWalk」アニメーションを 右クリック → 「Duplicate」 を選択して複製します。
複製したファイルの名前を 「EnemyHit」 に変更します。

これで「EnemyHit」という新しいアニメーションが作成されました。

② アニメーションを設定

Hierarchyウィンドウ で「Enemy」オブジェクトを選択します。
Animatorウィンドウ を開きます。
- 「Window」メニュー → 「Animation」 → 「Animator」 を選択。
Animatorウィンドウで「Enemy」の Animator Controller を ダブルクリック して開きます。
右クリック → 「Create State」→「Empty」 を選択し、新しいステートを作成します。
新しくできたステートの名前を 「EnemyHit」 に変更します。
Inspectorウィンドウ で「EnemyHit」の Motion の欄に、先ほど作成した「EnemyHit」アニメーションを設定します。

これで 敵がダメージを受けたときのアニメーションステート が追加されました！

2. ダメージアニメーションの編集

次に、敵キャラがダメージを受けたときに 一瞬赤く光る演出 を追加します。

「Window」メニュー → 「Animation」 → 「Animation」 を開きます。
Hierarchyウィンドウ で「Enemy」オブジェクトを選択します。
Animationウィンドウのタブから、先ほど作成した 「EnemyHit」 を選択します。
「赤い録画ボタン（●）」をクリック して編集モードに入ります。
「SpriteRenderer」の「Color」プロパティにキーを追加 します。
- 初めのフレームの色は赤。
- 次のフレームで半透明に設定。
- 最後のフレームで赤に戻す。
再生ボタン（▶）を押して確認し、敵が一瞬赤く光る ことを確認してください。

この設定により、敵が攻撃を受けたときに赤く点滅するような演出 になります！

3. アニメーターの設定

ダメージアニメーションを作成したので、敵が攻撃を受けたときに自動的に「EnemyHit」に切り替わるように」 設定します。

① アニメーションの遷移を設定

Animatorウィンドウ で「Any State」を右クリック → 「Make Transition」 を選択。
矢印を「EnemyHit」ステートへ接続 します。（Any State → EnemyHit）
- Any State からつなぐことで、「どんな状態からでもダメージアニメーションに切り替わる」ようになります。
「EnemyHit」から「EnemyWalk」にもMake Transition で矢印をつなぎます。

② 条件（パラメータ）の設定

Animatorウィンドウの左側 にある「Parameters」タブを開きます。
「+」ボタンを押して、「Trigger」 を作成。
名前を 「Hit」 に設定します。

③ 遷移の条件を設定

Any State → EnemyHit の矢印をクリック して選択。
Inspectorウィンドウ で「Conditions」の項目を確認。
「+」をクリックし、「Hit」 を選択。

この設定により、「Hit」パラメータがトリガーされたときに「EnemyHit」アニメーションに切り替わる」 ようになります。

4. ダメージアニメーションの終了後に歩行アニメーションに戻る設定

敵がダメージを受けた後、すぐに歩行モーション（EnemyWalk）に戻るようにします。

EnemyHit → EnemyWalk の矢印をクリック して選択。
Inspectorウィンドウ で、以下の設定を変更します：
- Exit Time → 1 に変更（ダメージアニメーションが最後まで再生されるように）
- Transition Duration → 0 に変更（アニメーションの切り替えを瞬時に行う）

これで、敵が攻撃を受けたときにダメージアニメーションが再生され、その後すぐに歩行アニメーションに戻る ようになります。

5. 動作確認

最後に、設定したダメージアニメーションが正しく動作するか確認しましょう！

Animatorウィンドウ で「Hit」パラメータのチェックボックスをONにする。
すると、EnemyHitアニメーションが再生され、一瞬赤く光った後に歩行アニメーション（EnemyWalk）に戻る はずです。
正常に動作していればOK！

まとめ

✅ 「EnemyHit」アニメーションを作成し、赤く光るように設定した！
✅ Animatorで「Any State → EnemyHit」の遷移を作成し、「Hit」トリガーを設定した！
✅ 「EnemyHit → EnemyWalk」へ戻るように設定し、スムーズな動作を実現した！

これで 敵が攻撃を受けたときにダメージモーションを再生する処理 が完成しました！
次のステップでは、敵のHPを管理するためのHPバーを実装 していきます！🎮✨

5. HPバーの実装

敵キャラがダメージを受けたとき、どれくらいHPが残っているのか視覚的にわかるようにするため に、HPバーを実装 します。
このHPバーは、敵の頭上に表示され、攻撃を受けるごとにゲージが減少する仕組みになっています。

1. HPバー用の空オブジェクトを作成

まず、HPバーを表示する位置を決めるための 空のオブジェクト を作成します。

Hierarchyウィンドウ で「Enemy」オブジェクトを選択します。
右クリック →「Create Empty」 を選択して、新しい空のオブジェクトを作成します。
名前を 「HPBarPos」 に変更します。
Inspectorウィンドウ で「HPBarPos」の TransformのPosition を調整し、敵の頭上あたりに配置します。
- 位置がわかりにくい場合は、Inspectorの「左上のアイコン（ギズモ）」をクリックし、色を変更すると見やすくなります。

2. Canvasの作成と設定（World Space）

次に、HPバーを表示するためのCanvas を作成します。
通常、UIは画面に表示されますが、敵キャラの上に表示するため、World Spaceモード に変更します。

Hierarchyウィンドウ で 「UI」→「Canvas」 を作成します。
名前を 「HPCanvas」 に変更します。
Inspectorウィンドウ で以下の設定を変更します：
- Render Mode → 「World Space」 に変更（ゲーム内のオブジェクトとして表示）
- Rect Transformの「Width」 → 0.8
- Rect Transformの「Height」 → 0.2
- Position → HPBarPosの位置に合わせる
HPCanvasの「RectTransform」 を右クリックし、「Reset」を選択すると、デフォルトの位置になります。

3. HPバーの赤・緑ゲージの作成

HPバーは、赤いゲージ（背景）と緑のゲージ（現在のHP） の2つのImageで作成します。

① HPの背景（赤いバー）を作成

HPCanvasの子オブジェクト として、「UI」→「Image」 を作成。
名前を 「RedBar」 に変更。
Inspectorウィンドウ で以下の設定を行う：
- Source Image → 任意のHPバー用の画像（ない場合は空白のままでOK）
- Color → 赤
- Rect Transformを調整 して、ちょうどいいサイズにする。
- 「Anchor（アンカー）」 を 「Stretch（Alt + 右下クリック）」 に設定し、バーがHPCanvasいっぱいに広がるようにする。

② HPのゲージ（緑のバー）を作成

RedBarの子オブジェクト として、もう一つ「UI」→「Image」を作成。
名前を 「GreenBar」 に変更。
Inspectorウィンドウ で以下の設定を行う：
- Source Image → 任意のHPバー用の画像
- Color → 緑
- 「Anchor」 を RedBarと同じにする（Alt + 右下クリック）
- Rect Transformを調整 して、RedBarと同じサイズにする。

4. Imageコンポーネントの調整とFillAmountによるHP減少処理

HPの減少を表現するために、FillAmountプロパティ を使います。
FillAmountを変更することで、HPが減ると緑のバーが短くなる ようになります。

GreenBarを選択 します。
Inspectorウィンドウ の「Image」コンポーネントで以下の設定を行う：
- Image Type → Filled に変更
- Fill Method → Horizontal に変更
- Fill Origin → Left に設定（左から減るようにする）

この設定により、FillAmountの値（0.0〜1.0）をスクリプトで変更することで、HPの増減を視覚的に表現 できます。

5. HPバーをPrefab化

最後に、作成したHPバーを Prefabにして再利用可能に しておきます。

Unityの使い方⑬ プレハブ（Prefab）で効率よくオブジェクトを管理しよう

「Projectウィンドウ」 で 「Prefabs」フォルダ を作成（まだない場合）。
Hierarchyウィンドウで「HPCanvas」を「Prefabs」フォルダにドラッグ＆ドロップ します。
HPCanvasが青いPrefabに変わる ので、今後の敵キャラにも使えるようになります。

まとめ

✅ HPバー用の空オブジェクト「HPBarPos」を作成し、敵の頭上に配置！
✅ Canvas（World Space）を作成し、UIとしてHPバーを表示！
✅ 赤いHPの背景（RedBar）と、緑の現在HP（GreenBar）を作成！
✅ ImageコンポーネントのFillAmountを使い、HPが減るとゲージが減少する仕組みを実装！
✅ HPバーをPrefab化し、スクリプトで操作できるように準備！

6. スクリプトの作成

ここまでの手順で、敵キャラの配置やアニメーション、HPバーの作成が完了しました。
次に、スクリプトを使ってHPの管理を行い、ダメージを受けるとHPバーが減るように設定 していきます。

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

このステップでは、以下の処理を実装します：

✅ 敵のHPを設定し、HPバーを生成する
✅ ダメージを受けたときにHPを減少させる
✅ HPが0になったら敵を消滅させる

1. スクリプトの準備

まず、スクリプトを管理しやすいように 「Scripts」フォルダ の中に「Enemy」フォルダを作成し、以下の3つのC#スクリプトを作成 します。

「EnemyHPBar.cs」（HPバーの操作）
「EnemyHP.cs」（HPの管理）
「Enemy.cs」（※後のステップで使用）

2. HPバーを制御するスクリプト（EnemyHPBar.cs）

まず、HPバーの減少を制御するスクリプトを作成します。

① 「EnemyHPBar.cs」を記述

Projectウィンドウ で「Scripts」フォルダの中に「Enemy」フォルダを作成。
「EnemyHPBar.cs」 を作成し、以下のコードを記述します。

using UnityEngine;
using UnityEngine.UI;

public class EnemyHPBar : MonoBehaviour
{
    public Image hpBarImage; // HPゲージのImage
}

このスクリプトは、HPバーのイメージ（緑のゲージ）を操作できるようにする ためのものです。
GreenBarのImageコンポーネントを設定できるように しておきます。

② 「EnemyHPBar.cs」をHPバーのPrefabにアタッチ

Projectウィンドウ で「Prefabs」フォルダ内の 「HPCanvas」Prefab を開きます。
「EnemyHPBar.cs」 をHPCanvasにアタッチします。
「hpBarImage」フィールドに、GreenBarのImageコンポーネントをドラッグ＆ドロップして設定 します。

これで スクリプトからHPバーのFillAmountを変更できるようになりました！

3. HPを管理するスクリプト（EnemyHP.cs）

次に、敵のHPを管理し、ダメージを受けたときにHPバーを減らす処理 を作成します。

① 「EnemyHP.cs」を記述

「Scripts/Enemy」フォルダ に 「EnemyHP.cs」 を作成。
以下のコードを記述します。

using System;
using UnityEngine;
using UnityEngine.UI;

public class EnemyHP : MonoBehaviour
{
    // 設定用の最大HP
    [SerializeField] private float hp = 10;
    
    // 現在のHP
    [NonSerialized] public float currentHp;
    
    // HPバーのPrefab
    [SerializeField] private GameObject hpBarPrefab;
    
    // HPバーの表示位置
    [SerializeField] private Transform barPos;
    
    // HPバーのImageコンポーネント
    private Image hpBarImage;

    void Start()
    {
        CreateHealthBar();
    }

    private void CreateHealthBar()
    {
        // HPバーを生成し、敵の頭上に表示
        GameObject newBar = Instantiate(hpBarPrefab, barPos.position, Quaternion.identity);
        newBar.transform.SetParent(transform);

        // HPバーのImageコンポーネントを取得
        EnemyHPBar healthBar = newBar.GetComponent<EnemyHPBar>();
        hpBarImage = healthBar.hpBarImage;

        // HPを設定
        currentHp = hp;
    }

    void Update()
    {
        // 左クリックでダメージを受ける（デバッグ用）
        if (Input.GetMouseButtonDown(0))
        {
            ReduceHP(5);
        }

        // HPバーの表示を更新
        hpBarImage.fillAmount = Mathf.Lerp(hpBarImage.fillAmount, currentHp / hp, Time.deltaTime * 10f);
    }

    /// <summary>
    /// HPを減らす処理
    /// </summary>
    /// <param name="damage">受けるダメージ量</param>
    public void ReduceHP(float damage)
    {
        currentHp -= damage;

        // HPが0以下になったら死亡処理を実行
        DeathCheck();
    }

    /// <summary>
    /// HPが0になったら消滅
    /// </summary>
    private void DeathCheck()
    {
        if (currentHp <= 0)
        {
            currentHp = 0;
            gameObject.SetActive(false); // 敵を非表示にする
        }
    }
}

4. スクリプトのアタッチと設定

① 「EnemyHP.cs」をEnemyオブジェクトにアタッチ

Hierarchyウィンドウ で「Enemy」オブジェクトを選択。
Inspectorウィンドウ で「Add Component」→「EnemyHP」を追加。

② 変数を設定

「EnemyHP」スクリプトの「HP Bar Prefab」に、「HPCanvas」Prefabをドラッグ＆ドロップ して設定。
「Bar Pos」には、「HPBarPos」オブジェクトをドラッグ＆ドロップ して設定。

まとめ

✅ HPバーをPrefab化し、スクリプトで制御できるようにした！
✅ EnemyHP.csでHPの管理とダメージ処理を実装！
✅ クリックでダメージを受けるデバッグ機能を追加し、HPの減少を確認！
✅ HPが0になったら敵が消えるようにした！

これで 敵キャラにHPを設定し、攻撃を受けるとHPが減るシステムが完成 しました！🎮✨
次のステップでは、敵の移動や攻撃処理を追加 して、さらにゲームらしくしていきます！

7. まとめ

お疲れさまでした！🎉
この記事では、2Dタワーディフェンスゲームの敵キャラを配置し、アニメーションとHPバーを実装する方法 を学びました。

タワーディフェンスゲームをゼロから作るのはやりがいがありますが、結構時間がかかります。 もし、「もう少し簡単に作りたい！」と思ったら、
「Tower Defense Toolkit 4 (TDTK-4)」 を使えば、
ウェーブ管理・敵の進行ルート・タワー攻撃システムなど の基本機能がすでに揃っています！
自作のスクリプトと組み合わせて、よりスムーズにゲーム開発できますよ！
→ TDTK-4の詳細はこちら