８方向スプライトキャラクターの歩行アニメーションを実装する
検証環境
- Windows
-
- Windows 11
- Unity エディター
-
- 2020.3.25f1
- 入力システムパッケージ
-
- 1.2.0
この Tips の前提設定
この Tips の説明の前提として以下の設定を事前に行っています。
参考サイト
４方向の歩行アニメーションについて
４方向の歩行アニメーションを行う方法については前回の Tips で説明しました。 今回８方向について説明しますが大部分は４方向の歩行アニメーションと同じ手順ですのでここでは違いがある分のみ説明していきます。
歩行グラフィックの用意
前回は４方向用のグラフィックを用意しましたが、今回は以下のような８方向用のグラフィックを用意します。 新たに「左下」「右下」「左上」「右上」が追加されています。
向きの並びについてですが８方向は４方向に比べるとあまり明確に決まっていないように思えます。 ただ、以下の形式が割と多く見かけるので今回はこの配置で進めます。
| 下 | 左下 |
| 左 | 右下 |
| 右 | 左上 |
| 上 | 右上 |
プロジェクトの作成と画像の準備
今回もキャラクターを配置してキーボードのカーソルキーで移動できるものを作成してみます。 ８方向なので斜め移動すればグラフィックも斜め向きで表示されるようになります。
まずは新規で 2D のプロジェクトを作成します。プロジェクトに用意したキャラクター画像を追加します。
追加した画像を選択し、インスペクターの設定を行います。この設定は４方向の時と同じです。
スプライトエディターで画像を分割します。画像数は増えますがやることは同じです。
プロジェクトにある画像が以下のように表示されればOKです。
アニメーションデータの作成
ここもやることは４方向歩行アニメーションと同じです。最終的に８方向のアニメーションが作成できていればOKです。 画像の番号は４方向の時とずれているので注意してください。
| アニメーションファイル名 | 設定画像 |
|---|---|
| IwamaruDown | Iwamaru_0, Iwamaru_1, Iwamaru_2, Iwamaru_1 |
| IwamaruLeft | Iwamaru_6, Iwamaru_7, Iwamaru_8, Iwamaru_7 |
| IwamaruRight | Iwamaru_12, Iwamaru_13, Iwamaru_14, Iwamaru_13 |
| IwamaruUp | Iwamaru_18, Iwamaru_19, Iwamaru_20, Iwamaru_19 |
| IwamaruLeftDown | Iwamaru_3, Iwamaru_4, Iwamaru_5, Iwamaru_4 |
| IwamaruRightDown | Iwamaru_9, Iwamaru_10, Iwamaru_11, Iwamaru_10 |
| IwamaruLeftUp | Iwamaru_15, Iwamaru_16, Iwamaru_17, Iwamaru_16 |
| IwamaruRightUp | Iwamaru_21, Iwamaru_22, Iwamaru_23, Iwamaru_22 |
各方向正しくアニメーションすることを確認してください。
アニメーション切り替え設定
途中まで４方向の時と設定は同じなので割愛します。
Blend Tree の設定まできたら Motion は８つ作成します。
追加した８項目の Motion にプロジェクトに追加された .anim を設定していきます。
各アニメーションの方向を数値で指定していきます。
| 方向 | X | Y |
|---|---|---|
| 下 | 0 | -1 |
| 上 | 0 | 1 |
| 左 | -1 | 0 |
| 右 | 1 | 0 |
| 左下 | -1 | -1 |
| 右下 | 1 | -1 |
| 左上 | -1 | 1 |
| 右上 | 1 | 1 |
これでアニメーションの設定は終わりです。
移動制御
移動はキーボードのキーを押して動かすのでスクリプトを作成して制御します。 こちらのスクリプトの内容は４方向の時に作ったものとまったく同じなのでそちらを参照してください。 スクリプト名は「CharacterMove」としておきます。
スクリプトを作成したらキャラクターオブジェクトにアタッチします。
実行
これで全ての工程が完了です。ゲームを実行してキーボードのカーソルキーを押して移動してみてください。 キャラクターが押した方向に移動し、グラフィックの向きが向いた方向に変化しつつ歩行アニメーションが動いていれば完了です。 今回は８方向に対応しているので斜め移動したときにグラフィックも斜めが適用されるか確認してみてください。