アクションゲームでキャラクタが移動する時、キャラクタが静止画のままでは違和感満載です。
歩く、走る、ジャンプする等の状態に応じたアニメーションをキャラクタにさせる必要があります。
ということで、今回はCocos Creatorで２Dのキャラクタのアニメーションを作成することを目標にします。
アニメーションを作成するには、キャラクタの動きを１コマ１コマ描いてパラパラ漫画のように動かす方法がありますが、絵を描く量が多くて大変です。
なので、ボーンアニメーションのやり方にします。キャラクタの絵を頭、腕、胴体、足のパーツに分割し、それぞれの関節の角度を変えることで色々な動作のアニメーションを作成します。この方法だと絵を描く量がパラパラ漫画より少なくて済みます。
Cocos Creatorのデモ等を見ているとSpineという文字が出てきます。これはボーンアニメーションを作るソフトのようです。
しかし、このソフトの恩恵を受けるには、機能が揃った有料のProfessional版が必要らしいです。
価格は299米ドル、ググったら3.32443851 万円と出ました。
ということでSpineは却下して、地道に作ります。
使用環境
私が使用している環境です。
- Mac OS X El Capitan Version 10.11.4
- Cocos Creator Version 1.0.1
- ブラウザ：Google Chrome Version 50.0.2661.75 (64-bit)
マネキンを作る
なにかしらキャラクタを書く必要がありますが、最初なのでマネキンにしました。
これを動かして、パーツ構成に無理がないか試します。
2.5頭身ぐらいにしてみました。そして、完全に真横です。
これを動かしたいと思います。
パーツ構成
マネキンのパーツ構成についてもう少し詳しく書きます。
パーツ数が全部で１７個です。
手足は左右必要なので多くなりますね。
腰を描くか迷いましたが、今回は無しでやってみます。
足先のあたりはもっと簡略にしても良いかもしれません。
ここらへんは、動きを見て調整です。
あとがき
『Cocos Studio2』の『HeroAnimation Demo』プロジェクト等を参考にして、パーツの構成を決めました。
１７個もポーズを付けるのは大変そうですが、ひとまずこれでやってみたいと思います。
