こちらの記事の続きです。
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』を追加します。
アニメーションの作成
それぞれの『AnimationClip』を編集します。
下記の部分で、編集する『AnimationClip』を切り替えます。
『run』
①〜④と⑤〜⑧は、左右の手足を逆にしただけです。
腕の振りは①と⑤と⑨にだけキーフレームを入れました。間にも入れたら動きがスムーズ出来ませんでした。
| ① 0:00 | ② 0:06 | ③ 0:12 | ④ 0:18 |
 |
 |
 |
 |
| ⑤ 0:24 | ⑥ 0:30 | ⑦ 0:36 | ⑧ 0:42 |
 |
 |
 |
 |
| ⑨ 0:48 | |||
 |
『idle』
腰から関節を動かすので、足の裏を同じ場所にするのが難しいです。『base_line』を足の位置に動かして、それに合うように足の角度を調整しました。
| 0:00 | 0:30 | 1:00 |
 |
 |
|
『jump』
飛び上がる前のポーズは足の各パーツにかなり角度がついています。
ちゃんと服を着た絵のときに、変にならないか心配です。
| 0:00 | 0:05 | 0:10 | 0:15 |
 |
 |
 |
 |
『land』
ジャンプの飛び上がる前のポーズと同じです。
| 0:00 | 0:08 |
 |
 |
デモ
作成したデモを貼っておきます。
ボタンをを押すと、それぞれアニメーションを再生します。
あとがき
自己満足ですが、それっぽい動作は出来たような気がします。
今のところパーツの分け方もそんなにおかしいところはないです。服の絵をちゃんと描いたら矛盾が出てくるかもしれませんが。
動きの量に対してどのぐらいフレーム間隔を開けると良いか、スピードの調整が難しいです。操作も面倒です。
