Spineランタイム：アニメーションの単独再生

Spineでランタイムのアニメーション再生命令は高機能ですが複雑です。ピンポイントの機能ごとにこまめにメモ投稿してみようと思います。(デモはなし。)
なお、ランタイムはSpine3.4およびStarling2対応のSpine-Staringを使っています。他の言語のランタイムでも基本は同じかと思います。

アニメーションの設定

AnimationStateにsetAnimationまたはsetAnimationByNameを行います。

sample.as

var animState:AnimationState = skeletonAnimation.state;
var trackIndex:int = 0; // トラック番号
var animName:String = "animaton"; // ツールで設定したアニメーション名
var loop:Boolean = false; // ループ再生するか
animState.setAnimationByName(trackIndex, animName, loop);

アニメーションがループか否かはツール上で設定されてこないので、プログラム側で明示的に指定します。実際の現場ではアニメーション名にレギュレーションをつけて"anim1_loop"のように名前にloopが含まれる場合ループ再生をするなどとすると、デザイナと協業しやすそうです。

trackIndex番号については、別途投稿します。

アニメーションの再生

これだけだとアニメーションの時間が進まないので、SkeletonAnimationをジャグラー登録するか、自分でadvancedTimeを呼んでやる必要があります。SkeletonAnimation＝画面上のキャラクターの事です。

sample.as

// skeletonAnimationはDisplayObjectです。
addChild(skeletonAnimation);

// Starlingのjugglerを使う(一番簡単)
Starling.juggler.add(skeletonAnimation);

// もしくはStarlingのEnterFrameEventを使っても良い
function onEnterFrame1(ev:EnterFrameEvent):void{
    skeletonAnimation.advanceTime(ev.passedTime);
}
Starling.current.stage.addEventListener(
    EnterFrameEvent.ENTER_FRAME, onEnterFrame1
);

// もしくはflashに元からあるEnterFrameEventを使っても良い
function onEnterFrame2(ev:Event):void{
    // 経過時間の計算が面倒かも
    skeletonAnimation.advanceTime(
        1 / Starling.current.nativeStage.frameRate
    );
}
Starling.current.nativeStage.addEventListener(
    Event.ENTER_FRAME, onEnterFrame2
);

お気軽に使うにはjugglerを、自分でskeletonAnimation毎の再生時間を管理したい場合はその他を使えばいいと思います。

なお、アニメーションの再生スピードはSkeletonAnimation個別で調整できます。

sample.as

// ２倍速再生
skeletonAnimation.timeScale = 2.0;

アニメーションの停止

pause命令はないので、jugglerからskeletonAnimationをremoveするか、EnterFrameEventによるadvanceTime呼び出しをやめます。

sample.as

Starling.juggler.remove(skeletonAnimation);
// もしくは
Starling.current.stage.removeEventListener(
    EnterFrameEvent.ENTER_FRAME, onEnterFrame1
);
// もしくは
Starling.current.stage.removeEventListener(
    EnterFrameEvent.ENTER_FRAME, onEnterFrame2
);
// もしくは
Starling.current.nativeStage.addEventListener(
    Event.ENTER_FRAME, onEnterFrame2
);

完全に停止するには、clearTrack命令を使います。

sample.as

skeletonAnimation.clearTrack(trackIndex);

以上です。