2Dキャラクターのアニメーションの作り方

前回スプライトの設定を行い、さらにプレイヤーのゲームオブジェクトを作りました。次はプレイヤーキャラクターのアニメーションを作ってみましょう。

Unityでのアニメーションの作成・設定手順は次のような感じになっています。

  1. アニメーターコントローラを作り、アニメーションさせたいゲームオブジェクトにそれを登録する
  2. 空のアニメーションクリップを作り、それをアニメーターコントローラーに登録する
  3. アニメーションクリップを編集する
  4. アニメーターコントローラーでアニメーションの遷移を作る

こう書くと何やら難しそうですがご安心ください。一つずつ説明していきますね。

スポンサーリンク

アニメーターコントローラー作成&コンポーネントのアタッチ

では、はじめにアニメーターコントローラーを新規作成し、それをプレイヤーオブジェクトのアニメーターコンポーネントに登録します。


※アニメーターコントローラーについては、姉妹サイトのページ「アニメーターコントローラー(Animator Controller)の使い方」で詳しく説明していますので併せてご覧いただければと思います。

アニメーターコントローラーの作成

まずはアニメーターコントローラーを作成します。「Assets」フォルダ直下に「Animations」というフォルダを作り、その中に「PlayerAnimController」という名前の新しいアニメーターコントローラーを作りましょう(右クリック→「作成」→「アニメーターコントローラー」)。

アニメーターの登録

次に、前回プレイヤーオブジェクトにアタッチしておいた「アニメーター」コンポーネントに、先ほど作ったアニメーターコントローラーを登録します。

下の図のように「Controller」に「PlayerAnimController」を登録しましょう。

アニメーターコンポーネントにコントローラーを登録した例

空のアニメーションクリップの作成&アニメーターに登録

次に、空のアニメーションクリップを作り、それをアニメーターコントローラーに登録しておきます。

空のアニメーションクリップの作成

まず、空のアニメーションクリップを「Animations」フォルダ内に作成します。

今回のゲームでは

  1. ダッシュ
  2. ジャンプ

という2種類のアニメーションを用意する必要があるので、それぞれ

  1. Player_Run
  2. Player_Jump

という名前でアニメーションクリップを作ってください(右クリック→「作成」→「アニメーション」)。

アニメーションクリップをアニメーターコントローラーに登録

次に、今作ったアニメーションクリップを先ほど作ったアニメーションコントローラーに登録します。

メニューバーの「ウィンドウ」→「アニメーション」→「アニメーター」からアニメーターウィンドウを開き、インスペクターで「PlayerAnimController」を選択してください。すると下のような画面になると思います。

初期状態のアニメーターコントローラー

そうしたら、右側の濃いグレーの領域に2つのアニメーションクリップをドラッグアンドドロップしてください。すると

  • Player_Run
  • Player_Jump

という2つの四角ができると思いますので、それぞれクリックしてインスペクターから

  • Run
  • Jump

という名前に変更しておいてください(※この名前は後でスクリプトから参照します。手間ですが変更しておきましょう)。

それから、アニメーションクリップをドラッグ&ドロップした順番次第ではJumpのほうがオレンジ色になっているかもしれません。もしそうなっている場合は、Runのほうを右クリックして「レイヤーデフォルトステートとして設定する」を選択してください(※Runのほうをデフォルトにしたいからです)。

アニメーションクリップの編集

そうしたら、次はアニメーションクリップを編集して中身を作っていきます。


※アニメーションクリップの編集方法についての詳細についても、姉妹サイトのページ「アニメーションクリップ(Animation Clip)の編集方法」をご覧いただければと思います。

ダッシュ、ジャンプのアニメーションクリップの作り方

まずはダッシュのアニメーションクリップから作ります。メニューバーのウィンドウ→「アニメーション」→「アニメーション」からアニメーションウィンドウを開いたら、ヒエラルキーでPlayerゲームオブジェクトを選択した状態にしてください。

そうしたら、アニメーションウィンドウの左上のところが「Player_Run」になっているのを確認してから、ダッシュしているスプライトを下の図のようにドラッグ&ドロップしてください。

ダッシュのアニメーション

キー(=1コマ)の間隔を3フレームにしておくとお手本通りになります。これでダッシュはOKです。

続いてジャンプのアニメーションですが、こちらは1コマしかないので下の図のようにジャンプしているスプライトを放り込めばOKです。

ジャンプのアニメーション

これでアニメーションクリップができました。

アニメーションのループの設定方法

アニメーションができたら、ダッシュのほうはアニメを繰り返し表示したいのでループの設定を行います。

インスペクターでアニメーションクリップ「Player_Run」を開き、「ループ時間」にチェックを入れてください(下図)。

ループ時間にチェックを入れる

これでアニメーションがループ再生されるようになります。

アニメーションの遷移作成

最後に、アニメーターコントローラーでアニメーションの遷移を作成していきます。

途中で紹介した姉妹サイトのページを見て頂ければわかりますが、アニメーターコントローラーはアニメーションの切り替えを担当する機能です。しかし、今は何の設定もしていないので、このままではアニメーションが切り替わりません。そこでアニメーションを切り替えるために「遷移」を作りましょう。

パラメーターの作り方

まず遷移を作る前に、必要なパラメーターを作っておきます。アニメーターコントローラーのパラメーターとは、簡単に言えば条件分岐のための値のようなものです。今回は「地面に接地しているかどうか」でダッシュとジャンプのアニメーションを切り替えたいので、Bool型のパラメーターを作ります。

下の図のように、アニメーションウィンドウの検索ボックスの右にある「+」マークをクリックして、「Bool」を選択して新しいBool型のパラメーターを作り、名前を「Grounded」にしましょう(名前は後でスクリプトから参照するので、忘れずに変更してください)。

新しいパラメーターの作成

アニメーションの遷移の作り方

そうしたら

  • Run→Jump
  • Jump→Run

という2通りの遷移を作成します。まず「Run→Jump」の遷移の作り方を説明すると、手順は次の通りです。

  1. 「Run」を右クリックして「遷移を作成」し、出てくる矢印を「Jump」につなげる
  2. 作った矢印をクリックして、「終了時間あり」のチェックを外す
  3. さらに「Conditions」の「+」マークをクリックし、「Grounded」・「false」と設定する

アニメーションの遷移の作成例

これで、「GroundedがfalseになったときにJumpに遷移する」という流れができました。

次は同様にして「Jump→Run」の遷移も作りましょう。ただしConditionsのところは「Grounded」・「false」にしておいてください。

ここまでの手順をちゃんと行っていれば、アニメーターの画面は下の図のようになっているはずです。

アニメーターコントローラーの見本


以上でプレイヤーをアニメーションさせるための設定が一通り完了しました。

しかし設定が終わったといっても、実はこのままでは正常にアニメーションしません。次のページでプレイヤーのC#スクリプトを書くと上手く動くようになります。


次のページ→プレイヤーキャラクターのC#スクリプトの書き方