学習記事一覧 · Unity基礎

【学習】Sprite とアニメーション（SpriteRenderer、Animator）

これまでの学習では、

GameObject を配置した
当たり判定を設定した

という形でゲームの骨組みを作ってきました。

しかし、白い四角のままではゲームらしくありません。キャラクターや背景に画像を表示し、アニメーションを付けたいです。

Sprite と Animator

という仕組みを使います。

今回は Sprite の表示と アニメーション の基本を学びます。

今日学ぶこと

Sprite … 2D 用の画像。インポート設定で Sprite にする
SpriteRenderer … 画像を表示するコンポーネント
Animator … アニメーションを再生する
Animation クリップ … コマ送りで動きを作る

画像を Sprite としてインポートする

画像ファイル（PNG、JPG など）を Project の Assets フォルダにドラッグ
画像を選択し、Inspector で Texture Type を Sprite (2D and UI) に変更
Apply をクリック

これで画像が Sprite として使えるようになります。

SpriteRenderer で表示する

SpriteRenderer は、Sprite を表示するコンポーネントです。

プロパティ	説明
Sprite	表示する Sprite を指定
Color	色の調整（白で通常表示）
Flip X / Flip Y	左右・上下反転
Sorting Layer	描画順のレイヤー
Order in Layer	同じレイヤー内の前後順

2D Object → Sprite で作成したオブジェクトには、最初から SpriteRenderer が付いています。

Sprite を差し替える

GameObject を選択
Inspector の SpriteRenderer の Sprite 欄に、Project から画像をドラッグ
または、Sprite 欄の○をクリックして一覧から選択

スクリプトから差し替える場合：

GetComponent<SpriteRenderer>().sprite = newSprite;

アニメーションを作成する

Window → Animation → Animation で Animation ウィンドウを開く
アニメーションさせたい GameObject を選択
Create をクリックし、Animation クリップを保存（例：PlayerWalk）
タイムラインにキーフレームを追加し、Sprite を変更してコマ送りにする

複数の Sprite を順番に表示することで、歩きや攻撃などのアニメーションを作れます。

Animator の設定

Animator は、Animation クリップを再生するコンポーネントです。

Window → Animation → Animator で Animator ウィンドウを開く
作成した Animation クリップが Animator に登録される
デフォルトの状態（Entry → クリップ）が設定される

スクリプトから再生を制御する場合：

GetComponent<Animator>().SetTrigger("Walk");

Sprite のスライス（スプライトシート）

1枚の画像に複数のコマが並んでいる場合（スプライトシート）は、スライスして分割できます。

画像を選択
Inspector で Sprite Mode を Multiple に変更
Sprite Editor をクリック
Slice で自動または手動で分割
Apply で確定

分割した Sprite を、Animation の各キーフレームに割り当てます。

完成コード例（アニメーションの切り替え）

using UnityEngine;
using UnityEngine.InputSystem;

public class PlayerController : MonoBehaviour
{
    private Animator animator;
    private Vector2 moveInput;

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

    void OnMove(InputValue value)
    {
        moveInput = value.Get<Vector2>();
    }

    void Update()
    {
        if (moveInput.x != 0)
        {
            animator.SetBool("IsWalking", true);
        }
        else
        {
            animator.SetBool("IsWalking", false);
        }
    }
}

※プレイヤーに PlayerInput をアタッチし、Actions に InputSystem_Actions、Default Map を Player に設定してください。

重要ポイント

Sprite で画像を表示し、Animator でアニメーションを再生します。

Texture Type を Sprite にすると 2D 用画像として使える
SpriteRenderer で Sprite を表示する
Animation で複数の Sprite を切り替えてアニメーションを作る
Animator でアニメーションを再生・切り替える
スプライトシートは Sprite Editor でスライスして分割する

発展アイデア

Sprite とアニメーションが分かったら、次のステップです。

プレイヤーを動かす … 移動に合わせてアニメーションを切り替える
プレハブと生成 … 敵キャラにアニメーションを付ける
落ち物キャッチゲーム … キャッチするオブジェクトに Sprite を設定する

Sprite とアニメーションは 見た目を整える 基本です。次はプレイヤーの動きを完成させましょう。