OMOROC.PLAY

アプリ開発とキャラデザインをするブログ

リアルワールドRPGを作ってみよう！ キャラのアニメーション

Unity リアルワールドゲーム

今日の東京は雪景色、桜開花後の雪は3年ぶりらしいです。

凍える寒さの中、中野通りの桜蕾を見に行ってきたアフロです( ・∇・)


さて今回は、前回導入したキャラぷちゴンを上下左右に動かしてみたいと思います。


➡️動いている様子はこんな感じ↓


ある程度のアニメーションであればUnityの機能を使えば簡単に実装できます。
では、順をおって説明します。

  • Animatorの準備

　１. アニメーターコントローラーを作成
　　　Projectビュー > Create > AnimatorController
　　　名前は「PuchigonSprite」

　　　f:id:tinyafuro:20180321214046p:plain

　　　※Animationsフォルダを作成して整理すると管理しやすくなります


　２. HierarchyビューのPlayerオブジェクトにAnimatorコンポーネントを追加

　　　f:id:tinyafuro:20180321214329p:plain

　　　追加したAnimatorコンポーネントのControllerへ先程作成したアニメーターコントローラーをアタッチさせる

  • スプライトアニメーションの作成

　１. Window > Animationウインドウを開く
　
　２. Createボタンを押してアニメーションクリップ新規作成　※名前は「PuchigonSprite@front」

　３. スプライトアニメーションのキーフレームとなるspriteをドラック&ドロップ

　　イメージはこんな感じ↓
　　f:id:tinyafuro:20180321215228p:plain

　４. 他にも横や後ろ姿のアニメーションも追加
　　　アニメーションウィンドウの左上のクリップトグルから [ Create New Clip]
　　　名前は同様に
　　　・PuchigonSprite@back
　　　・PuchigonSprite@left
　　　・PuchigonSprite@right

　　　結果的にProjectビューはこうなる
　　　f:id:tinyafuro:20180321214046p:plain


  • メカニムの設定

　１. 作成したアニメーションクリップ間のステート遷移を設定
　　　Playerオブジェクトを選択した状態でAnimatorウィンドウを開く

　２. ステート遷移の判断基準となるパラメータを定義する
　　　Animatorウィンドウ > Parameters > ➕ボタンからBoolを選択 > 名前をfrontとする
　　　同様のパラメータを以下３つ作成する
　　　・back
　　　・left
　　　・right

　３. PuchigonSprite@frontステートを右クリックして [ Make Transition ] を選択

　　　f:id:tinyafuro:20180321220659p:plain

　　
　　そうすると矢印（トランジション）が追従するようになるので、そのままPuchigonSprite@backステートへ繋ぐ
　　作成されたトランジションをクリックしてInspectorビューから➕ボタンでConditionを追加し、backパラメータを指定する
　　その際、[ Has Exit Time ] のチェックは外しておく。

　　同じ様な動作を繰り返すことで４つのステートがそれぞれ他３つのステートと繋がります

　　こんな感じになっていればOK
　　f:id:tinyafuro:20180321221718p:plain

  • アニメーション切り替え処理をコーディング

　１. animator.SetBool(パラメータ名, true) だけでアニメーション遷移できちゃいます！
　　コーディングはすごくシンプルで簡単( ´ ▽ ` )


/// プレイヤーの座標、移動管理
public class PlayerController : MonoBehaviour {


//プレイヤーのアニメーションコントローラー
private Animator animator;


//プレイヤーのステート
public enum PlayerState{
front,
left,
right,
back
}

private PlayerState state;


void Awake(){
animator = gameObject.GetComponent();
}


//プレイヤーの向きを変更
public void DirectionSet(PlayerState st){

switch(st){
case PlayerState.front:
state = PlayerState.front;
break;
case PlayerState.back:
state = PlayerState.back;
break;
case PlayerState.right:
state = PlayerState.right;
break;
case PlayerState.left:
state = PlayerState.left;
break;
}

//プレイヤーの向きを変更
animator.SetBool("front", state == PlayerState.front);
animator.SetBool("left", state == PlayerState.left);
animator.SetBool("right", state == PlayerState.right);
animator.SetBool("back", state == PlayerState.back);
}
}



なかなかのボリュームになってしまいましたが、
一度やって慣れてしまうと大したことはないですｗ


プログラムコードを別ウインドウで表示するアレってはてなブログじゃできないのかなぁ（汗）
インデント入らなくて読みずらいわぁ、、、