剣の回転がおかしい

SwordHolder の Z 軸を確認し、回転アニメーションの値を見直してください。

プレイヤーが壁を通り抜ける

Tilemap Collider と Composite Collider の設定をチェックし、Rigidbody2D の Kinematic 設定を確認してください。

【Unity】2DアクションRPGの作り方②！フィールド・攻撃モーションの設定

1. はじめに

こんにちは！前回の**「Unityで2DアクションRPGを作る！」**では、プレイヤーキャラの作成やアニメーション、移動の実装を行いましたね。今回は、フィールドの作成・壁の当たり判定・武器の配置・攻撃アニメーションの設定を行い、よりゲームらしく仕上げていきます！

ゲームの世界を作るには、まずプレイヤーが歩き回るフィールドが必要です。Unityでは**「タイルマップ」**という便利な機能を使うと、簡単にフィールドを作成できます。また、フィールド上には壁や障害物を配置し、プレイヤーが通り抜けられないようにする処理も必要です。

そして、アクションRPGに欠かせない要素のひとつが「武器」。プレイヤーが剣を装備し、ボタンを押すと攻撃アクションを行うように設定していきます。そのために、攻撃モーションを作成し、プレイヤーの向きに応じたアニメーションを制御するスクリプトを実装していきましょう。

今回の記事を読みながら実装すれば、フィールドを自由に歩き回り、剣を振って攻撃できるプレイヤーキャラを作成できます！ぜひ、一緒に作っていきましょう！

2. フィールドの作成

まずは、プレイヤーが自由に移動できるフィールドを作成しましょう。Unityには**「タイルマップ」**という機能があり、ドット絵やピクセルアートのマップを簡単に作成できます。今回は、タイルマップを使って地面（床）を描いていきます。

2.1 タイルマップを作成する

ヒエラルキー（Hierarchy）ウィンドウを開く
- 2D Object → Tilemap → Rectangular を選択します。
- 作成された Grid の中に Tilemap オブジェクトが生成されます。
タイルマップの名前を変更
- Tilemap を選択し、Floor に名前を変更しましょう。
- これがプレイヤーが移動する地面になります。
タイルパレット（Tile Palette）の設定
- 上部メニューの Window → 2D → Tile Palette を開きます。
- タイルパレットが表示されたら、使用するタイルセットを登録 しましょう。
- ダウンロードしたアセットのタイル を選択し、パレットに追加します。
フィールドを塗る
- Tile Palette のブラシツールを使って、フィールドを塗りつぶします。
- 好きな地形を作成しましょう！（草原、石畳、砂地など）

フィールドを作成できたら、シーンビューで正しく表示されているか確認 しましょう。問題なく地面が表示されていれば、次は壁の作成 に進みます！

3. 壁の作成

フィールドの地面を作成できたので、次はプレイヤーが通れない壁を設置していきます。壁を作ることで、プレイヤーがマップの外にはみ出さないようにしたり、通路を作ったりできます。今回もタイルマップを活用して、壁を設置していきましょう。

3.1 タイルマップで壁を作る

新しいタイルマップを作成
- Grid を選択した状態で、ヒエラルキーで 右クリック → 2D Object → Tilemap → Rectangular を選択します。
- 新しく作成された Tilemap の名前を Wall に変更します。
壁のタイルを設定
- Window → 2D → Tile Palette を開きます。
- ダウンロードしたタイルセットから壁のタイルを選び、Wall タイルマップに描画していきます。
- 壁を好きな位置に配置して、プレイヤーが通れる道を作りましょう。
壁の描画順を調整
- Wall タイルマップが地面の下に表示されないように、Inspector の Tilemap Renderer の Order in Layer を 1 に設定します。
- Player の Sprite Renderer の Order in Layer も 2 に変更しておきます。
- これで、プレイヤーが壁の後ろに隠れず、しっかり前に表示されるようになります。

3.2 壁の当たり判定を追加

壁は見た目だけでなく、プレイヤーが通り抜けられないようにする当たり判定（コライダー） を追加する必要があります。以下の手順で設定しましょう。

Tilemap Collider 2D を追加
- Wall を選択し、Inspector の Add Component から Tilemap Collider 2D を追加します。
- これで、配置した壁のタイル1つ1つ にコライダーが付きます。
Composite Collider 2D を追加
- Tilemap Collider 2D の Used by Composite にチェックを入れます。
- Add Component から Composite Collider 2D を追加します。
- すると、バラバラのコライダーが1つに統合され、スムーズな当たり判定 になります。
Rigidbody 2D の設定
- Composite Collider 2D を追加すると、Rigidbody 2D も自動で追加されます。
- Rigidbody 2D の Body Type を Kinematic に変更して、壁が物理演算の影響を受けないようにします。

3.3 プレイヤーの当たり判定を追加

プレイヤーにも壁にぶつかるようにBoxCollider2D を設定します。

Player を選択し、Add Component から Box Collider 2D を追加。
Edit Collider をクリックし、プレイヤーのサイズに合わせて調整。
Rigidbody 2D の Freeze Rotation (Z) にチェックを入れ、プレイヤーが壁に当たって回転しないようにする。

3.4 壁の当たり判定を確認

すべての設定が終わったら、ゲームを再生してプレイヤーが壁を通り抜けないことを確認 しましょう。しっかり当たり判定が機能していれば、壁の作成は完了 です！

次は、プレイヤーが装備する武器（剣）の配置 に進みましょう！

4. 武器の配置

壁の当たり判定を設定できたので、次は**プレイヤーが装備する武器（剣）**を配置していきます。アクションRPGでは、プレイヤーが武器を振って敵を攻撃するのが重要な要素になります。今回は、剣をプレイヤーの手に持たせ、攻撃アニメーションを作る準備をしていきます。

4.1 使用するアセット

今回の剣の画像は、以下のアセットを使用しました。

🔗 2D Pixel Art Icons – Swords
（自分で作った剣の画像がある場合は、それを使ってもOKです！）

おすすめの剣アセット
Unity Asset Storeには高品質な剣のアセットが多数あります。以下のアセットを活用すると、より多彩な武器を導入できます。

Sword Set 20,000
→ 20,000種類以上の剣デザインが含まれたドット絵素材。RPGやアクションゲームに最適！
Pixel Blade Pack 1 – Swords and Daggers
→ 剣と短剣のセットで、ピクセルアートスタイルの武器を簡単に導入可能！
Pixel Art Swords 128×128
→ 128×128サイズの高解像度なドット絵剣アセット。シンプルながらもスタイリッシュなデザイン。

今回は「Pixel Blade Pack 1」を使用して剣を作成していきますが、お好みのアセットを導入してもOKです！

4.2 武器の親子関係を作る

武器をプレイヤーの手に持たせるために、「SwordHolder」オブジェクトを作成し、その子オブジェクトとして剣を配置します。

プレイヤーのヒエラルキー構造を作る
- Player を選択した状態で、Create Empty を作成。
- 名前を SwordHolder に変更。
- SwordHolder の Transform の位置を (0, 0, 0) に設定し、Player の中心に配置。
剣のオブジェクトを作成
- SwordHolder を選択した状態で、Create Empty を作成。
- 名前を Sword に変更。
- Add Component から Sprite Renderer を追加し、用意した剣の画像を Sprite に設定。
- Transform の Position を変更して、剣がプレイヤーの手の位置にくるように調整。

4.3 剣の表示順を設定

剣がプレイヤーの後ろに隠れてしまうことがないように、レイヤーの設定 を行います。

Player の Sorting Layer を新しく作成。
- Inspector の Sprite Renderer の Sorting Layer を開き、Add Sorting Layer をクリック。
- + ボタンを押して、新しいレイヤー Player を作成。
剣とプレイヤーに適切なレイヤーを設定
- Player の Sorting Layer を Player に設定。
- Sword も Player の Sorting Layer に設定。
剣の回転を調整
- SwordHolder の Z の値を変更すると、剣がプレイヤーの中心を軸に回転します。
- 後ほど攻撃アニメーションを作成すると、この回転を利用して剣を振ることができます。

すべての設定が終わったら、シーンビューを確認し、剣がプレイヤーの手の位置に正しく配置されているかチェックしましょう。これで、剣を持つ準備が整いました！次は、攻撃モーションの作成 に進みます！

5. 攻撃アニメーションの作成

プレイヤーが武器を振って攻撃できるように、剣のアニメーションを作成していきます。今回は 前後左右に攻撃するモーション を作成し、後でスクリプトで制御できるように設定します。

5.1 Animation の作成

まずは、剣の待機モーション（Idle） を作成します。

Animationウィンドウを開く
Window → Animation を選択して開きます。
SwordHolderを選択
ヒエラルキーから SwordHolder を選びます。
Animator コンポーネントの追加
Inspector の Add Component で Animator を追加します。
新しいアニメーションクリップを作成
Animation ウィンドウで Create ボタンを押し、新しいクリップを作成します。
- 名前は Idle（待機モーション）にします。
剣のアクティブ状態を設定
Add Property をクリックし、Sword の IsActive を追加。
- 開始フレームと終了フレームのチェックを外す（アニメーションがループしないようにする）。

5.2 攻撃モーションの作成

次に、前・後・左・右の攻撃アニメーション を作成します。

前方向攻撃（FrontAttack）

新しいアニメーションクリップを作成
- Create New Clip をクリックし、FrontAttack という名前で保存します。
プロパティの追加
- Add Property をクリックし、SwordHolder の Rotation を選択。
剣の回転を設定
- Z軸 の値を変更し、プレイヤーの前方向に剣が振れるように設定します。
赤い録画ボタンを押してアニメーションを記録
- 開始位置 では剣がプレイヤーの正面にある状態。
- 中間フレーム で剣を大きく振る。
- 終了位置 では元の位置に戻るようにする。

他の攻撃モーションの作成

BackAttack、LeftAttack、RightAttack も同様の手順で作成します。

BackAttack → 剣が背後に振れるように設定。
LeftAttack → 剣が 左方向 に振れるように設定。
RightAttack → 剣が 右方向 に振れるように設定。

これで、前後左右の攻撃モーションが完成しました！

5.3 攻撃アニメーションの整理

最後に、Animatorで攻撃モーションの整理 を行います。

Animatorウィンドウを開く
- Window → Animator を開き、SwordHolder を選択します。
不要なモーションを削除
- Idle 以外のモーションを一度削除して整理します。

この時点で、剣の攻撃モーションの作成が完了しました！次のステップでは、攻撃モーションをプレイヤーの攻撃アクションに連動させていきます。

6. 攻撃のBlendTree設定

攻撃アニメーションをスムーズに管理するために、BlendTree（ブレンドツリー） を設定します。これにより、プレイヤーの向きに応じた攻撃アニメーションを自動で切り替えられるようになります。

6.1 BlendTreeの作成

Animatorウィンドウを開く
- Window → Animation → Animator を選択し、SwordHolder の Animator を開きます。
新しいBlendTreeを作成
- Any State から直接攻撃アニメーションへ遷移できるようにします。
- Animator ウィンドウ内で右クリックし、Create State → From New BlendTree を選択。
- 作成した BlendTree の名前を AttackBlendTree に変更。

6.2 パラメータの追加

次に、攻撃アニメーションを制御するためのパラメータを設定します。

Parameters タブを開く。
+ ボタンを押し、以下のパラメータを追加。
- float X（X軸方向の移動値）
- float Y（Y軸方向の移動値）
- Trigger Attack（攻撃ボタンが押されたときのトリガー）

6.3 遷移（Transition）の設定

Any State から AttackBlendTree に矢印を追加
- Any State を右クリック → Make Transition を選択し、AttackBlendTree につなげる。
- 矢印（Transition）をクリックし、Conditions の + を押して Attack を選択。
AttackBlendTree から Idle に戻る遷移を追加
- AttackBlendTree を右クリック → Make Transition → Idle を選択し矢印を作成。

6.4 遷移の設定変更

デフォルトの設定では、攻撃アニメーションの切り替えに余計な遅延が発生するため、以下の調整を行います。

Any State → AttackBlendTree の矢印を選択
- Settings で Transition Duration を 0 に変更。
- Has Exit Time のチェックを外す。
AttackBlendTree → Idle の矢印を選択
- Transition Duration を 0 にする。
- Has Exit Time にチェックを入れ、Exit Time を 1 に設定。

6.5 BlendTree の設定

BlendTree をダブルクリックして編集モードに入る。
Blend Type を 2D Simple Directional に変更。
Parameters の X と Y を選択。
攻撃アニメーションを追加
- + ボタンを押し、以下のアニメーションを Motion に追加。
  - FrontAttack
  - BackAttack
  - LeftAttack
  - RightAttack
- それぞれのアニメーションの X, Y の値を以下のように設定。
  - FrontAttack → (0, -1)
  - BackAttack → (0, 1)
  - LeftAttack → (-1, 0)
  - RightAttack → (1, 0)

これで、プレイヤーが攻撃ボタンを押すと、向いている方向に合わせた攻撃アニメーションが自動で再生されるようになりました！

💡 もっと簡単に2DアクションRPGを作りたい？
プレイヤーの移動や攻撃の設定をスクリプトで実装しましたが、「TopDown Engine」 を使うと、これらの機能をすぐに利用できます！
【TopDown Engine】は、キャラクターの移動・攻撃・ダメージ処理・AIなど、アクションRPGに必要な機能が最初から揃っている強力なテンプレートです。
👉 今すぐチェック

7. スクリプトの変更

前回の記事で作成した PlayerController に、攻撃アニメーションを制御する機能を追加していきます。すでに Player にアタッチされているので、スクリプトを開いてコードを編集しましょう。

7.1 新しい変数の追加

まず、剣の攻撃アニメーションを制御するために、Animator を追加します。
PlayerController.cs を開いて、以下の変数を追加しましょう。

[SerializeField]
private Animator attackAnim;

この attackAnim は、SwordHolder の Animator に接続します。

7.2 移動方向に応じたアニメーション制御

次に、プレイヤーの移動方向に応じて、攻撃アニメーションも適切な方向へ設定されるようにします。
Update() メソッドを編集し、移動処理の中に attackAnim のパラメータを設定するコードを追加します。

void Update()
{
    rb.velocity = new Vector2(Input.GetAxisRaw("Horizontal"), Input.GetAxisRaw("Vertical")).normalized * moveSpeed;

    if (rb.velocity != Vector2.zero) 
    {
        float moveX = Input.GetAxisRaw("Horizontal");
        float moveY = Input.GetAxisRaw("Vertical");

        playerAnim.SetFloat("X", moveX);
        playerAnim.SetFloat("Y", moveY);
        
        // 攻撃アニメーションにも現在の移動方向を適用
        attackAnim.SetFloat("X", moveX);
        attackAnim.SetFloat("Y", moveY);
    }
}

7.3 攻撃アクションの実装

次に、左クリック（マウスボタン0）を押したときに攻撃モーションを再生 するようにします。

if (Input.GetMouseButtonDown(0)) 
{
    attackAnim.SetTrigger("Attack");
}

このコードを Update() メソッドの最後に追加しましょう。

7.4 スクリプト全体

追加する PlayerController.cs のコードは以下のようになります。

using UnityEngine;

public class PlayerController : MonoBehaviour
{
    [SerializeField, Tooltip("移動速度")]
    private int moveSpeed;
    [SerializeField]
    private Animator playerAnim;

    public Rigidbody2D rb;

    [SerializeField]
    private Animator attackAnim;



    void Update()
    {
        rb.velocity = new Vector2(Input.GetAxisRaw("Horizontal"), Input.GetAxisRaw("Vertical")).normalized * moveSpeed;

        if (rb.velocity != Vector2.zero) 
        {
            if (Input.GetAxisRaw("Horizontal") != 0)
            {
                if (Input.GetAxisRaw("Horizontal") > 0)
                {
                    playerAnim.SetFloat("X", 1f);
                    playerAnim.SetFloat("Y", 0);

                    attackAnim.SetFloat("X", 1f);
                    attackAnim.SetFloat("Y", 0);
                }
                else
                {
                    playerAnim.SetFloat("X", -1f);
                    playerAnim.SetFloat("Y", 0);

                    attackAnim.SetFloat("X", -1f);
                    attackAnim.SetFloat("Y", 0);
                }

            }
            else if (Input.GetAxisRaw("Vertical") > 0)
            {
                playerAnim.SetFloat("X", 0);
                playerAnim.SetFloat("Y", 1f);

                attackAnim.SetFloat("X", 0);
                attackAnim.SetFloat("Y", 1f);

            }
            else 
            {
                playerAnim.SetFloat("X", 0);
                playerAnim.SetFloat("Y", -1f);

                attackAnim.SetFloat("X", 0);
                attackAnim.SetFloat("Y", -1f);

            }
        
        }

        if (Input.GetMouseButtonDown(0)) 
        {
            attackAnim.SetTrigger("Attack");
        
        }
    }
}

7.5 Unityでの設定

スクリプトを保存したら、Unityで SwordHolder の Animator を設定 します。

Player を選択
Inspector ウィンドウで PlayerController を確認
Attack Anim の欄に SwordHolder の Animator をドラッグ＆ドロップ

この設定を行うことで、攻撃アニメーションが正しく動作するようになります。

7.6 動作確認

スクリプトを修正・設定が完了したら、ゲームを再生 して動作を確認しましょう。

✅ ASDWキーで移動できることを確認
✅ マウス左クリックで攻撃アニメーションが再生されることを確認
✅ 攻撃時に SwordHolder が正しく回転することを確認

これで 攻撃アクションの実装が完了 しました！
次のステップでは、敵キャラの配置やダメージ処理を追加して、戦闘システムを作成していきます。

8. まとめ

今回は、フィールドの作成・壁の当たり判定・武器の配置・攻撃アニメーションの実装 について解説しました。これで、プレイヤーが移動し、剣を装備して攻撃できる状態になりましたね！

具体的には、以下の内容を学びました： ✅ フィールドの作成：Tilemapを使ってマップを作成
✅ 壁の当たり判定：Tilemap Collider 2D & Composite Collider 2D を使って衝突処理を設定
✅ 武器の配置：SwordHolder を作成し、剣のスプライトを設定
✅ 攻撃アニメーションの作成：Animationウィンドウを使って攻撃モーションを作成
✅ 攻撃モーションのBlendTree設定：移動方向に応じた攻撃アニメーションを制御
✅ スクリプトの変更：プレイヤーの移動と攻撃をC#スクリプトで制御