1枚のスプライトシートからアニメーションを作る手順

2026年10月30日

広告

本記事では Unity 6(6000系)を前提に、1枚のスプライトシート画像からスプライトを切り出し、アニメーションを作成して再生する方法を解説します。

この記事は、Unity Animator 学習シリーズのSTEP 2Aです。全体の流れはシリーズのページで確認できます。

Unity 6 では、Animation ウィンドウの Samples(1秒あたりのコマ数)は、初期状態では非表示になっています。「Show Sample Rate」をオンにすると表示できます。

スプライトアニメの再生速度は、Samples・Animator State の Speed・ドープシート上のキーフレーム間隔で調整できます。

この記事の進め方


1. スプライトシートをインポート

ここでは、「スプライトシート」で画像をググった場合等で入手した、一般的アニメーションの作り方手順について説明しています

本記事のスクリーンショットでは、Unity Asset Storeで無料配布されている「Free Platform Game Assets」(Bayat Games 制作)の素材を使用しています。同じ素材で練習したい方は、こちらのページからダウンロードできます。


Unity 2Dで「カメラを背景からはみ出させない」方法の情報から進められた方は
3. Animation Clip を作成から進めてください


  1. Assets/ に Sprites/ フォルダを作成
  2. PNG をドラッグ&ドロップ
  3. 画像を選択 → Inspector(重要設定)
  • Texture Type: Sprite (2D and UI)
  • Sprite Mode: Multiple

ドット絵の場合:

  • Filter Mode: Point (no filter)

→ Apply


2. Sprite Editor で分割

  1. 対象画像を選択
  2. Inspector → Sprite Editor
  3. Slice ボタン

切り出しの設定や確認の方法をさらに詳しく知りたい方は、Unity 6|1枚の画像から複数のスプライトを切り出す方法をご覧ください。
Slice のメニューに「Texture is in compressed format…」と表示されることがありますが、そのまま Automatic で切り出せます。

分割方法

Type用途
Automatic不均等配置
Grid by Cell Size均等サイズ
Grid by Cell Countコマ数が分かっている

Pivot は統一しておくと、足位置が安定します

→ Center / Bottom / Custom で調整

→ Apply


3. Animation Clip を作成

以下のキャプチャーは、Unity 2Dで「カメラを背景からはみ出させない」方法から進めた方向けのキャラクターになっています

最も簡単な作成方法:

  1. Project ビューで、切り出された複数スプライトを 順番に全て選択
    最初のスプライトをクリック後、Shiftを押下したまま最後のスプライトをクリックすると全てが選択できます
    これは、WindowsやMacでも使える機能なので覚えておくといいでしょう
  1. Hierarchy のオブジェクトに ドラッグ & ドロップ
    ドラッグする前に、Hierarchy のオブジェクトの名前を Player に変えておきましょう。自動で作られる Animator Controller は、オブジェクトと同じ名前(Player.controller)で保存されます。

Unity が自動で

  • Animation Clip(例:Idle.anim)
  • Animator Controller(例:Player.controller)
  • Animator コンポーネントを生成してくれます。

保存先を選ぶ画面が表示されたら、保存する場所を選びます。この記事の画像では、スプライトと同じ Idle フォルダーに保存しています。ファイルが増えて整理したいときは、Assets の下に Animations フォルダーを作り、そこに保存してもかまいません。


4. Animator Controller を確認

  1. Hierarchy で Player を選びます(Animator ウィンドウには、選んだオブジェクトの Controller が表示されます。Project ウィンドウの Player(Animator Controller)をダブルクリックしても開けます)
  2. Window > Animation > Animator
  3. Base Layer → Idle がある
  4. Entry → Idle に接続されている→ 起動時に Idle が再生される状態

5. 再生速度の調整

スプライトアニメの再生速度は、次の3つの方法で調整できます。

まず基本になるのは、1秒あたりのコマ数を決める Samples です。Samples は初期状態では非表示なので、表示のしかたから確認しましょう。


方法A)Samples(コマ数)を変更

  1. Window > Animation > Animation を開く
  2. Hierarchy で対象のオブジェクトを選択し、Animation ウィンドウに Animation Clip を表示する
  3. タイムラインの横にある「︙」メニューを開く(メニューが2つ並んでいる場合は下側)
  4. Show Sample Rate をオンにすると、Samples の欄が表示される
  5. Samples の値を変更する(例:12 → 8)

Samples は「1秒あたりのコマ数」です。値を小さくするとゆっくり、大きくすると速く再生されます。


方法B)Animator State の Speed を変更

  1. Window > Animation > Animator
  2. 対象ステート(例:Idle)を選択
  3. Inspector → Speed
値動作
1.0等倍
2.02倍
0.5半分

DopeSheet(ドープシート)とは、Unity の Animation ウィンドウにある “キーフレームを時間軸で並べて編集するビュー”のことです。

簡単に言えば

「アニメのコマ(キー)を並べ替えたり、タイミングを調整するためのシート」です。


DopeSheet の特徴

項目内容
目的キーフレーム(Sprite など)の配置タイミングを調整
表示横方向に時間、縦方向にプロパティ
主な操作キーフレームを移動 / 追加 / 削除
使う場面アニメーションを速く/遅くしたい・特定フレームを長く表示したい
表示方法Animation ウィンドウ下部のタブで切り替え

どんな時に使う?

  • スプライトアニメで → 1枚だけ長く見せたい
  • 1コマだけ一瞬止めたい
  • 全体の速度を細かく変えたい(※全体速度は Animator State の Speed で調整してもOK)
  • Animation Clip の “演出リズム” を調整したい

画面の見方

  • キー(■)を左右へ動かすと → 表示タイミングが変更される → = 速く/遅く できる

DopeSheetを開く方法

  1. Window > Animation > Animation を開く
  2. 対象オブジェクトを選択
  3. Animation ウィンドウ下部 → 「Dope Sheet」タブ をクリック

もう一つのタブ “Curves” ではプロパティをカーブで制御できる。Sprite アニメでは基本 DopeSheet を使う。


例:1枚だけ長く表示したい

  1. DopeSheetで対象フレームを選択
  2. 右へドラッグ→ 表示時間が長くなる(キー間が広がる)

DopeSheet vs Animator vs Clip

種類説明
DopeSheetキーフレームの配置・タイミング
Animator状態遷移(Idle → Walk など)制御
Animation Clip個々のアニメーションデータ

まとめ

  • DopeSheet = キーフレームの時間配置を編集するビュー
  • Spriteアニメの細かい調整に使う
  • 再生時間の調整=キーを左右に動かす
  • Samples(全体の速さ)とあわせて、キーの間隔でコマごとの長さを調整できる


方法C)スクリプトで変更(動的)

Animator animator;

void Start()
{
    animator = GetComponent<Animator>();
    animator.speed = 1.5f;
}

全ステートに適用されます。


6. アニメーション切り替え(Idle / Walk)

ここでは、Idle のほかに Walk のクリップを作り、isWalking の値で切り替えます。Idle は、手順3までに作ってある前提です。

Walk のクリップを作る

  1. Project ウィンドウで、Walk 用のスプライトをすべて選びます(最初のスプライトをクリックして、Shift キーを押しながら最後のスプライトをクリックします)。
  2. Hierarchy で Player を選び、Window > Animation > Animation で Animation ウィンドウを開きます。
  3. ウィンドウ左上のクリップ名(Idle)をクリックして、Create New Clip… を選びます。名前を Walk にして保存します。
  4. 1で選んだスプライトを、Animation ウィンドウの右側(タイムラインの部分)にドラッグ&ドロップします。
Animation ウィンドウでクリップ名の欄を開いた画面。Idle、Walk、Create New Clip... が並んでいる
クリップ名の欄から Create New Clip… を選びます

注意:Walk のスプライトを、Hierarchy の Player にドラッグしてはいけません。すでに Animator がある Player に落とすと、Walk のクリップはできず、Walk_0 という子オブジェクトができてしまいます。できてしまったときは、Ctrl+Z(Mac は Command+Z)で取り消してください。

Walk のクリップを作ると、Animator ウィンドウに Walk のステートが自動で追加されます。Idle のステートがオレンジ色(最初に再生されるステート)のままであることを確認しましょう。

パラメーター isWalking を作る

Animator ウィンドウで Parameters タブを開き、+ > Bool を選んで、名前を isWalking にします。スクリプトの SetBool("isWalking", …) と、大文字小文字も含めて同じ綴りにします。

遷移を作る

  1. Idle を右クリックして Make Transition を選び、Walk をクリックします。
  2. Walk を右クリックして Make Transition を選び、Idle をクリックします。
Animator ウィンドウ。左に isWalking のパラメーター、右に Any State、Entry、Idle、Walk のステートが並び、Idle と Walk の間に矢印が2本ある
Idle と Walk の間に矢印が2本(行きと帰り)、左に isWalking があります

遷移の条件を設定する

  1. Animator ウィンドウで Idle のステートを選びます。Inspector の Transitions に Idle -> Walk が出るので、クリックします。
  2. Conditions の + を押し、isWalking を true にします。
  3. Has Exit Time のチェックを外します。チェックが入っていると、今のアニメーションを再生し終わるまで切り替わりません。
  4. Settings を開き、Transition Duration を 0 にします。
  5. Walk のステートを選び、Walk -> Idle も同じように設定します。ただし、Conditions は isWalking を false にします。
遷移の設定。Has Exit Time のチェックが外れ、Transition Duration は 0、Conditions は isWalking が true になっている
Idle → Walk の設定(Walk → Idle は条件が false になります)

条件を入れる前に Has Exit Time を外すと、Console に「doesn’t have an Exit Time or any condition」という警告が出ます。Conditions に isWalking を入れれば出なくなります。

最後に、Player に Animator と、下の PlayerAnim スクリプトを付けて再生します。キーを押している間は Walk、離すと Idle に切り替われば完成です。


サンプルコード(参考)

アニメーションの登録のスキルがある方向けのサンプルになります
このまま、入力するだけで動作するわけではありません。
上下左右のどちらに動いても、歩くアニメーションになります。

using UnityEngine;
using UnityEngine.InputSystem; // ← 新Input System

[RequireComponent(typeof(Animator))]
public class PlayerAnim : MonoBehaviour
{
    Animator animator;

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

    void Update()
    {
        float h = 0f; // 左右
        float v = 0f; // 上下

        // キーボード(WASD・矢印キー)
        if (Keyboard.current != null)
        {
            if (Keyboard.current.aKey.isPressed || Keyboard.current.leftArrowKey.isPressed)  h -= 1f;
            if (Keyboard.current.dKey.isPressed || Keyboard.current.rightArrowKey.isPressed) h += 1f;
            if (Keyboard.current.sKey.isPressed || Keyboard.current.downArrowKey.isPressed)  v -= 1f;
            if (Keyboard.current.wKey.isPressed || Keyboard.current.upArrowKey.isPressed)    v += 1f;
        }

        // ゲームパッド(左スティック)
        if (Gamepad.current != null)
        {
            // アナログ入力を優先したい場合は上書き
            Vector2 stick = Gamepad.current.leftStick.ReadValue();
            if (Mathf.Abs(stick.x) > Mathf.Abs(h)) h = stick.x;
            if (Mathf.Abs(stick.y) > Mathf.Abs(v)) v = stick.y;
        }

        // 左右か上下のどちらかに動いていれば、歩いている
        bool isWalking = Mathf.Abs(h) > 0.01f || Mathf.Abs(v) > 0.01f;
        animator.SetBool("isWalking", isWalking);
    }
}

h = 1f でも動作しますが、h += 1f / h -= 1f を推奨する理由は 左右キー同時押し時の挙動が自然だから です。=を使うと、A と D を同時に押した場合に「最後に判定されたキー」が必ず勝ち、方向が不安定になります。一方 +=/-= なら -1 と +1 が相殺されて 0 になり、停止状態として扱えます。多くのゲームでは同時入力は「停止」が自然であり、入力デバイスが増える場合にも加算処理は拡張が容易です。そのため +=/-= の方が複数入力を安全・直感的に扱えるため推奨されます。

using UnityEngine;

[RequireComponent(typeof(Animator))]
public class PlayerAnim : MonoBehaviour
{
    Animator animator;

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

    void Update()
    {
        float h = Input.GetAxisRaw("Horizontal"); // 左右
        float v = Input.GetAxisRaw("Vertical");   // 上下

        bool isWalking = Mathf.Abs(h) > 0.01f || Mathf.Abs(v) > 0.01f;
        animator.SetBool("isWalking", isWalking);
    }
}

※ 新規作成した Unity 6 のプロジェクトは、入力が「Input System Package (New)」になっています。旧入力用のコード(Input.GetAxisRaw)を使う場合は、Edit > Project Settings > Player > Other Settings > Active Input Handling を「Input Manager (Old)」または「Both」に変更し、Unity を再起動してください。


7. よくあるトラブル

現象原因対策
再生速度が変わらないSamples が非表示のまま、または State の Speed を確認していないShow Sample Rate で Samples を表示して変更、または State Speed を変更
ガタつくPivot がずれているSprite Editor で揃える
順番がおかしい命名が不規則_00, _01…
アニメ切り替わらないParameter設定忘れParameters / Condition設定
ぼやけるFilter不適合Point 推奨(ドット絵)

8. チェックリスト

StepDone
Sprite Mode = Multiple○
Sprite Editor で Slice○
Pivot を統一○
スプライトをまとめてドラッグで Animation 作成○
Animator Controller を確認○
Samples(Show Sample Rate)でコマ数を設定○
State Speed を設定○
キー間隔で微調整○

まとめ

  • Unity 6 前提のワークフロー
  • Samples は初期状態では非表示(Show Sample Rate で表示)
  • 再生速度は → Samples → Animator State Speed → キーフレーム間隔で調整する
  • Idle / Walk などは Animator Parameters で切り替え
  • Pivot や命名を揃えると安定

訪問数 435 回, 今日の訪問数 1回

広告

Animation,Unity,講義

Posted by hidepon