Unityで、スプライト画像をプレイヤーなどGameObjectの移動アニメーションなどに適用する手順を備忘録的に投稿します。
スプライト用画像の準備
プレイヤーの移動用アニメーションに使う画像を準備します。別々の画像にするのも可能ですが、スプライト機能で使える１枚の画像に並べた方が作業が効率的になります。
今回は、128×128の画像にしたので8方向と3状態（停止、歩く、走る）で２つの絵柄でアニメーションさせる設計なので、合計で48種類の画像を並べた１つの画像ファイルを作成しています。
こんな感じで方向を縦軸に、状態を横軸にして幅768（128×6）、高さ1024（128×8）の画像になりました。
画像は、Unityのプロジェクトにドラッグしてスプライトかしておきます。
［インスペクター］画面［Pixel Per Unit］を画像の横幅（今回は128）に変更して［Open Sprite Editor］でスプライト設定を、128×128で分割するように設定します。
スプライト画像のアニメーション設定
スプライトかした画像を方向と状態に分けてアニメーション化していきます。８方向で３状態で準備しているので合計で24回という骨の折れる作業ですが、説明では１方向に抜粋しています。
具体的には、次の方法でアニメーション用のファイルを作成します。
1. 追加したスプライト画像を展開して、並んで表示された画像の１番目と２番目を選択して［階層］画面にドラッグします。
2.［Create New Animation］画面で “Player_Idle_Down.anim” に名前を変更して保存します。
3.［プロジェクト］画面にアニメーション用のアセット［Player_Idle_Down］が追加されます。
4.［階層］に追加されたGameObjectは［Player］に変更します。
5. 同様の作業で３番目と４番目を選択して［Player_Walk_Down］、５番目と６番目を選択して［Player_Run_Down］としてアセットを追加します。
6.［階層］画面に追加した［Player］以外のGameObejctは不要なので削除します。
GameObjectにアニメーションの追加
階層に追加したPlayer（GameObject）にアニメーション用のアセットを追加します。
具体的には、次の手順でアセットの設定を行います。
1.［階層］画面で［Player］を選択して［インスペクター］画面の［Animetor］コンポーネントの［Controller］をダブルクリックします。
2.［Entry］や［Player_Idle_Down］などのノードが追加された［Animetor］が表示されます。（ノードの名前が “New Animation” などの場合は［インスペクター］画面で変更してください）
3.［Animetor］画面の左側の［Parameters］をクリックしてから［+］を選択してFloat型の変数［Speed］を追加します。
4.［プロジェクト］画面の［Player_Walk_Down］と［Player_Run_Down］をドラッグしてノードを追加します。
5.［Player_Idle_Down］ノードを右クリックして表示されたポップアップメニュー［Make Transition］を選択します。
6. マウスポインターに追加された線ををドラッグして［Player_Walk_Down］ノードに接続します。同様の操作で下の画像のように各ノードを接続します。
7. 追加した矢印線を選択して［インスペクター］画面で［Has Exit Time］を無効（チェックを外す）、［Conditions］に［Speed］変数を追加して［ >（Greater）0.1］を設定します。
8. 同様の操作で他の矢印線の設定を追加します。
・Idle => Walk （Has Exit Timeのチェックを外し、Conditionsに Speed > 0.1 を追加）
・Walk => Idle （Has Exit Timeを外し、Conditionsに Speed < 0.1 を追加）
・Walk => Run （Conditionsに Speed > 2.0）
・Run => Walk （Conditionsに Speed < 2.0）
・Run => Idle （Conditionsに Speed < 0.1）
9. C# スクリプト［PlayerController］を追加して、次のコードに変更します。
using UnityEngine;
using UnityEngine.InputSystem;
public class PlayerController : MonoBehaviour
{
public float walkSpeed = 3f;
public float runSpeed = 6f;
private Rigidbody2D rb;
private Animator animator;
private Vector2 moveInput;
private float currentSpeed;
void Start()
{
rb = GetComponent<Rigidbody2D>();
animator = GetComponent<Animator>();
rb.freezeRotation = true;
}
void Update()
{
Vector2 input = Vector2.zero;
if (Keyboard.current != null)
{
if (Keyboard.current.wKey.isPressed || Keyboard.current.upArrowKey.isPressed) input.y = 1;
if (Keyboard.current.sKey.isPressed || Keyboard.current.downArrowKey.isPressed) input.y = -1;
if (Keyboard.current.aKey.isPressed || Keyboard.current.leftArrowKey.isPressed) input.x = -1;
if (Keyboard.current.dKey.isPressed || Keyboard.current.rightArrowKey.isPressed) input.x = 1;
}
moveInput = input.normalized;
bool isRunning = false;
if (Keyboard.current != null)
{
isRunning = Keyboard.current.leftShiftKey.isPressed && moveInput.magnitude > 0;
}
currentSpeed = isRunning ? runSpeed : (moveInput.magnitude > 0 ? walkSpeed : 0f);
float animatorSpeedParam = isRunning ? 2.5f : (moveInput.magnitude > 0 ? 1f : 0f);
animator.SetFloat("Speed", animatorSpeedParam);
}
void FixedUpdate()
{
rb.linearVelocity = moveInput * currentSpeed;
}
}10.［Player］の［インスペクター］画面に、C#スクリプト［PlayerController］をドラッグして追加します。
11. 必要に応じて［Rigidbory 2D］［Box Collider 2D］などのコンポーネントも追加します。
実行すると、キー操作でアニメーションが再生されるようになります。（今回の手順では下方向のアニメーションのみ再生されます）
まとめ
今回はUnityで、スプライト画像をプレイヤーなどGameObjectの移動アニメーションなどに適用する手順を書きました。
スプライト画像にしても、方向や状態などでアニメーションさせるために、少し多くの手順が必要になりますが、［Animation］機能を利用して、スプライト画像から画像を切り出してプレイヤーの操作に応じて適切なアニメーションを再生することができます。
Unityでプレイヤーの移動などでアニメーション処理がしたい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。