【Unity】ツクール規格の2Dキャラクターの移動を実装する

UnityでSpriteアニメーションをさせるのは地味に大変です。

中でも、ツクールのように上下左右(あるいは全方位)に移動する場合、キャラクターの画像も正確に変えるのには中々の苦労が伴います。

今回は、上下左右に移動するキャラクターをSpriteの切り替えでアニメーションさせる場合の実装方法について解説します。

※歩行グラフィックはえるふぁさんよりいただきました。

準備するもの

キャラクター画像

ツクール規格のキャラクター画像を用意します。
別に厳密なツクール規格(3枚×4方向)でなくともOKです。

用意したら、Sprite Editorで画像を分割します。
Projectビューで画像を選択し、赤枠部分のように設定しましょう。

ちなみにドット絵の場合は、これに加えて

Pixels Per Unit1
Filter ModePoint (no filter)
CompressionNone

と設定すると綺麗に表示されます。

全て設定したらApplyボタンで適用し、Sprite Editorボタンを押します。

Sliceボタンで分割方法を設定します。

TypeGrid By Cell Count枚数で分割する
Column & RowC:3 R:4縦3枚、横4枚で分割
PivotBottom画像の中心点をBottom(下)にする。
背丈の異なるキャラクターを並べた際に自然な描画になります。

設定したらSliceを押すと、画像が分割されます。Applyで適用して完了です。

こんな感じで分割されていればOKです。

Animation Clip

Spriteアニメーション(パラパラ漫画のような、画像の連続再生)をさせるための、Animation Clipファイルが方向の数だけ必要です。
4方向の画像があるなら、4個必要になります。

Unity上で作成します。

まず、分割した画像を選択します。Sceneビューに放り込むとAnimationClipの新規作成画面が開くので、方向が分かるような名前で保存しましょう。

作成したらAnimationウィンドウ
(Window > Animation > Animation) を開き、アニメーションの設定をします。

再生ボタンでプレビューします。
十中八九、思い通りの動きじゃないはずなので、設定を変えましょう。

Samplesの数字を小さくすると、アニメーション速度を遅くできます。ツクール基準だと4ぐらいでしょうか。

また、ツクール規格のアニメーションは単純な順番再生では表現できません。

片足 > 直立 > もう片足 > 直立

と、最後にもう一度直立が入るので、アニメーションの最後に直立の画像を追加しましょう。

Projectビューから直立の画像を選択し、アニメーションの最後へD&DすればOKです。

再生ボタンで動作を確認しましょう。

この調子で、残りの方向分も作りましょう。

AnimatorController

Animation Clipの再生を制御するAnimator Controllerを作りましょう。

移動量に応じて再生するAnimation Clipが柔軟に変わるため、ステートマシンではなくBlend Treeを使用します。

右クリックをし、Create State > From New Blend Treeを選択します。

作成されたBlend Treeに適当な名前をつけ、ダブルクリックで移動します。

Blend Treeで使用するパラメータを設定します。移動ベクトルに応じて変化させたいので、float型のxとyを作成しましょう。

画像のようにBlend Treeを設定します。

Blend Typeを2D Simple Directionalに。
Paratetersを、先ほど作成したxyに。

+マークからAdd Motion Fieldを4回押し、モーションの項目を増やします。
MotionでAnimation Clipを方向ごとに指定し、PosXとPosYを方向に合わせた座標に設定します。

これで、Animator Controllerの設定は完了です。
後ほど、ScriptからAnimator Controllerへxとyの値を渡すことで、Blend Treeがいい感じに最適なAnimation Clipを選んでくれます。

Script

指定方向へ移動する

入力に応じて移動するScriptです。以下をアタッチしてください。

なお、動作にはRigidbody 2Dが必要です。

Rigidbody 2DのBody TypeをKinematicにします。

Kinematicにすることで、物理演算の影響が無視されます。
押されても動かなくなるので、2Dっぽいデフォルメ化された動きに適しています。

入力に応じて移動するようになりました。
次は、Animationを方向に対応させます。

方向に合わせてSpriteAnimation

以下のScriptをアタッチしてください。

更に、Project SettingsのInputの項目で、キーボードによるHorizontal と Verticalの項目を削除します。
(スティック入力の方はそのまま)。

これで、やっと完成です。

スポンサードサーチ

参考にした記事

人気記事

実際に4年間通ったぼくが、専門学校の闇を全て暴きます。

 

記事をシェアする