このページでは、定義された基準に合わせて異なるフリップブック アニメーション間でキャラクターを切り替えることができるように、2D キャラクターにアニメーション ステート マシンを設定する方法を学習します。
このチュートリアルでは、移動できる 2D キャラクター、およびそのキャラクターの切り替え先となる複数のフリップブック アニメーションが用意されていることが前提となります。キャラクターもしくはフリップブック アニメーションをお持ちでない場合は、トップダウン 2D ゲームの設定 を参照してください。2D キャラクターの設定および移動の適用方法に関する情報や、このチュートリアルで使用するサンプル アセットのリンクを確認できます。
プロジェクトを開いて、Paper 2D キャラクターを準備できたら、以下の手順に従います。
変数の設定
-
プロジェクトで Paper 2D Character ブループリント (このサンプルでは TopDownCharacter) を開きます。
-
[My Blueprint] ウィンドウで、[Add Variable (変数を追加)] ボタンをクリックし、新しい Bool 変数を作成し、「IsMoving?」という名前を付けます。
-
フリップブック アニメーション (Idle など) に合わせてもう一つ変数を作成し、 Paper Flipbook タイプに設定します。
作成するゲームの種類によって、アニメーションの種類も異なります。キャラクターがベースとなっているほとんどのゲームには、キャラクターがアイドルとなる (または動かずに休憩している) ステートがあります。
-
[Compile] をクリックします。次に変数の デフォルト値 を対応する Flipbook アセットに設定します。
上図では、Idle Flipbook アニメーションを IdleFlipbook 変数に割り当てています。
(任意) 明確にするためには、変数を Animations という Category に入れると良いかもしれません。
好きなカテゴリ名を入力することができ、整理整頓に役立ちます。
-
キャラクターに再生したいアニメーションごとに手順 3 と 4 を繰り返します。
上図では、 RunFlipbook と Paper Flipbook 変数をもう 1 つ作成し、[Compile] をクリックして、この変数の Default Value を対応する Run Flipbook アニメーションに設定しました。サンプルにはアニメーションが 2 つあります。 1 つをデス アニメーション、もう 1 つを銃のリロード (ある場合) にしたり、 1 つをメレー攻撃、もう 1 つをアイテムの選択や使用にすることもできます。
フリップブック アニメーション ステートにそれぞれ変数を追加したら、次のセクションへ進んでください。
アニメーション設定の更新
次にアニメーション ステートの更新を処理するスクリプトを作成します。
-
Event Graph 内を 右クリック して、 Custom Event ノードを追加します。
Custom Event に UpdateAnimation のエフェクトのような名前を付けます。
-
グラフ内をもう一度 右クリック して、Get Velocity ノードを追加し、Return Value を引き出して Vector Length ノードを追加します。
Velocity の Vector Length でキャラクターが動いているかどうかを決めることができます。
-
Vector Length の Return Value を引き出して、 > ノードを追加し、 IsMoving? 変数を Bool return にドラッグ&ドロップして設定します。
Animation State Machine 関数
現在のステートを確認し、それに対応して使用するフリップブック アニメーションを出力する関数を作成します。
- [My Blueprint] ウィンドウで、 Anim State Machine と呼ばれる新しい 関数 を追加します。

-
関数の [Details] パネルで IsMoving? という Input Boolean と Output Flipbook という Output Paper Flipbook を作成します。
この関数は、動いているかどうかを確認するために IsMoving? という名前の変数を受け取り、それを現在のステートは何か (動いているかどうか) を決定するテストケースとして使用します。そして関数が Output Flipbook を出力するので、スプライトが使用するようにすぐに設定します。
-
Branch ノードを引き出して、関数の入力実行ピンに接続します。
関数が呼び出されるとまず最初に IsMoving? 変数に対して True/False チェックが実行されます。
-
再び コンテンツ ブラウザ 内を 右クリック し、 Blueprints の中に Enumeration を作成して Animation State という名前を付けます。
Enumeration を使って、キャラクターが取り得るアニメーション ステートの一覧を作成し、そこから選択できるようにします。
-
Enumeration を開き、キャラクターの各種アニメーションのステートを追加します。
例えば、今ここには Idle と Run しかありませんが、使う予定のアニメーションに応じてさらに増やすことができます。
-
Paper 2D Character ブループリントに戻り、 AnimationState という変数を新規作成し、Enum Animation State を設定します。
-
Anim State Machine 関数内で Alt を押したまま AnimationState 変数を引き出して設定します。
-
別の AnimationState 変数を引き込み、それぞれを Branch ノードの True と False ピンに接続します。
True に接続された Enum のステートを Run に設定し、もう片方の Enum のステートは Idle に設定します。IsMoving? が true の場合、Enum ステートは Run で、移動していない場合は Idle に設定するということです。このサンプルでは、移動しているかどうかのみを確認していますが、ニーズに合わせて他の基準を確認するために別の Branch ノードを追加することができます。
ひとつ注目すべきことは、確認を処理する順序が重要で、あるステートを他のステートに優先させるということです。例えば、キャラクターにデス フリップブック アニメーションを付ける場合、まず最初にキャラクターが死亡しているのかどうかを確認して、死亡していればデス アニメーションをプレイしてそのキャラクターをキルします。死亡していない場合、次のチェック項目へ進みまます (キャラクターは移動してるか、攻撃しているか、アイテムを使っているか、など)
-
Ctrl を押したまま IdleFlipbook 、 RunFlipbook 、 Animation State 変数をドラッグし 右クリックして Select ノードを追加します。
このセクションでは、アニメーション変数をそれぞれグラフ内にドラッグする必要があります。
-
ノードをそれぞれ接続して関数を完成させると以下のようになります。
動いているかどうかを関数が確認し、動いていれば Enum state を Run (動いていない場合は Idle) に設定します。Select ノードを使って Enum から Animation State を取得し、そのステートに基づいて対応するフリップブックを使用する Output Flipbook として割り当てます。
Update Animation Event を完成させる
関数が出来上がりましたので、Update Animation Event の一部として呼び出し、残りのスクリプトを完成させます。
-
[My Blueprint] ウィンドウの Event Graph で、 [Show Inherited Variables (継承した変数を表示)] を選択し Ctrl を押したまま Sprite へドラッグします。
-
Anim State Machine 関数を引き出して Set Is Moving? ノードへ接続し、 Sprite を引き出して Set Flipbook ノードを追加します。
-
UpdateAnimation カスタム イベントに対してすべてのノードを接続します。
-
MoveForward Event から Add Movement Input ノードの次に、 Update Animation カスタム イベントを呼び出します。
-
コンパイル し 保存 してから、エディタで再生します。
これでキャラクターは、動いているかどうかに応じて 2 つのステートで切り替えられるようになりました。
上記で説明したように、この設定にアニメーション ステータスを追加する手順は以下の通りです。
- キャラクターに適用したいアニメーション ステートごとに Flipbook Animation を追加します。
- Flipbook として Paper 2D Character ブループリント内にそれらを追加設定します。
- 作成した Animation State Enumeration にそれぞれのステートを追加します。
- そのステートにキャラクターが変わる時を決定する条件を作成し、 Anim State Machine 関数に追加します。
- Flipbook 関数をそれぞれ Anim State Machine 関数内の Select ノードに接続します。