Unityで2DRPGを開発するブログ

Unityで2DRPGを開発する様を綴りたいブログです。

Unity2D 見下ろし型画面で4方向に歩かせる

サイドビューの横スクロールなら情報がたくさんあると思いますが、見下ろし型=トップダウンのゲームの情報って全然ないんですね。みんなUnityでドラクエ作りたくないのか!?

今からでもRPGツクールに移行した方が賢明だなと本気で思いましたが、なんとか実装できたのでやり方を書いていきます。

この記事では上下左右の4方向のアニメーションをするように設定しますが、8方向でも大丈夫です。

 スプライトを用意

f:id:teliotrewohs:20180728213535p:plain

ポケモンのような4方向のアニメーションをさせるには、これだけのコマがあればいい。俺は詳しいんだ」

はい。ハマるポイントです。

まず、これだけのコマでやろうとすると概ね3つの問題に直面します。

 

・Unityのスプライトアニメーションは、スプライトをグループ選択してHierarchyにD&Dして作成するが、その結果変な歩き方になる

・停止(Idle)アニメーションが1コマしかないのでD&Dでアニメーションが作れない

・歩行アニメーションが左向きのものしかないので、アニメーションだけで処理が完了しない

 

1番目について補足すると、「停止→右足→停止→左足」という動きになるべきなのに、「停止→右足→左足」になり、脚を引きずっているようなモーションになるということです。

多分ツクール製のスプライトをインポートしても同じことになると思うんですが、なぜかこれを問題視した記事が見つからなかった……

2番目ともども解決策は、Animation Clipをいちいち編集するしかないんじゃないかと。

そして3番目は、AnimatorにMirrorという項目があるので任意に左右反転させられるものだと思っていたら……2Dには利かない(Unity2018現在)ので、

ユーザーの入力によってSprite RendererのFlip Xをオンオフするというやり方があるようですが、NPCの場合にはそうはいかなかったり、利き手が反転してしまったり、面倒とバグの臭いがプンプンしたりするのでやめておきます。

 

 というわけで、ソリューションはこうなる。

f:id:teliotrewohs:20180728212832j:plain

 全部のアニメーションフレームを入れたスプライトをインポートしましょう。以上。

些細な容量節約のために手間を増やすとエタるだけ。俺は詳しいんだ

そして本題のアニメーションですが、

 

Simple Animationを使わない

AnimatorのUI、Machanimってクッソ使いにくいんですよね。

いや全然使ったことないんですけど、ちょっと簡単な設定するだけで面倒なので絶対使いたくない、Animation Clipをスクリプトで再生した方が絶対楽だろ……なんでその方法がないんだよ、と初心者にトラウマを植え付ける存在だと思います。

 

Animation Controllerに直接スクリプトの変数を設定させてくれ! 

てかAnimatorとAnimationとAnimation ClipとAnimation Controllerの区別がつかねーよ!

→もうアニメーションさせたくないわ……Unityやめよ。

 

なので筆者もまずMechanimを使わないところから考えました。

そこで出てくるのがSimple Animation

tsubakit1.hateblo.jp

 もしくはMechanim Controlというアセットがあって、こちらはMechanimと同様Mirrorが使えたりして便利そうだなー(2Dじゃ使えません

 

……はい。今度こそハマりました。

まず勘違いしていたのは、2D見下ろし型画面のキャラクターのアニメーションって全然Simpleじゃないということ。

これが3Dなら、IdleとWalkで歩かせられるんです。アニメは2種類です。

しかし2D見下ろし型となると、IdleとWalkのそれぞれに上下左右(8方向ならさらに+4種)のアニメーションがあります。

これを初心者が数式で書くのはキツかった。

歩行はともかく、ボタンを離した際に、うまくさっきまで歩いていた方向のIdleにできなくて無事ハマりました。

 

というわけで、結局Mechanimを使うことに。おいおいマジかよ……

 

といっても、地獄のようなステートマシンで制御するわけではありません。

このような遷移でとりあえず十分です。

gyazo.com

Idle、WalkはそれぞれBlend Treeです。

右クリックでCreate StateからEmptyではなくBlend Treeを作ります。

そしてパラメータもこのように5つ設定してください(全部Floatです)

gyazo.com

中身はこんな感じで、各方向を向いたアニメーションを登録しています。

U=Up=上、D=Down=下、という感じです。色々試しましたが、上下左右の順にするのが一番直感的じゃないかと思います。

gyazo.com

Blend Treeの特徴はこれです。これぞ直感的な設定。

赤丸が現在の位置、青ダイヤが各Motion=Animation Clipを示しています。

8方向アニメーションなら上下左右の端にもアニメーションを登録してください。

Blend Typeはどれでもいいと思います。

IdleとWalkの遷移はこんな感じで。

gyazo.com

gyazo.com

Transition Durationは0にしておきましょう。

さもないと変なフレームが出ます……
gyazo.com

 あとは、Player Controller的なスクリプトにこのようなコードを書きます。

 

gist.github.com

movementで入力を取得し、それをanimator.SetFloatでanimatorに送信することで、

BlendTree内の各Posに相当するWalkアニメーションが勝手に再生されます。

 

さらに、さっきまで歩いていた方向を取得するために、lastMoveという変数を宣言しています。

これは入力の絶対値が0.5より大きくないと更新されないので、ボタンを離しても0に戻ることはありません。なので、たとえば左にボタンを押している状態で離すと、-1が残ったままになり、Idleに戻ったときにWalk時と同じ方向を見てくれます。

 

そしてInputは、vector2のmagnitudeということで、ベクトルの大きさを取得しています。

この場合、Vector2はHorizontalとVerticalの入力なので、それが0でなければプレイヤーがキャラクターを操作していると判断してIdleからWalk状態に遷移しています。

 

Unityで再生してみると、うまいこと歩いては止まってくれると思います。

https://i.gyazo.com/8d5f5e35e011e1b8e5f93e50a5c84848.gif

お疲れ様でした。

youtu.be

今回の方法はこの動画を参考にしました。

Unityで2DRPG作りたい人にはめっちゃありがたいシリーズ(アクションRPGだけど)です。

 

……プログラムの解説書くのってめちゃくちゃ難しいし時間かかるな。