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

モーリーのメモ

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

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

Cocos Creator Mac

 こちらの記事の続きです。
mmorley.hatenablog.com
 前回は、『Cocos Creator』で体のパーツを組み立てました。
 各パーツの関節の位置にアンカーポイントを置き、動きや表示順序を考えてパーツ(ノード)の親子関係を作りました。
 
 次は、歩くアニメーションを作ります。

使用環境

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

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

アニメーションの作成

『character』ノードにアニメーションを追加

 まずは、『character』ノードに、『Animation』コンポーネントを追加します。
 f:id:mmorley:20160425175705p:plain

『AnimationClip』を作成

 『Cocos Studio2』では、タイムラインは1つで、走るアニメーションは0〜60フレーム、ジャンプするアニメーションは60〜90フレームというようにフレームの範囲でアニメーションを分けていました。
 『Cocos Creator』は『AnimationClip』ごとに管理するようです。
 最初に歩くアニメーションを作ります。
 『Assets』パネルで、『walk』というアニメーションを作って、『Animation』コンポーネントに追加します。
 f:id:mmorley:20160425194817p:plain
 ノードごとに、アニメーションで動かす属性値を設定します。
 f:id:mmorley:20160425195748p:plain:w400

 属性値を設定するノードは下図のとおりです。
 赤枠のノードに『position』、青枠のノードに『rotation』、それ以外は無しです。
 設定するノードは『〜_layer』と『〜_hand』と『〜_toe』です。
 f:id:mmorley:20160425202437p:plain

『AnimationClip』を複製

  歩く、走る等アニメーションを作る度に、属性値を設定するのは大変なので、属性値を設定し終わったら『AnimationClip』ファイルを複製しておきます。
 『Assets』パネルで『walk』を右クリックして『Reveal In Finder』クリックすると、『Finder』でフォルダを開くので『Finder』上でファイルを複製します。

キーフレームを打つ

 『Timeline』パネルで赤線を『0:00』に合わせ、ノードを選択した後、『Scene』パネルで動かしたり『Properties』パネルで値を変更すると、キーフレームが打たれます。
f:id:mmorley:20160425220911p:plain
 下記のボタンに切り替えると、『Scene』パネルで、ノードを回転できます。『Cocos Creator』の画面の左上にあります。
f:id:mmorley:20160425220610p:plain

 下図のように5箇所にキーフレームを打ちました。

  1. 『0:00』
    f:id:mmorley:20160425230246p:plain
  2. 『0:15』
    f:id:mmorley:20160425230320p:plain
  3. 『0:30』
    f:id:mmorley:20160425230334p:plain
  4. 『0:45』
    f:id:mmorley:20160425230355p:plain
  5. 『1:00』
    f:id:mmorley:20160425230404p:plain

 『0:00』と『1:00』のポーズは全く同じです。1〜5を繰り返すことで歩き続けます。

デモ

 作成したデモを貼っておきます。
 歩き続けるだけです。

http://githubmorley.github.io/cocosprojects-pages/hellococos14/
 これだとわかりにくいですが、途中で若干、足が地面にめり込んでいます。
 目立つようだと細かくキーフレームを打って調整しないといけないですね。

あとがき

 なんとか歩くようになりました。
 手足を前後に動かすだけだと違和感がありますが、体の上下の動きを入れるとそれっぽくなった気がします。