【Unity】プレイヤーのアニメーションの作り方(ゲームの作り方チュートリアル「悪路王」その2)

悪路王 アニメーション ゲームの作り方

前回、ゲーム開発に必要な下準備を行ったのでここから本格的に作業を始めていきます。まずはプレイヤーキャラクターのアニメーションを作りましょう。

プレイヤーのアニメーションの作り方

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

  1. アニメーションさせるゲームオブジェクトを作る
  2. 手順1のゲームオブジェクトにアニメーターコンポーネントをアタッチする
  3. アニメーションクリップを編集する
  4. アニメーターコントローラーでアニメーションの遷移を作る

何やら専門用語が出てきて難しそうですがご安心ください。一つずつ説明していきますね。

手順1:アニメーションさせるゲームオブジェクトを作る

まずはアニメーションさせる対象のゲームオブジェクト、つまりここではプレイヤーキャラクターのゲームオブジェクトを作ります。

最初にインポートしてもらった画像素材の中に「player」という画像があると思うので、それの三角マークをクリックして画像を展開し、その中の1枚を適当に選んでシーンにドラッグ&ドロップします。

スプライトをシーンにドラッグ&ドロップする

するとスプライトレンダラーコンポーネントを持った新しいゲームオブジェクトができるので、それをインスペクターで表示して次のように設定を変更します。

プレイヤーのゲームオブジェクトの設定

  • タグ:Playerに変更
  • レイヤー:Playerに変更
  • ソートレイヤー:Playerに変更

ちなみにソートレイヤーをPlayerに変更した瞬間にプレイヤーの見た目が真っ黒になってしまうと思います(※白い輪郭線が黒くなってしまう)。これはURPの場合は2D用のライティング(=照明)が設定されているのですが、ソートレイヤーを変えるとライティングの対象から外れてしまうためです。そこでライティングの対象となるソートレイヤーを変更しましょう。

シーンに最初からある「Global Light 2D」というゲームオブジェクトをインスペクターで表示させて、「Light 2D」コンポーネントの「ターゲットソートレイヤー」を「すべて」に変更してください。そうするとプレイヤーの見た目が元通りになります。

2Dライティング設定の変更

手順2:アニメーターコンポーネントをアタッチする

次にプレイヤーのゲームオブジェクトにアニメーターコンポーネントをアタッチします。インスペクターの「コンポーネントを追加」ボタンをクリックし、検索欄に「animator」と入力するとAnimatorが出てくるのでそれを選んでください。するとゲームオブジェクトにアニメーターコンポーネントが追加されます。

アニメーターコンポーネント

設定はとりあえずこのままでOKです。

手順3:アニメーションクリップを編集する

では次はアニメーションクリップを編集します。アニメーションクリップの概要と編集方法については下記の記事で詳しく説明しているので、ここではやり方の手順に絞ってご説明します。

【Unity】アニメーションクリップの編集方法まとめ!2Dゲーム用のアニメーションを作ってみよう
この記事はUnityの基本的な使い方を解説するシリーズの一つで、今回はアニメーションクリップの編集方法について詳しくご説明します。 アニメーションクリップ(Animation Clip)とは? Unityのアニメーションクリップとはアニメー...

ここでは次の2つのアニメーションを作ります。

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

最初にアニメーションウィンドウが開いていない場合は、メニューバーの「ウィンドウ」→「アニメーション」→「アニメーション」からウィンドウを開いて適当な位置にドッキングします。

そしてプレイヤーのゲームオブジェクトを選択すると「Playerをアニメーションさせるには、アニメーションクリップを作成します」と出るので、作成ボタンを押して新しいアニメーションクリップを作りましょう(ファイル名は「Run」にしてください)。

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

するとアニメーションウィンドウにタイムラインが出現するので、このタイムラインにプレイヤーが走っているときのスプライトを1つずつドラッグ&ドロップします。まずはダッシュのアニメーションです。下の画像のようにスプライトをタイムラインにドラッグ&ドロップしてください。

ダッシュのアニメーションの作り方

アニメーションの最後を最初と同じスプライトにすると動きが滑らかにつながります。ちなみに1コマの間隔を3フレームにするとお手本通りになるので調整してみてください。

さて次はジャンプのアニメーションです。アニメーションウィンドウの左上の「Run」の部分をクリックすると「新しいクリップを作成」と出るので、そこを選択して「Jump」という名前のアニメーションクリップを作ります。

アニメーションクリップの新規作成2

あとは同様にしてジャンプ時のスプライトをタイムラインに登録しましょう。…といっても、ジャンプのスプライトは1枚しかないのでそれを登録するだけです。

ジャンプのアニメーションの作り方

これで必要なアニメーションができました。

手順4:アニメーターコントローラーでアニメーションの遷移を作る

最後にアニメーターコントローラーでアニメーションの遷移を作成していきます。アニメーターコントローラーの概要と編集方法についても他の記事で詳しく説明しているので、ここではやり方の手順に絞ってご説明します。

【Unity】アニメーターコントローラー(Animator Controller)の使い方まとめ
この記事はUnityの基本的な使い方を解説するシリーズの一つで、今回はアニメーターコントローラーについて詳しくご説明します。 アニメーターコントローラー(Animator Controller)とは? まずアニメーターコントローラーとは、ア...

さてアニメーターコントローラーはアニメーションの切り替えを担当する機能です。しかし今は何の設定もしていないので、このままではアニメーションが切り替わりません。そこでアニメーションを切り替えるために遷移を作りましょう。

最初にアニメーターウィンドウが開いていない場合は、メニューバーの「ウィンドウ」→「アニメーション」→「アニメーター」からウィンドウを開いて適当な位置にドッキングします。

すると最初から「Run」と「Jump」という2つのステートが用意されていると思うので、位置を調整しておきましょう。

プレイヤーのアニメーターのステート

パラメーターの作り方

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

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

新しいパラメーターの作り方

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

そうしたら

  • Run→Jump
  • Jump→Run

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

  1. 「Run」を右クリックして「遷移を作成」し、出てきた矢印を「Jump」につなげる
  2. 作った矢印をクリックして、インスペクターで「終了時間あり」のチェックを外す
  3. その下の「Setttings」を展開して「遷移間隔」を0に変更する
  4. さらにインスペクターの「Conditions」の「+」マークをクリックし、新しい条件を追加して「Grounded」・「false」と設定する

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

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

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

これでアニメーションの遷移を作ることができました。

次のページ

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

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

【Unity】プレイヤーのC#スクリプトの書き方(ゲームの作り方チュートリアル「悪路王」その3)
前回、プレイヤーキャラクターのアニメーションの設定を行いました。しかしまだプレイヤーを動かすためのC#スクリプトを書いていないので、このままではプレイヤーキャラは動きません。 そこでここではプレイヤーキャラクター用のC#スクリプトを書き、キ...