Language:
Page Info
Skill Level:
Engine Version:
The translation of this page is out of date. Please see the English version for the latest version of the page.

アニメーション ステート マシーンの設定

このページでは、定義された基準に合わせて異なるフリップブック アニメーション間でキャラクターを切り替えることができるように、2D キャラクターにアニメーション ステート マシンを設定する方法を学習します。

このチュートリアルでは、移動できる 2D キャラクター、およびそのキャラクターの切り替え先となる複数のフリップブック アニメーションが用意されていることが前提となります。キャラクターもしくはフリップブック アニメーションをお持ちでない場合は、トップダウン 2D ゲームの設定 を参照してください。2D キャラクターの設定および移動の適用方法に関する情報や、このチュートリアルで使用するサンプル アセットのリンクを確認できます。

プロジェクトを開いて、Paper 2D キャラクターを準備できたら、以下の手順に従います。

変数の設定

  1. プロジェクトで Paper 2D Character ブループリント (このサンプルでは TopDownCharacter) を開きます。

  2. [My Blueprint] ウィンドウで、[Add Variable (変数を追加)] ボタンをクリックし、新しい Bool 変数を作成し、「IsMoving?」という名前を付けます。

    Animation1.png

  3. フリップブック アニメーション (Idle など) に合わせてもう一つ変数を作成し、 Paper Flipbook タイプに設定します。

    Animation2.png

    作成するゲームの種類によって、アニメーションの種類も異なります。キャラクターがベースとなっているほとんどのゲームには、キャラクターがアイドルとなる (または動かずに休憩している) ステートがあります。

  4. [Compile] をクリックします。次に変数の デフォルト値 を対応する Flipbook アセットに設定します。

    Animation3.png

    上図では、Idle Flipbook アニメーションを IdleFlipbook 変数に割り当てています。

    (任意) 明確にするためには、変数を Animations という Category に入れると良いかもしれません。

    Animation4.png

    好きなカテゴリ名を入力することができ、整理整頓に役立ちます。

  5. キャラクターに再生したいアニメーションごとに手順 3 と 4 を繰り返します。

    Animation5.png

    上図では、 RunFlipbook と Paper Flipbook 変数をもう一つ作成し、[Compile] をクリックして、この変数の Default Value を対応する Run Flipbook アニメーションに設定しました。サンプルにはアニメーションが 2 つあります。 1 つをデス アニメーション、もう 1 つを銃のリロード (ある場合) にしたり、 1 つをメレー攻撃、もう 1 つをアイテムの選択や使用にすることもできます。

    フリップブック アニメーション ステートにそれぞれ変数を追加したら、次のセクションへ進んでください。

アニメーション設定の更新

次にアニメーション ステートの更新を処理するスクリプトを作成します。

  1. Event Graph 内を 右クリック して、 Custom Event ノードを追加します。

    Animation6.png

    Custom Event に UpdateAnimation のエフェクトのような名前を付けます。

  2. グラフ内をもう一度 右クリック して、Get Velocity ノードを追加し、Return Value を引き出して Vector Length ノードを追加します。

    Animation7.png

    Velocity の Vector Length でキャラクターが動いているかどうかを決めることができます。

  3. Vector Length の Return Value を引き出して、 > ノードを追加し、 IsMoving? 変数を Bool return にドラッグ&ドロップして設定します。

    Animation8.png

Animation State Machine 関数

現在のステートを確認し、それに対応して使用するフリップブック アニメーションを出力する関数を作成します。

  1. [My Blueprint] ウィンドウで、 Anim State Machine と呼ばれる新しい 関数 を追加します。

    Animation9.png

  2. 関数の [Details] パネルで IsMoving? という Input Boolean と Output Flipbook という Output Paper Flipbook を作成します。

    Animation10.png

    この関数は、動いているかどうかを確認するために IsMoving? という名前の変数を受け取り、それを現在のステートは何か (動いているかどうか) を決定するテストケースとして使用します。そして関数が Output Flipbook を出力するので、スプライトが使用するようにすぐに設定します。

  3. Branch ノードを引き出して、関数の入力実行ピンに接続します。

    Animation11.png

    関数が呼び出されるとまず最初に IsMoving? 変数に対して True/False チェックが実行されます。

  4. 再び コンテンツ ブラウザ 内を 右クリック し、 Blueprints の中に Enumeration を作成して Animation State という名前を付けます。

    Animation12.png

    Enumeration を使って、キャラクターが取り得るアニメーション ステートの一覧を作成し、そこから選択できるようにします。

  5. Enumeration を開き、キャラクターの各種アニメーションのステートを追加します。

    Animation13.png

    例えば、今ここには Idle と Run しかありませんが、使う予定のアニメーションに応じてさらに増やすことができます。

  6. Paper 2D Character ブループリントに戻り、 AnimationState という変数を新規作成し、Enum Animation State を設定します。

    Animation14.png

  7. Anim State Machine 関数内で Alt を押したまま AnimationState 変数を引き出して設定します。

  8. 別の AnimationState 変数を引き込み、それぞれを Branch ノードの TrueFalse ピンに接続します。

    Animation15.png

    True に接続された Enum のステートを Run に設定し、もう片方の Enum のステートは Idle に設定します。IsMoving? が true の場合、Enum ステートは Run で、移動していない場合は Idle に設定するということです。このサンプルでは、移動しているかどうかのみを確認していますが、ニーズに合わせて他の基準を確認するために別の Branch ノードを追加することができます。

    ひとつ注目すべきことは、確認を処理する順序が重要で、あるステートを他のステートに優先させるということです。例えば、キャラクターにデス フリップブック アニメーションを付ける場合、まず最初にキャラクターが死亡しているのかどうかを確認して、死亡していればデス アニメーションをプレイしてそのキャラクターをキルします。死亡していない場合、次のチェック項目へ進みまます (キャラクターは移動してるか、攻撃しているか、アイテムを使っているか、など)

    詳細は、2D 動画チュートリアル シリーズの アニメーション ステート マシーン ページを参照してください。|

  9. Ctrl を押したまま IdleFlipbookRunFlipbookAnimation State 変数をドラッグし 右クリックして Select ノードを追加します。

    Animation16.png

    このセクションでは、アニメーション変数をそれぞれグラフ内にドラッグする必要があります。

  10. ノードをそれぞれ接続して関数を完成させると以下のようになります。

    Animation17.png

    動いているかどうかを関数が確認し、動いていれば Enum state を Run (動いていない場合は Idle) に設定します。Select ノードを使って Enum から Animation State を取得し、そのステートに基づいて対応するフリップブックを使用する Output Flipbook として割り当てます。

Update Animation Event を完成させる

関数が出来上がりましたので、Update Animation Event の一部として呼び出し、残りのスクリプトを完成させます。

  1. [My Blueprint] ウィンドウの Event Graph で、 [Show Inherited Variables (継承した変数を表示)] を選択し Ctrl を押したまま Sprite へドラッグします。

    Animation18.png

  2. Anim State Machine 関数を引き出して Set Is Moving? ノードへ接続し、 Sprite を引き出して Set Flipbook ノードを追加します。

    Animation19.png

  3. UpdateAnimation カスタム イベントに対してすべてのノードを接続します。

    Animation20.png

  4. MoveForward Event から Add Movement Input ノードの次に、 Update Animation カスタム イベントを呼び出します。

    Animation21.png

  5. コンパイル保存 してから、エディタで再生します。

    これでキャラクターは、動いているかどうかに応じて 2 つのステートで切り替えられるようになりました。

上記で説明したように、この設定にアニメーション ステータスを追加する手順は以下の通りです。

  • キャラクターに適用したいアニメーション ステートごとに Flipbook Animation を追加します。

  • Flipbook として Paper 2D Character ブループリント内にそれらを追加設定します。

  • 作成した Animation State Enumeration にそれぞれのステートを追加します。

  • そのステートにキャラクターが変わる時を決定する条件を作成し、 Anim State Machine 関数に追加します。

  • Flipbook 関数をそれぞれ Anim State Machine 関数内の Select ノードに接続します。