Spineランタイム：アニメーションの再生スピードを調整する

こまめにまとめるシリーズで、今回はアニメーションのスピードの調節方法についてです。
以下、SpineランタイムはSpine-Starlingの4.3を使います。どの言語のランタイムでも大きさな差はないと思われます。

SkeletonAnimation全体のスピード調整

SkeletonAnimationまたはAnimationStateのtimeScale値を調整します。値を大きくするとスピードが速くなります。2で設定すると２倍速です。デフォルト１です。両者は別のパラメータなので両方設定することもできます。下記のようにすると4倍速になります。

sample.as

skeletonAnimation.timeScale = 2;
skeletonAnimation.state.timeScale = 2;

トラック毎のスピード調整

アニメーションの再生毎に、スピード設定をする事もできます。トラック設定オブジェクトであるTrackEntryがアニメーション再生命令の戻り値になっているので、ここにtimeScaleを設定します。(トラックについては前回の記事を参照。)

sample.as

var trackIndex:int = 0;
var track:TrackEntry = 
    skeletonAnimation.state.setAnimationByName(trackIndex, "animName");
track.timeScale = 2;

次のアニメーション再生がされた場合、timeScale値は1に戻りますので注意です。指定されたトラック番号のトラックにtimeScale値が設定されるのでなく、アニメーション指定(=TrackEntry)毎にtimeScaleが指定されています。

現在再生中のTrackEntryを取得する事もできます。番号指定されたトラックが再生中でない場合、nullが戻りますので、 コードでは存在チェックをしましょう。

sample.as

var track:TrackEntry = skeletonAnimation.state.getCurrent(0);
if(track) {
    track.timeScale = 0.5;
}

おまけ

キャラクターやアニメーション毎にスピードの設定が可能なので、細かい調整が可能です。また、アニメーションの再生中も各timeScale値の変更が可能です。これによって、走っているキャラクターの移動量が減るに従っての体のアニメーションはだんだんスローにしつつ、風になびく髪はそのままのスピード、というような表現が可能になります。再生しているキャラクターの位置によって、スピードが変化するような(セルフフィードバック的な感じか)スピードの重み付けもできるので、画面を横切るキャラクターが真ん中あたりにいる際はスローモーションになる、というような映画的な表現も実現できます。(すべてものものとにアニメーション側でなくランタイムで動的に対応するという意味です。）

sample.as

//再生が時間とともに速くなったり遅くなったりする例
stage.addEventListener(
    EnterFrameEvent.ENTER_FRAME,
    function(ev:EnterFrameEvent):void{
        _skeletonAnimation.timeScale = 1.0 + Math.sin(getTimer()*0.001);
    }
);

これらは、全体が１つのfpsで動いているFlashタイムラインアニメーションだとできない芸当ですね。

以上です。