CreateJSのtween.jsのTransformアニメーション処理に関して思った事

Flashアドベントカレンダー。完パケしたいので、恐縮ながら投稿させて頂きました。

まえがき

勉強の為にFlashを使ってトランプゲームのHigh And Lowを作っているのですが、作成している過程で今後の処理に関して気がついた事です。Transformでアニメーションしているからこそ、アニメーションが途中で違うアニメーションの記述へ変化してもスムーズに切り替えられるのではと・・・。
私個人はこの事でCreatJSのライブラリはとても使いやすく出来ていると実感しました。

素材提供

トランプの素材
http://www.xn--eckzb3bzhw32znfcp1zduw.com/data/trump.php

png圧縮ツール

勉強中トランプゲーム「High And Low」

http://tomoka.github.io/heightAndLow/
※勉強中のため都度更新されます。

実装例

function nextCard(){}の処理

High And Lowのカードの回戦を終えて、回戦の数を数え全54枚（26組）のトランプの回戦が終わったかどうかの判別をし、リザルトへ飛ばす時の処理です。

function nextCard() {
	createjs.Tween.get(that.containerVisuble, {
		override: true
	        }).to({
	        	x: 0,
	        	y: 0
	        }, 2000, createjs.Ease.quadOut);

        createjs.Tween.get(that.containerHeddin, {
                override: true
                }).to({
                        x: 0,
                        y: 0
                }, 2000, createjs.Ease.quadOut)
                .call(handleComplete1);

	//アニメーションが終わったら、リザルトの判別へ
        function handleComplete1(){
                //ゲーム中フラグ
                game = false;
                console.log("Complete");
                /*26回目の対戦だったら終了。
                トランプ２枚のセットが26セットが最大なので)*/
                if (26 == attackCount) {
                        //リザルトへ
                        that.gotoAndPlay(2);
                } else {
                        //次のhight and low へ・・・
                        that.nextAttack();
                }
        }
}

この最後のhandleComplete1()の処理を.call()で呼ばずに、以下のように外に出した場合。

function nextCard() {
	createjs.Tween.get(that.containerVisuble, {
		override: true
	        }).to({
	        	x: 0,
	        	y: 0
	        }, 2000, createjs.Ease.quadOut);

        createjs.Tween.get(that.containerHeddin, {
                override: true
                }).to({
                        x: 0,
                        y: 0
                }, 2000, createjs.Ease.quadOut)
                .call(handleComplete1);
	
        function handleComplete1(){
                //ゲーム中フラグ
                //画面が進んでいても、コンプリートの内容は実行されます
                game = false;
                console.log("Complete");
             }

         /*26回目の対戦だったら終了。トランプ２枚のセットが26セットが最大なので)*/

         //外に出した場合
         if (26 == attackCount) {
                 //リザルトへ
                 that.gotoAndPlay(2);
             } else {
                 //次のhigh and low へ・・・
                 that.nextAttack();
             }
}

createjs.Tween()で指定した２つのアニメーションが終わらなくても、if (26 == attackCount)の処理へすすみ、アニメーションの途中でthat.gotoAndPlay(2);で遷移するリザルト画面に遷移します。リザルト画面はカードのオブジェクトが無いのでパット画面が変わる感じになります。
しかし、回戦数が足りなくリザルト画面へ遷移しない次の回戦の準備のnextAttack()の処理へすすむ場合、カードを並べる時のアニメーションをcreatejs.Tween()で同じtargetに指定するのですが、nextCard()で指定したcreatejs.Tween()のアニメーションが終わらないままnextAttack()で設定したアニメーション処理へ進んでしまいます。しかもアニメーションしている途中なので（.set()していなければ）そのまま.to()に設定した数値へと繋がるようにアニメーションを実行します。

以下、if (26 == attackCount)の処理でMCに影響が出るMCのアニメーションの部分の抜粋。
handleComplete1()の処理をcall()で指定しなかった場合。nextCard()のアニメーションが全て終わらなくても
this.containerVisubleとthat.containerHeddinのアニメーションへと繋がります。

function nextAttack(){}の処理

function nextAttack(){
	createjs.Tween
		.get(this.containerVisuble, {
			override: true
		})
		.to({
			x: 170,
			y: 180,
			rotation: 360,
			scaleX: 0.35,
			scaleY: 0.35,
			skewX: 0,
			skewY: 0
		}, 1500, createjs.Ease.quadOut)
		.to({
			scaleX: 0.01
		}, 1000, createjs.Ease.backOut)
		.call(handleComplete1)
		.to({
			scaleX: 0.35
		}, 300, createjs.Ease.backOut);

	function handleComplete1() {
		//Tween complete
		console.log("Complete1");
		//カードをひっくり返してカードの表を見せる画像の切り替え
		that.containerVisuble.addChild(visibleImage);
	};
	createjs.Tween
		.get(that.containerHeddin, {
			override: true
		})
		.to({
			x: 380,
			y: 180,
			rotation: -360,
			scaleX: 0.35,
			scaleY: 0.35,
			skewX: 0,
			skewY: 0
		}, 1800, createjs.Ease.quadOut)
		.to({
			x: 380,
			y: 180
		}, 500, createjs.Ease.backOut);
}

tweenのアニメーションで思った事

.set()を設定しない事で次のアニメーションが続いてもおかしくない仕様ならば、スムーズにアニメーションの処理が出来るようになる。順序をきちんと考えた上でアニメーションが遷移しても問題が無いのでしたら実装するのも良いと思いました。
あと、tweenを削除するメゾットがあっても止めるメゾットが無いようです。でも止めるメゾットが無くても、Transformでアニメーションしているので、途中で最終変化する数値が変わっても現在の数値から変化するので問題なくアニメーションしてしまいます。

tweenを削除・上書き許可

	Tweenを全て削除する方法	Tweenをoverrideする設定
記述例	displayObject.removeAllTweens()	.get(target, {override: true})
説明	存在する既存のtweenを全て削除	'override:true'で、targetに設定したtweenを上書きできるかどうかのフラグ

tweenをstop()する方法

stop()は無いようです。でも、考えてみればflameを止めるメゾットがstop()だから無いのかなと思いました。

まとめ

Transformでアニメーションしている利点が生きているからtween.jsが使いやすいと感じました。初めてHTML5 canvasのメニューを触った時はMCのアニメーションはtweenで処理するのはちょっと癖があって扱いにくいと思っていましたが、MovieClipのsetTransformの内容の理解とtweenの上書き上書きを上手く利用すれば、状況によって流動的な動きが必要な処理などの場合は切れ目無くアニメーションをtween.jsで設定しやすくできそうなのではと思いました。

最後まで読んでくださりありがとうございました。