モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

2Dキャラクタのアニメーションを作る! その1:Cocos Creator

 アクションゲームでキャラクタが移動する時、キャラクタが静止画のままでは違和感満載です。
 歩く、走る、ジャンプする等の状態に応じたアニメーションをキャラクタにさせる必要があります。
 
 ということで、今回はCocos Creatorで2Dのキャラクタのアニメーションを作成することを目標にします。

 アニメーションを作成するには、キャラクタの動きを1コマ1コマ描いてパラパラ漫画のように動かす方法がありますが、絵を描く量が多くて大変です。
 
 なので、ボーンアニメーションのやり方にします。キャラクタの絵を頭、腕、胴体、足のパーツに分割し、それぞれの関節の角度を変えることで色々な動作のアニメーションを作成します。この方法だと絵を描く量がパラパラ漫画より少なくて済みます。
 
 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)

マネキンを作る

 なにかしらキャラクタを書く必要がありますが、最初なのでマネキンにしました。
 これを動かして、パーツ構成に無理がないか試します。
     f:id:mmorley:20160422223053p:plain
 2.5頭身ぐらいにしてみました。そして、完全に真横です。
 これを動かしたいと思います。

パーツ構成

 マネキンのパーツ構成についてもう少し詳しく書きます。
     f:id:mmorley:20160422231518p:plain
 パーツ数が全部で17個です。
 手足は左右必要なので多くなりますね。
 腰を描くか迷いましたが、今回は無しでやってみます。
 足先のあたりはもっと簡略にしても良いかもしれません。
 ここらへんは、動きを見て調整です。

あとがき

 『Cocos Studio2』の『HeroAnimation Demo』プロジェクト等を参考にして、パーツの構成を決めました。
 17個もポーズを付けるのは大変そうですが、ひとまずこれでやってみたいと思います。