【ゲーム開発】AI活用で進める独学個人ゲーム開発 #3_自機のアニメーション

🎯 目的：
自機が上下に移動する時、左右に傾くようなアニメーションを再生したい

✅ 前提：
・Unity 2D プロジェクト
・傾き用スプライト画像がある（例：Player_Normal.png, Player_Left.png, Player_Right.png）

🛠 手順：アニメーションで傾きを再現する

Step 1： アニメーション用フォルダの準備（おすすめ）
Assets フォルダ内に Animations フォルダを作成して整理

Step 2： 自機オブジェクトを選択し、Animationウィンドウでアニメーションクリップ作成
・Playerを選択 → Window > Animation > Animation
・「Create」クリック → PlayerTilt.anim を作成

Step 3： Spriteを時間軸に登録して傾きの変化を作る
例：
・0.0秒 → Player_Normal
・0.1秒 → Player_Left
・0.2秒 → Player_Right
・0.3秒 → Player_Normal

✅ ループしたくないときは「Loop Time」のチェックを外します。

Step 4： Animator の設定
・Idle, TiltLeft, TiltRight のステートを作成
・Float型のパラメータ「MoveDirection」を追加
・条件：MoveDirection < -0.1 → TiltLeft、MoveDirection > 0.1 → TiltRight、それ以外 → Idle

Step 5： スクリプトでアニメーションを制御

public class PlayerAnimator : MonoBehaviour
{
    private Animator animator;

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

    void Update()
    {
        float verticalInput = Input.GetAxis("Vertical");
        animator.SetFloat("MoveDirection", verticalInput);
    }
}

✅ 別の方法：Sprite差し替えのみで対応する場合

public Sprite straightSprite;
public Sprite tiltLeftSprite;
public Sprite tiltRightSprite;

private SpriteRenderer spriteRenderer;

void Start()
{
    spriteRenderer = GetComponent<SpriteRenderer>();
}

void Update()
{
    float inputY = Input.GetAxis("Vertical");

    if (inputY > 0.1f)
        spriteRenderer.sprite = tiltRightSprite;
    else if (inputY < -0.1f)
        spriteRenderer.sprite = tiltLeftSprite;
    else
        spriteRenderer.sprite = straightSprite;
}

✅ まとめ

どちらで進めたいですか？必要なら両方の実装もお手伝いできます！

🎯 ゴール
自機の上下入力に応じて以下のアニメーションを自動で再生：
・上に移動中 → TiltUp（右に傾く画像）
・下に移動中 → TiltDown（左に傾く画像）
・動いていない → Idle（まっすぐの画像）

🧱 スプライトが3種類ある前提

🛠 ステップ詳細

✅ Step 1：Animation Clip の作成
・Player を選択
・Window → Animation → Animation を開く
・Create を押して、以下の3つのアニメーションクリップを作成：

• Player_Idle.anim
• Player_TiltUp.anim
• Player_TiltDown.anim

各アニメの中身は以下の通りです：

• Idle：時間 = 0秒 → 通常画像
• TiltUp：時間 = 0秒 → 傾き右画像
• TiltDown：時間 = 0秒 → 傾き左画像

📌 Loop Time をONにしたい場合は、インスペクターでチェックを入れてください。

✅ Step 2：Animator Controller の設定
・Player に Player.controller がアタッチされていることを確認
・Window → Animator を開く
・以下のような状態遷移を構築します：

[Idle] ←→ [TiltUp]
   ↑         ↑
   └──→ [TiltDown]
      

✅ Step 3：パラメータを追加
・Float 型の MoveDirection を追加

✅ Step 4：遷移条件の設定

🛑 各遷移の Has Exit Time は必ずオフにしてください（すぐに切り替えるため）

✅ Step 5：スクリプトでパラメータを渡す

using UnityEngine;

public class PlayerAnimator : MonoBehaviour
{
    private Animator animator;

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

    void Update()
    {
        float vertical = Input.GetAxis("Vertical");
        animator.SetFloat("MoveDirection", vertical);
    }
}

このスクリプトを Player にアタッチしてください。

✅ 動作確認ポイント

✅ よくあるミス

• アニメが再生されない → Animator が Player にアタッチされているか確認
• 切り替わらない → Has Exit Time のチェックを外し忘れていないか確認
• 常に傾いたまま → MoveDirection の値が正しく変化しているか確認

🎯 目標：
Idle / TiltUp / TiltDown の各アニメーションクリップに
「1枚のスプライト」だけを設定し、必要に応じて Loop Time をON/OFFします。

✅ 操作手順（TiltUpの例）

1. Hierarchy で Player オブジェクトを選択
2. メニューから Window > Animation > Animation を開く
3. Animationウィンドウで「Create」をクリックし、ファイル名を Player_TiltUp.anim にする
4. 左下の「Add Property」→ Sprite Renderer > Sprite を選び、「＋」を押す
5. 0秒地点に、右傾き画像（例：Player_Right.png）を設定する

✅ Loop Time の設定

1. Projectウィンドウで Player_TiltUp.anim を選択
2. Inspector に「Loop Time」のチェックが表示される
3. チェックを外すと「1枚だけ表示して止まる」アニメになります
4. 逆に、複数スプライトを使う場合は Loop Time を ON にします

🟢 Idle / TiltDown も同様に、1枚だけのスプライトを設定すればOKです。

• Idle → 通常画像（例：Player_Normal.png）
• TiltDown → 左傾き画像（例：Player_Left.png）

[Idle] ←→ [TiltUp]
↑ ↑
└──→ [TiltDown]

✅ 回答：
Player.controller とは、Animator に設定されている Animator Controller アセット（.controller ファイル）のことです。

🎓 詳しく説明すると：

🔹 Animator（コンポーネント）とは？
Unity のオブジェクトにアタッチされるコンポーネントで、
「どのアニメーションをいつ再生するか」を制御する役割を担います。

🔹 Animator Controller（.controller ファイル）とは？
実際の アニメーションの状態遷移ルール を定義する外部アセットです。
Project ウィンドウに .controller 拡張子のファイルとして存在します。

Animator コンポーネントの Controller 欄にこのファイルが指定されていることで、
Unity はその中のステート（Idle / TiltUp / TiltDown など）と遷移ルールに従ってアニメーションを管理できます。

🎯 ゴール
自機の状態に応じて、Player_Idle → TiltUp / TiltDown に正しく遷移させる

🛠 準備ができていること（前提）

• 3つのアニメーションクリップ（Idle / TiltUp / TiltDown）がある
• Animator Controller（Player.controller）がある
• Player に Animator がアタッチ済み
• Animator の Controller に Player.controller が設定されている

✅ Step 1：Animatorウィンドウを開く
メニューから Window > Animation > Animator を開く
Player オブジェクトを選択しておくと、自動でAnimatorが表示されます

✅ Step 2：アニメーションステートを並べる
Projectウィンドウから Player_TiltUp.anim と Player_TiltDown.anim を
Animatorウィンドウへドラッグ＆ドロップ
→ 3つのノード（Idle / TiltUp / TiltDown）が出そろうように配置

✅ Step 3：パラメータの追加
Animatorウィンドウ左上の「Parameters」タブ →「＋」→ Float を選択
名前を MoveDirection に設定（※大文字小文字を区別）

✅ Step 4：遷移（Transition）の作成
ノード（例：Idle）を右クリック → Make Transition
→ TiltUp をクリック → 線がつながる

✅ Step 5：条件（Condition）の設定
線（遷移）をクリック → Inspectorで「Conditions」を編集

→ MoveDirection が 0.1 より大きいときに TiltUp へ遷移します

🔁 他の遷移も同様に作成

• Idle → TiltDown：MoveDirection < -0.1
• TiltUp → Idle：MoveDirection <= 0.1
• TiltDown → Idle：MoveDirection >= -0.1

✅ Step 6：Has Exit Time を OFFにする
各遷移（矢印）をクリック → Inspectorで Has Exit Time のチェックを外す

• ✔ Has Exit Time → OFF（即時遷移）
• ✔ Fixed Duration → ON のままでOK

※ Has Exit Time がONだと、アニメが1周終わるまで次へ遷移できず、動きが鈍くなります

✅ Step 7：スクリプトでパラメータを渡す

void Update()
{
    float vertical = Input.GetAxis("Vertical");
    animator.SetFloat("MoveDirection", vertical);
}

このようにスクリプトで MoveDirection に入力値を流すことで、
状態遷移がリアルタイムに切り替わります！

✅ 補足
Transition の矢印が複雑になっても、整理されていれば問題ありません。
Animation Clip の名前と条件が正しければ動作します。