How to PaperZD その3-StateMachineでアニメーション遷移-
こちらの記事の続きです。
キャラが動くようになりました。ですがこのままでは待機モーションのまま動いてるだけです。
なのでキャラクターの行動に応じたアニメーションの切り替えを組み込んでいきます。
StateMachineを使う
StateMachine?
まずStateMachineとは何か、3Dのキャラクターでゲームを作ったりしている方はもうわかっているでしょうか。
公式を確認してみましょう。
ステート マシン は、アニメーション ブループリント で作成できるモジュール型システムで、再生可能な特定のアニメーションとそのアニメーションを再生できるタイミングを定義することができます。主に、このタイプのシステムは、アイドル状態、歩く、走る、ジャンプといったキャラクターの動作の状態 (ステート) にアニメーションを関連付けるために使用されます。ステート マシンを使用すると、ステート を作成し、そのステートで再生するアニメーションを定義して、他のステートに切り替えるタイミングをコントロールするさまざまなタイプの 遷移 を作成することができます。これにより、過度に込み入ったアニメーション グラフを使用しなくても、複雑なアニメーション ブレンドを簡単に作成できます。
https://docs.unrealengine.com/5.2/ja/state-machines-in-unreal-engine/
なるほど、わからん。
と言いたいところですがわからないといけないのでなんとなくこうかな？と。
StateMachineは様々な状態の関係をデータで表せるようにしたもの。
3DモデルでのアニメーションはAnimationSequenceで管理できていたのでStateMachineで遷移ができた。
一方2Dスプライトでは遷移をBranchでいちいち条件を判定してTrueとFalseで分けていってFlipbookを切り替えて遷移させるのが主流？だった。
（おすすめしたチュートリアルでも基礎を学ぶためにこの作りだったのかと思います。）だが、PaperZDによってFlipbookもAnimationSequenceで各Flipbookごとに管理することができるようになったため、StateMachineでの遷移が可能に。（PaperZDの機能でUE自体に入ってるのが対応されるようになるわけではない？）
ちょっと自分でも曖昧な部分なので、もっと的確に表せる方いたら是非コメントください。
とにかく楽に、見た目もごちゃごちゃせず条件ごとにFlipbookを遷移できる用になる、って感じでしょうか？
なんだかよく分からなくても、なんとかなります。とりあえず作るだけ作ってみましょうか。
StateMachineの作成
その2で作ったAnimBPのAnimGraphは現在こんな感じのノードになっているかと思います。
左のPlay~を消します。
Resultから線を引っ張って離し、Stateと検索欄に打って、Add New State Machine…を選択し追加しましょう。
StateMachineができました。名前は任意で変えてもいいです。（自分は参考にしたものそのままでLocomotionにしました。移動……別のでも良いかも？）
出来たStateMachineをダブルクリックすると、この中に入ります。
中に入るとOutというノードがあるので右にワイヤーを伸ばします。
離してAnimationStateを選択。
Stateというノードが出来上がるので
Idleと名前を変更しましょう。
更にIdleの中に入りOutputAnimationのResultから引っ張って
待機のアニメーションが入ったノードを繋ぎます。
これで何も入力していない状態で待機モーションが設定されます。
上の左矢印（もしくはLocomotionと書いてある部分）からLocomotionの中まで戻ります。
待機⇔走りの遷移
次に走りを設定します。
Idleから右に矢印を伸ばし、AnimationStateを作成、Runに名前を変更します
Runの中に入り、走りのアニメーションを設定します。
これで走るアニメーションも遷移できるようになりましたが、どういう条件で遷移するのかがないと実際には遷移できません。
なので、もう一度Locomotionグラフに戻り、オレンジ色になっている部分、遷移ルールアイコンをダブルクリックして遷移ルールを定義するグラフを開きます。
開くとグラフの中にはResultノードが一つあります。このBoolean型の入力ピンがオンになると遷移可能となるので、ここにルールを繋ぎましょう。
その前に、プレイヤーBPから状態を引っ張れるように下準備しておきます。
ABPのEventGraphタブに移動。
EventOnInitの近くでGetOwningActorを追加、ReturnValueから引っ張ってCastTo~（プレイヤーのBP）に繋ぎます。でEventOnInitとCastToを繋ぎます。
AsBP~から引っぱり、Promote to variableを選択。
AsBP～の名前の変数が出来上がり、グラフではSetで繋がります。
変数名は各々任意で調整してください。
これで遷移ルールのグラフでプレイヤーBPの値を持ってこれるようになります。
待機から走りへの遷移ルールのグラフに戻ります。
戻ったら、作成した変数をCtrlを押しながらグラフ内にドラッグ＆ドロップ。
Ctrlを押しながらなのでGetで変数を持ってきます。
そこからGetVelocityノードを繋ぎます。ReturnValueピンを右クリックしSplitStructPinを選択。
X,Y,Zに分かれるのでReturnValueXからNotEqualノードにつなぎます。
そこからResultに繋いで完成。
これでXのVelocityが0ではない時に走りアニメーションに遷移するようになります。
ただこのままでは走るのをやめても走りアニメーションが止まらなくなるのでRunからIdleへ戻る矢印も伸ばし、同様に遷移ルールを作成します。
今度は走りに遷移するときとは逆に、Equalで繋いで、XのVelocityが0の時、待機に遷移するように繋ぎます。
待機と走りが遷移するようになりました。
ジャンプへの遷移
次にジャンプへ遷移します。
が、今回は待機からジャンプへ矢印を相互に繋いだり、ジャンプから走りへも相互に繋いだり、というやり方はしません。
まずはLocomotionグラフ内で右クリックし、Jumpを選択。
Jumpというノードが出来ました。下の方のOutと形が似ています。
任意で名前を変更してください。（Airborneと付けました。）
そこからAnimationStateを作成、Jumpという名前に変更。
中はジャンプのアニメーションを繋いでください。
Jumpから更にAnimationStateを作成、Fallという名前に変更。そこからRunへと繋いでください。
Fallでは落下中のアニメーションを繋ぎます。
落下中のアニメーションまで設定できたので、ジャンプから落下への遷移ルールを作っていきましょう。
プレイヤーのZのVelocityが0より小さい、つまりマイナス方向の時に遷移するように繋げます。
次に落下から地面に着地、ここでは走りに遷移するルール。
待機に繋ぐよりは個人的にわかりやすいかと思います。
単純にキャラが歩いているか。Playerの変数から引っ張ってIsWalkingと検索すればIsWalking(CharactorMovement)が出るのでそれを選択。
ここまでできれば遷移ルールまで設定できたはず。
では、肝心のAirborneにはどう遷移するのか？
プレイヤーのBPを開きます。FUNCTIONSの+ボタンの左あたりにマウスカーソルを持っていくとOverrideが出てくるのでクリック。
OnJumpedをクリックすると
Event On Jumpedノードが出来上がります。OnJumpedは多分ジャンプした～みたいな感じか。
もう一個、同様の手順でFUNCTION横のOverrideからOnWalkingOffLedgeも選択すると、Event On Walking Off Ledgeノードも出ます。
こっちは崖や出っ張りみたいな高いところから離れたら、いや、落ちたら～みたいな方がいい？とにかく走りながらそのまま崖から落ちたイメージ。
この2つを出したら、ComponentsのAnimation Componentからグラフにドラッグ＆ドロップ、そこからさらにGet Anim Instanceを検索して選択。
そこから更にJump to Nodeを検索して出し、Event On JumpedとEvent On Walking Off Ledgeを繋ぎます。
そしてJump to NodeのJump NameをNoneからAirborneに変更。
これでジャンプしたか、出っ張りから落ちたらAirborneノードに遷移するようになりました。
コンパイルして保存しプレイしてみましょう。
ジャンプから落下のアニメーションに遷移するようになりました。
ただ、ジャンプの頂点くらいから落下への移行のFlipbookも作ったはずなのに（人による？）、入っていないですよね。なのでこれも入れます。
StateMachineのグラフに戻って、JumpからFallの遷移ルールアイコンをクリック。するとDetailsタブにUseTransitionalAnimationがあるので右のチェックボックスをクリック。
するとアイコンの形が変わり、チェックボックス右のOpenAnimationGraphが押せるようになります。
すると見覚えのあるノードが見えると思うので、改めてジャンプの頂点くらいから落下への移行アニメーションを繋いでください。
移行アニメーションが入って遷移がなめらかになりました。
着地への遷移
最後に着地した時のアニメーションに遷移させます。
StateMachineのグラフに戻って右クリックからJumpを選択。
Jump_1というノードが出来ますが名前を変更します。（Landedにしました。）
そこからAnimationStateを作り、名前をLandに変更。更にRunに繋げておきます。
Landの中で着地アニメーションを繋ぐ。更にこのアニメーションはループさせたくないので、LoopAnimationのチェックを外します。
チェックを外すとループしなくなるので、例えば走りのアニメーションでチェックを外すと1回再生されたらいくら走ってもアニメーションは止まったままになります。
そしてLandからRunへの遷移ルールアイコンの中に入ります。
手順通りやっていれば、右クリックからの検索でTimeRemainingと入れると着地アニメーション名の付いたTimeRemainingがあるのでそれを選択。
<=（Less Equal）で繋ぎResultへ。
TimeRemainingは残り時間なので着地アニメーションの残り時間が0以下になったら（まあアニメーション終わったらぐらいのイメージ？）遷移、というルールになりました。
やっとこの記事で語りたいアニメーション遷移、遷移ルールが揃いました。
Landedノードに遷移できるようにAirborne同様キャラBPを開きます。
Event On Jumpedノードを出したときと同様のやり方で、Event On Landedノードを起き、ComponentsのAnimation Componentからグラフにドラッグ＆ドロップ、そこからさらにGet Anim Instanceを検索して選択。
そこから更にJump to Nodeを検索して出し、Event On Landedを繋ぐ、そしてJumpNameをLandedに書き換えます。
これで着地時にLandedに遷移するようになりました。一瞬しゃがんだ感じになってます。わかりにくいけど。
参考にしたものだと、着地した時に動きを一瞬止めたりもしていたんですが、自分が再現したい動きだと邪魔になるのでやめました。
あと、今のままだと左に動いてもキャラの向きが変わらないと思うんですが、やり方は書きません。
え～散々おすすめしたチュートリアルを見てくれた方は既にわかってると思うので……
ここまででもしわからないところ、変なところがあったらコメントで教えて下さい。
分かる範囲であれば修正、返します……分からなかったらごめんなさい。
最後に
これで当初書きたかったPaperZD導入から2D横スクアクションゲームのキャラで使いそうな待機～走り～ジャンプ～着地の遷移まで書き上げることが出来ました。想定より長くかかりましたが……
今まで自分でチュートリアルみたいなの書くことなかったんですが、何故今回書いたかと言うと、PaperZD、ホントに日本語の情報が少ない……というか皆無なんですよね。
まあまずUnrealEngineで2Dゲーム作って更にPaperZD使ってるって方が人口的に極めて稀？？？なのかな、きっと。
なので英語の情報しかないのがPaperZDを使う障壁のひとつなのかなと思い触りを書いてみた次第です。
つまり何が言いたいかって言うと、
自分もPaperZD触り始めたばっかだから、この記事見たみんなもUE5で2Dゲーム作るならPaperZD使って何か有益な情報アウトプットして！！！記事とか動画にして教えて！！！お願い！！！！
って気持ちです。昔からこういう記事とか出す人って何が目的なんだろうな～と思ってたけど、こういう情報共有で高めあっていこうや、的なのも理由のひとつなのかな、と最近ちょっと思いました。
まあ、収益とかそういうのもあるんだろうけど……
トップビューの2Dゲームでももちろん、その他でも使えるし、単純に3Dのアニメーション管理を2Dでもできるようにしたよ～ってだけだと思うんで（そんな単純ではないが）気軽に触ってください。楽しいよ。
記事書いてたら他のことが疎かになったので、また学習に戻ります。
何か学んだらまた書きます。攻撃とかもね。
ゲームもちょっとしたの作ってみたいし。
ではまた。
この記事が気に入ったらサポートをしてみませんか？