こんにちは！夜の街2Dアクションゲームを制作中の怪獣です🦖
今回は Unityで、
「2Dキャラの「歩行」時のアニメーション」を作る方法を解説します！
具体的には、
歩いているとき⇒歩行アニメーション、
止まっているとき⇒歩行アニメーションを停止
というイメージでアニメーションを切り替えて作っていきます🦖
手順としては、
- 待機、歩行用の画像を用意する
- Animation Clip（歩くアニメ）を作成する
- Animator で 待機(Idle)⇔歩行(Walk) を条件で切り替える設定をする
- スクリプトにアニメーションを切り替える処理を作成する
という流れです。
↓画像を元に作ったGIFアニメーションです！2枚の画像だけでそれっぽく見せています
事前準備：歩行用の画像を用意する
「歩行」アニメーション画像を用意します。（最低でも2枚は用意）
ここでは、筆者が作成した画像を使用します。
（画像がない方は、以下のアセットを使用することもできます↓）
①歩行アニメーションを作る
まず初めにAnimation Clipを作成します。
Animation Clipとは、具体的な動きのデータを保存したアセットファイルのことです。
（拡張子.animが付きます。）
１．ProjectタブのAssertフォルダを選択し、「Animation」フォルダを作成する
２．「Animation」フォルダを選択し右クリックでCreate > Animation ボタンを押す
３．ファイル名を 「Walk」 にして保存する
- inspector
- Loop Time：✅をつける（アニメーションがループで再生されるようになります）
４．同様に、「Idle」アニメーションも作っておきます。
②AnimationControllerを作成する
次に、アニメーションの切り替えを管理する「AnimationController」を作成します！
AnimationControllerを作成したら、Playerオブジェクトと紐づけるようにします。
１．「Animation」フォルダを選択し右クリックでCreate > AnimationController ボタンを押す
２．ファイル名を 「Player」 にして保存します
３．Playerオブジェクトを選択し、AddComponentで以下を追加します
- Animator
４．2で作成したAnimationControllerをPlayer側のController設定にドラッグ＆ドロップします
③Animator に Idle / Walk を配置する
作成したAnimation Clip（歩行、待機アニメ）を、使用するためにAnimatorに配置していきます。
Animatorとは、オブジェクトを動かす実体（司令塔のようなもの）です。
②で作ったAnimator Controllerを読み込み、最終的にアニメーションを再生する役割をしています！
- AnimationControllerをダブルクリックし、
Animatorウィンドウを開く -
Animatorウィンドウに「Walk」、「Idel」をドラッグして配置する - Idle を右クリック → Set as Layer Default State（最初は待機にする）
- 「Entry」⇒「Idle」に紐づくようになります
- 「Entry」はゲーム起動時に再生されるアニメーションです
④アニメーションを作る
ここで実際に動くアニメーションを作成していきます！
歩行アニメーションを作る
Walk.animをダブルクリックする（Animationウィンドウが開きます）- プレイヤーオブジェクトを選択する（※プレイヤーを選択しないと３で上手くいかないので注意！）
- 歩行用の画像をを Animationウィンドウにドラッグ＆ドロップして配置します
これでタイムラインに画像が並び、歩行アニメが完成します！🚶
▶ボタンを押すと再生速度を確認できます。
（当記事では２コマで作成していますが、もっと画像を増やしても大丈夫です🙆）
今回は歩行アニメーションのみ作っていますが、
Idol.animにも同様にアニメーションを作ることでより本格的な仕上がりにできます
⑤アニメーション切り替え設定
次に、
「止まっている時はidol、動いたらWalk」
という切り替えを作ります！
パラメータを作成
アニメーションを切り替えるためのパラメータ（フラグ）を追加します。
AnimationControllerを再度開き、Animatorの＋ボタンで「Bool」を追加します。
名前は「Walk」にします。
遷移（Transition）を設定
Idle → Walkへの切り替え
Idle → Walkへアニメーションを紐づけるようにします！
以下を設定します。
- Idle を右クリック – Make Transitionを押下
- Idle⇒Walkに矢印を紐づける
- Idleをクリック
- Has Exit Time：OFF（今のアニメを最後まで再生するか設定するもの）
- Setting
- Transition Duratio：0（切り替え時のなめらかさ（重なり時間））
- Conditions
- Walk：trueを設定
Has Exit Time：OFFにすることで、アニメーションが瞬時に切り替わるようになります。
Walk：trueになることで、Walkアニメーションが発動するようにしています。
Walk → Idleへの切り替え
Walk → Idleも同様に設定をします。
- Walkを右クリック – Make Transitionを押下
- Walk⇒Idleに矢印を紐づける
- Walkをクリック
- Has Exit Time：OFF（今のアニメを最後まで再生するか設定するもの）
- Setting
- Transition Duratio：0（切り替え時のなめらかさ（重なり時間））
- Conditions
- Walk：falseを設定
Walk：falseになることで、Idle状態に切り替わり、Walkアニメーションを停止するようにしています。
⑥切り替える処理をつくる
最後に、スクリプトにアニメーションを切り替える処理を追加します！（コピペOK）
using UnityEngine;
public class Player: MonoBehaviour
{
private Animator _anim;
private void Start()
{
_anim = GetComponent<Animator>();
}
private void _Move()
{
_anim.SetBool("Walk", Mathf.Abs(_inputDirection.x) > 0.1f);
}
}
各処理の説明
private Animator _anim;
➡️「Animatorコンポーネントを入れておくための箱」を用意しています。
void Start()
{
_anim = GetComponent<Animator>();
}
- プレイヤー自身についている Animator を取得
_anim変数に保存する
このあと_anim.SetBool(…)
のように Animator を操作したいからです。
private void _Move()
{
_anim.SetBool("Walk", Mathf.Abs(_inputDirection.x) > 0.1f);
}
_anim.SetBool(“Walk”, true or false);
これは、
Animatorにある「Walk」というBoolパラメータの値を
true / false に変更する
ということをしています。
Animator側ではこうなっています
| Walkの値 | 再生されるアニメ |
|---|---|
| false | Idle |
| true | Walk |
つまりこの1行で、
- Walk = true → 歩行アニメ
- Walk = false → 待機アニメ
が切り替わるようになっています！
Mathf.Abs(_inputDirection.x) > 0.1f<br>Mathf.Abs()は、絶対値 を取る関数です。
ここではプレイヤーが移動しているか？を判定しています。
プレイヤーを動かしていないのに移動中と誤判定されることがあるので、> 0.1としています。
動作確認
歩いているとき⇒歩行アニメーション、
止まっているとき⇒歩行アニメーションを停止
という感じで切り替えるようになりました🚶
まとめ
最後まで読んでいただきありがとうございました！
今回の記事をまとめると、
- Animation Clip でアニメーション実体ファイルを用意
- Animator Controllerでアニメーションを切り替える
- 画像をドラッグしてアニメーションを作る
- 切り替え用のパラメータを用意
- スクリプト側で切り替え処理を実装
上記の手順で解説させていただきました。
今回のやり方を学べば他にも「ジャンプアニメーション」「パンチアニメーション」なども同じように実装することが出来ます！
この記事が少しでもゲーム制作のお役に立てたらうれしいです🦖
他にも、
プレイヤーをジャンプさせるようにする実装方法はこちら⬇️
プレイヤーの歩行に合わせてカメラを追従させるようにする実装方法はこちら⬇️
コメント