モーリーのメモ

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

モーリーのメモ

マニュアルの『アニメーション』を読む! その2(完):Cocos Creator

 こちらの記事の続きです。 
mmorley.hatenablog.com
 スクリプトでアニメーションを操作する方法、アニメーションイベントに関する内容です。

使用環境

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

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

アニメーション制御のためのスクリプトの使用

アニメーションコンポーネント

 アニメーションコンポーネントは、いくつかの一般的なアニメーション制御関数を提供します。もし、単純なアニメーションの制御が必要なだけであれば、ノードのアニメーションコンポーネントを取得することによって、いくつかの操作を行うことが出来ます。

再生
var anim = this.getComopnent(cc.Animation);

// アニメーションの再生が何も指定されておらず、defaultClipが設定されている場合、defaultClipアニメーションを再生
anim.play();

// 'test'アニメーションの再生を指定
anim.play('test');

// 1秒から'test'アニメーションの再生を指定
anim.play('test', 1);

 アニメーションを再生すると、アニメーションは、次のステップの操作のために前のアニメーションの再生状態を評価します。アニメーションが、『Stop』状態ならば、このアニメーションを直接リプレイします。『Pause』状態ならアニメーションは、アニメーションは再開され、現在の時間から続きを再生します。『Play』状態なら、このアニメーションを停止して、リプレイします。

var anim = this.getComopnent(cc.Animation);

// 最初のアニメーションを再生
anim.play('position-anim');

// 2番目のアニメーションを再生
anim.play('rotation-anim');
一時停止、再開、停止
var anim = this.getComopnent(cc.Animation);

anim.play('test');

// 'test'アニメーションの停止を指定
anim.pause('test');

// 全てのアニメーションを一時停止
// anim.pause();

//  'test'アニメーションの再開を指定
anim.resume('test');

// 全てのアニメーションを再開
// anim.resume();

// 'test'アニメーションの停止を指定
anim.stop('test');

// 全てのアニメーションを停止
// anim.stop();

 『Pause』、『Resume』、『Stop』を呼び出す関数は似ています。
 
 『Pause』は、一時的にアニメーションの再生を停止します。『Resume』は現在の時間から再生を続けます。しかしながら、『Stop』はアニメーションの再生を停止します。再び再生された時、このアニメーションは最初から再生を開始します。

アニメーションの現在の時間の設定
var anim = this.getComopnent(cc.Animation);

anim.play('test');

// 'test'アニメーションの現在の再生時間を1秒に設定
anim.setCurrentTime(1, 'test');

// 全てのアニメーションの現在の再生時間を1秒に設定
// anim.setCurrentTime(1);

 いつでもアニメーションの現在の時間を設定することが出来ます、しかし、アニメーションの状態は、時間の設定に応じて、すぐには変更されません。次のアニメーションの『update』の場合にのみ、この時間に応じて再生の状態が再計算されます。

AnimationState

 『Animation』はいくつかの単純な制御関数を提供するだけです。さらなるアニメーションの情報と制御のために、『AnimationState』が必要です。

『AnimationState』とは何ですか?

『AnimationClip』がアニメーションデータのキャリアである場合、『AnimationState』は『AnimationClip』を実行する具体的な例です。そしてそれは、アニメーションデータをプログラムによる計算に都合の良い数値にデコードします。『Animation』が『AnimationClip』を再生している時、『AnimationClip』は『AnimationState』にデコードされます。『Animation』の再生状態は、アニメーションのループの有無、ループの方法、再生スピード等が含まれた『AnimationState』によって実際に計算されます。

『AnimationState』の取得
var anim = this.getComopnent(cc.Animation);
// 『play』は関連した『AnimationState』を返します。
var animState = anim.play('test');

// もしくは直接取得
var animState = anim.getAnimationState('test');
アニメーションの情報の取得
var anim = this.getComopnent(cc.Animation);
var animState = anim.play('test');

// アニメーションに関連付けられた『clip』を取得
var clip = animState.clip;

//  アニメーションの名前を取得
var name = animState.name;

//  アニメーションの再生速度を取得
var speed = animState.speed;

// アニメーションの合計時間を取得
var duration = animState.duration;

// アニメーションの再生時間を取得
var time = animState.time;

// アニメーションのリピート回数を取得
var repeatCount = animState.repeatCount;

// アニメーションのループモードを取得
var wrapMode = animState.wrapMode

// アニメションが再生中かどうか取得
var playing = animState.isPlaying;

// アニメーションが一時停止中かどうか取得
var paused = animState.isPaused;

// アニメーションのフレームレートを取得
var frameRate = animState.frameRate;

『AnimationState』から、全てのアニメーションの情報が取得できます。何をすべきか確認するためにこの情報を使うことが出来ます。

アニメーションの再生速度を設定

var anim = this.getComopnent(cc.Animation);
var animState = anim.play('test');

// アニメーションの再生速度を速くします。
animState.speed = 2;

// アニメーションの再生速度を遅くします。
animState.speed = 0.5;

 速度の値が大きいほど、速く、逆もまた同じです。

アニメーションのループモードとループ回数の設定
var anim = this.getComopnent(cc.Animation);
var animState = anim.play('test');

// ループモードを『Normal』に設定
animState.wrapeMode = cc.WrapMode.Normal;

// ループモードを『Loop』に設定
animState.wrapeMode = cc.WrapMode.Loop;

// アニメーションのループ回数を2回に設定
animState.repeatCount = 2;

// アニメーションのループ回数を無限に設定
animState.repeatCount = Infinity;

 『AnimationState』によりループモードの動的な設定が可能になります。現在、様々なループモードが設けられています。これらのループモードは『cc.WrapMode』から取得出来ます。アニメーションのループカテゴリが『Loop』カテゴリの場合、この効果を得るためには『repeatCount』を一緒に使用する必要があります。デフォルトでは、アニメーションクリップをデコードする際、もしアニメーションのループカテゴリが『Loop』カテゴリであれば、『repeatCount』には無限(すなわち無限ループ)が設定されます。『Normal』カテゴリであれば、『repeatCount』には1が設定されます。

アニメーションイベント

 アニメーション・エディタ(編集方法については、『Animation event』を参照してください)で、フレーム・イベントの視覚的な編集がサポートされています。スクリプトにアニメーション・イベントのコールバックを書くことも非常に単純です。アニメーション・イベントのコールバックは実は通常の関数です。
アニメーション・エディタに追加されるフレーム・イベントは、アニメーションのルートノードのコンポーネント上に位置します。

具体的な例:

 フレームイベントは、以下に示すようにアニメーションの最後に追加されます。
 f:id:mmorley:20160417224341p:plain
 スクリプトでは、このように書くことが出来ます。

cc.Class({
    extends: cc.Component,

    onAnimCompleted: function (num, string) {
        console.log('onAnimCompleted: param1[%s], param2[%s]', num, string);
    }
});

 上記のコンポーネントをアニメーションのルートノードに追加して下さい。アニメーションが終わろうとしている時に、アニメーションのシステムは、自動的にスクリプトの『onAnimCompleted』関数を呼び出します。アニメーションシステムはアニメーションのルートノードの全てのコンポーネントをサーチします。もし、コンポーネントにアニメーションイベントをと実現するために指定された関数があるならば、それは呼び出されて、イベントに書かれたパラメータはインポートされます。

アニメーションイベント

 ゲームでアニメーションを使う時、フレームの間やフレームの終わりに実行したい事があるかもしれません。我々はこれらをアニメーションイベントと呼びます。

イベントの追加

 最初に、イベントを発生させたい位置を選択してします。ボタンフィールドの左端の方にあるイベント追加ボタンをクリックして下さい。新しく追加されたイベントを表す白い長方形が、タイムライン上に現れます。
f:id:mmorley:20160417224453p:plain

イベントの削除

 イベントを削除する2つの方法があります。

  1. イベントを表す白い長方形をダブルクリックします。イベントエディタが開いた後、『Function』の後ろにあるリサイクルのアイコンをクリックしてします。このイベントを削除するためのプロンプトが表示されます。確認ボタンをクリックすると、イベントが削除されます。
    f:id:mmorley:20160417224510p:plain 
  2. アニメーションエディタでイベントを右クリックして、『Delete』を選択します。

イベントトリガー関数の指定とパラメータのインポート

 変更したいイベントの白い長方形をダブルクリックし、イベントエディタを開いて下さい。エディタで、送信する必要がある関数名を手入力します。トリガーすると、対応するメソッドはこの関数名によって各コンポーネントにマッチします。
 
 もしインポートされたパラメータを追加したい場合は、『Params』の近くの『+』をクリックします。サポートされているパラメータは、Boolean、String、Numberの3つだけです。

あとがき

 ドキュメントで、一通りアニメーション関連の操作方法を確認しましたが、実際に使ってみないとですね。