読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

2Dキャラクタアニメーションをテスト! その5(完):Cocos Creator

Cocos Creator Mac

 こちらの記事の続きです。
mmorley.hatenablog.com
 前回は、歩くアニメーションを作りました。
 
 今回は他にも『走る』、『ジャンプする』等のアニメーションを作って見たいと思います。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0.1
  • ブラウザ:Google Chrome Version 50.0.2661.86 (64-bit)

『AnimationClip』を追加

 前回、複製しておいた『AnimationClip』をさらに4つ複製して、『run』、『idle』、『jump』、『land』という名前にします。
 それぞれ下記の動作のアニメーションです。

  • run:走る
  • idle:立ち止まって体を少し揺らしている状態
  • jump:飛び上がる
  • land:着地

 『character』ノードにこれらの『AnimationClip』を追加します。
 f:id:mmorley:20160426223053p:plain

アニメーションの作成

 それぞれの『AnimationClip』を編集します。
 下記の部分で、編集する『AnimationClip』を切り替えます。
f:id:mmorley:20160426231953p:plain

『run』

 ①〜④と⑤〜⑧は、左右の手足を逆にしただけです。
 腕の振りは①と⑤と⑨にだけキーフレームを入れました。間にも入れたら動きがスムーズ出来ませんでした。

① 0:00 ② 0:06 ③ 0:12 ④ 0:18
f:id:mmorley:20160426224023p:plain:w100 f:id:mmorley:20160426224244p:plain:w100 f:id:mmorley:20160426224332p:plain:w100 f:id:mmorley:20160426224420p:plain:w100
⑤ 0:24 ⑥ 0:30 ⑦ 0:36 ⑧ 0:42
f:id:mmorley:20160426224542p:plain:w100 f:id:mmorley:20160426224620p:plain:w100 f:id:mmorley:20160426224650p:plain:w100 f:id:mmorley:20160426224739p:plain:w100
⑨ 0:48
f:id:mmorley:20160426224830p:plain:w100

『idle』

 腰から関節を動かすので、足の裏を同じ場所にするのが難しいです。『base_line』を足の位置に動かして、それに合うように足の角度を調整しました。

0:00 0:30 1:00
f:id:mmorley:20160426225007p:plain:w100 f:id:mmorley:20160426225110p:plain:w100 f:id:mmorley:20160426225007p:plain:w100

『jump』

 飛び上がる前のポーズは足の各パーツにかなり角度がついています。
 ちゃんと服を着た絵のときに、変にならないか心配です。

0:00 0:05 0:10 0:15
f:id:mmorley:20160426225258p:plain:w100 f:id:mmorley:20160426225352p:plain:w100 f:id:mmorley:20160426225440p:plain:w100 f:id:mmorley:20160426225523p:plain:w100

『land』

 ジャンプの飛び上がる前のポーズと同じです。

0:00 0:08
f:id:mmorley:20160426225634p:plain:w100 f:id:mmorley:20160426225722p:plain:w100

デモ

作成したデモを貼っておきます。
ボタンをを押すと、それぞれアニメーションを再生します。

あとがき

 自己満足ですが、それっぽい動作は出来たような気がします。
 今のところパーツの分け方もそんなにおかしいところはないです。服の絵をちゃんと描いたら矛盾が出てくるかもしれませんが。
 動きの量に対してどのぐらいフレーム間隔を開けると良いか、スピードの調整が難しいです。操作も面倒です。