初心者が挑戦！ゲーム設定にアニメーションを入れてみた

スマホゲームプログラミング入門講座 Unityで放置インフレ系クリッカーゲームを作ろう Unity入門の森ゲームの作り方を参考に学習しながらゲームを作るブログです。

「歩行アニメを再生する部分を追加したいけど、パラパラ漫画のような形でスライスした画像が計8枚あるんだけど、どうしたらいい？」ってGPTに聞きました。

「にわとりが餌箱からダクトへ歩くときに、パラパラ漫画のように動かす」ってことですね。スライス済みの8枚画像を使うなら、Animatorを使わずにコードでアニメーション再生する方法が簡単でおすすめです。

🎞️ 目的

ChickenMove.cs にアニメーション部分を追加して、
にわとりが移動中は「歩行アニメ」にする。

using UnityEngine;

/// <summary>
/// にわとりが「餌箱」と「ダクト」を自動で往復移動するスクリプト。
/// スプライトをパラパラ漫画のように切り替えて歩行アニメーションを再生する。
/// </summary>
public class ChickenMove : MonoBehaviour
{
    [Header("移動設定")]
    [Tooltip("にわとりの移動速度（1〜5くらいが目安）")]
    public float speed = 2f;

    [Header("目的地の設定")]
    [Tooltip("餌箱の位置（Transform）")]
    public Transform feedBoxPoint;
    [Tooltip("ダクトの位置（Transform）")]
    public Transform ductPoint;

    [Header("アニメーション設定")]
    [Tooltip("歩行用スプライト（順番に8枚などを入れる）")]
    public Sprite[] walkSprites;
    [Tooltip("アニメの切り替え速度（0.1〜0.2が自然）")]
    public float frameRate = 0.15f;

    private SpriteRenderer spriteRenderer;
    private Transform targetPoint;
    private int currentFrame = 0;
    private float timer = 0f;

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

    private void Update()
    {
        if (targetPoint == null) return;

        // 目的地に向かって移動
        transform.position = Vector2.MoveTowards(
            transform.position,
            targetPoint.position,
            speed * Time.deltaTime
        );

        // 左右反転
        if (spriteRenderer != null)
        {
            if (targetPoint.position.x > transform.position.x)
                spriteRenderer.flipX = false; // 右向き
            else
                spriteRenderer.flipX = true;  // 左向き
        }

        // 歩行アニメーション更新
        UpdateWalkAnimation();

        // 到着判定（近づいたらターゲット切り替え）
        if (Vector2.Distance(transform.position, targetPoint.position) < 0.05f)
        {
            // 少し止まってから向きを変えたいときは、コルーチンで待機を追加可能
            if (targetPoint == feedBoxPoint)
                targetPoint = ductPoint;
            else
                targetPoint = feedBoxPoint;
        }
    }

    private void UpdateWalkAnimation()
    {
        if (walkSprites == null || walkSprites.Length == 0) return;

        timer += Time.deltaTime;
        if (timer >= frameRate)
        {
            timer = 0f;
            currentFrame++;

            if (currentFrame >= walkSprites.Length)
                currentFrame = 0;

            spriteRenderer.sprite = walkSprites[currentFrame];
        }
    }

    // 餌箱・ダクトの位置確認用
    private void OnDrawGizmos()
    {
        Gizmos.color = Color.yellow;
        if (feedBoxPoint != null)
            Gizmos.DrawSphere(feedBoxPoint.position, 0.1f);
        if (ductPoint != null)
            Gizmos.DrawSphere(ductPoint.position, 0.1f);

        Gizmos.color = Color.green;
        if (feedBoxPoint != null && ductPoint != null)
            Gizmos.DrawLine(feedBoxPoint.position, ductPoint.position);
    }
}

スプリクトをダブルクリックで開いて上のコードをコピペします。スプリクトを保存してUnityに戻ってくると
インスペクターに項目が増えてるのがわかると思います。

🧩 設定方法（Unityでの手順）

🐔 1. にわとりの設定

Chickenオブジェクトを選択
インスペクターでこのスクリプト（ChickenMove.cs）をアタッチ
「Walk Sprites」に8枚のスプライトを順番にドラッグ（1→8）
Frame Rate は 0.1〜0.2 あたりが自然（速さの調整）

「アニメーション設定」のWalk Spritesの横三角マークをクリックします。

🎨 2. スプライト（画像）の準備

1枚の画像をSprite Editorで「スライス（Grid Slicing）」してあるなら、
walkSprites の配列に 8枚全部を順番にドラッグすればOK。
- 例）ChickenWalk_0 → ChickenWalk_1 → … → ChickenWalk_5
並び順が動きに直結するので、左右反転や順番ミスに注意。

にわとりの歩く画像を作って順番にドラッグアンドドロップでセットします。

⚙️ 3. 餌箱・ダクトの設定

前と同じ：

FeedBoxPoint と DuctPoint という空のGameObjectを用意。
にわとりの移動先としてスクリプトの feedBoxPoint / ductPoint にドラッグ。

✅ これでできること

にわとりが餌箱↔ダクトを往復しながら歩行アニメを再生。
左右方向も自動で反転。
フレーム切り替え速度を変更すると歩くテンポが変わる。

にわとりが逆向きに移動してるように見えますねー

この部分を修正します。

   // 左右反転
        if (spriteRenderer != null)
        {
            if (targetPoint.position.x > transform.position.x)
                spriteRenderer.flipX = false; // 右向き
            else
                spriteRenderer.flipX = true;  // 左向き
        }

修正したのがこちら

// 左右反転
        if (spriteRenderer != null)
        {
            if (targetPoint.position.x > transform.position.x)
                spriteRenderer.flipX = true; // 右向き
            else
                spriteRenderer.flipX = false;  // 左向き
        }

保存してUnityに戻って再生してみましょう