こちらの記事の続きです。
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』を参照してください)で、フレーム・イベントの視覚的な編集がサポートされています。スクリプトにアニメーション・イベントのコールバックを書くことも非常に単純です。アニメーション・イベントのコールバックは実は通常の関数です。
アニメーション・エディタに追加されるフレーム・イベントは、アニメーションのルートノードのコンポーネント上に位置します。
具体的な例:
フレームイベントは、以下に示すようにアニメーションの最後に追加されます。
スクリプトでは、このように書くことが出来ます。
cc.Class({ extends: cc.Component, onAnimCompleted: function (num, string) { console.log('onAnimCompleted: param1[%s], param2[%s]', num, string); } });
上記のコンポーネントをアニメーションのルートノードに追加して下さい。アニメーションが終わろうとしている時に、アニメーションのシステムは、自動的にスクリプトの『onAnimCompleted』関数を呼び出します。アニメーションシステムはアニメーションのルートノードの全てのコンポーネントをサーチします。もし、コンポーネントにアニメーションイベントをと実現するために指定された関数があるならば、それは呼び出されて、イベントに書かれたパラメータはインポートされます。
アニメーションイベント
ゲームでアニメーションを使う時、フレームの間やフレームの終わりに実行したい事があるかもしれません。我々はこれらをアニメーションイベントと呼びます。
イベントの追加
最初に、イベントを発生させたい位置を選択してします。ボタンフィールドの左端の方にあるイベント追加ボタンをクリックして下さい。新しく追加されたイベントを表す白い長方形が、タイムライン上に現れます。
イベントの削除
イベントを削除する2つの方法があります。
- イベントを表す白い長方形をダブルクリックします。イベントエディタが開いた後、『Function』の後ろにあるリサイクルのアイコンをクリックしてします。このイベントを削除するためのプロンプトが表示されます。確認ボタンをクリックすると、イベントが削除されます。
- アニメーションエディタでイベントを右クリックして、『Delete』を選択します。
イベントトリガー関数の指定とパラメータのインポート
変更したいイベントの白い長方形をダブルクリックし、イベントエディタを開いて下さい。エディタで、送信する必要がある関数名を手入力します。トリガーすると、対応するメソッドはこの関数名によって各コンポーネントにマッチします。
もしインポートされたパラメータを追加したい場合は、『Params』の近くの『+』をクリックします。サポートされているパラメータは、Boolean、String、Numberの3つだけです。
あとがき
ドキュメントで、一通りアニメーション関連の操作方法を確認しましたが、実際に使ってみないとですね。