CommandExecutorで幸せ家族計画

ここ最近、Progression4を使う上でオレオレ・ルールになりつつある事をご紹介。
CommandExecutorを使い倒してアニメーションを色々制御したら、幸せ家族計画できそうだな、の話です。

能書きは要らない、漢は黙ってサンプルファイル。（FlashはCS4版です）

以下、一応覚書として記事書きます。

CommandExecutorとは

名前の如く「コマンドを執り行う」役割のクラスです。

このクラスのインスタンスのメソッドにaddCommand(…commands)があるんですが、ここで追加されたコマンド達の進行管理をしてるクラス、と思ってもいいんじゃないでしょうか。

このクラスを使って、インスタンスのアニメーションを制御する事を試みてみましょう、ってのが、本題です。

色々な動きをするインスタンスを制御

サンプルファイルのswfを実行してみると、以下の順序でアニメーションが実行されると思います。

1. 青い四角が、左上から右上へ動く。
2. 青い四角が、右上から右下へ動く。
3. 出現したグレーのボタンを押すと、青い四角が左上から右下へ動く。

この青い四角は同一インスタンスで、アニメーションの種類としては２種類です。
３のアニメは、１と２を同時に実行しています。

このアニメーションを実際に実行させてるのは、IndexScene.asのatSceneInitハンドラ内で、以下のようになってます。

addCommand(
	new AddChild(container, mySP),
	1,
	new DoExecutor(mySP.horizontalExecutor, new Event("horizontal")),
	new DoExecutor(mySP.verticalExecutor, new Event("vertical")),
	1,
	new Prop(mySP, { x:0, y:0 } ),
	new Prop(btn, {x:stage.stageWidth*0.5, y:stage.stageHeight*0.5}),
	new AddChild(container, btn)
);

mySP(青い四角)の horizontalExecutor, verticalExecutor がそれぞれ CommandExecutorインスタンスで、
DoExecutorコマンドを使って CommandExecutorインスタンスを実行させてます。

コマンドを使わずにCommandExecutorインスタンスを実行させる場合は、

mySP.verticalExecutor.execute(new Event("vertical"));

です。

それぞれ引数にEventインスタンスが渡されてるんですが、ここがポイントとなります。

アニメーションをしてる本人、青い四角のクラス MySprite1.as には、以下のように書いてます。

private function _onAddedToStage(e:Event):void
{
	removeEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
	addEentListener("vertical", _onVertical);
	addEventListener("horizontal", _onHorizontal);
};
private function _onHorizontal(e:Event):void
{
	horizontalExecutor.addCommand(
		new DoTweener(this, { x:stage.stageWidth - width, time:1, transition:"easeOutExpo" } )
	);
};
private function _onVertical(e:Event):void
{
	verticalExecutor.addCommand(
		new DoTweener(this, { y:stage.stageHeight - height, time:1, transition:"easeOutExpo" } )
	);
}

なんとなく解ってもらえるかと思いますが、MySprite1インスタンス自身が、”vertical”, “horizontal” というイベントを聴いていて、それぞれのハンドラ内で、CommandExecutorインスタンス.addCommand();しています。

これだけです。

あら便利！

利点

この方法でアニメーションを実装する利点としては、個人的には以下のことがあると思います。

1. アニメーションロジックを、アニメーションするクラス自身に書けて、しかも隠蔽できる上に、更にシーン遷移と同期もできる。
2. アニメーション順番の入れ替えが簡単に。
3. イベントタイプ名を解りやすく付けられれば、シーンオブジェクトを見ただけでおおよその流れが把握できる

という感じでしょうか。

個人的には、１つ目の恩恵がかなり大きいです。
僕の管理感覚では、動く本人に動くロジックが書いてあるのはとてもわかり易いです。

以前はシーンオブジェクトにみっしりアニメーションを書いてて、共通のアニメを他のシーンオブジェクトでも使いたいとなった時は、カスタムコマンド化かコピペをしてたんですけど、前者は管理ファイルが増えるし、コピペは変更が面倒になるしで。。

どのシーンオブジェクトからもアニメーションを１行で簡単に呼び出せるのは、かなり重宝してます。

気をつけるべき点

端的に言うと、複数のアニメーションをこの方法でつける場合、各アニメーション同士が干渉しないかどうかを確認することです。

「アニメーションが干渉する」っていうのは僕の造語なんですが、要は、同時に実行しても、それぞれのアニメーションの結果がキチンと見た目に反映されてる状態であることを確認しというた方がいいよ、って事です。

例えば、サンプルファイルの水平アニメーションをしてる部分を、以下のように書き換えたとします。

private function _onHorizontal(e:Event):void
{
	horizontalExecutor.addCommand(
		new DoTweener(this, { y:0, time:1, transition:"easeOutExpo" } )
	);
};

垂直方向の座標ゼロの位置に移動するアニメーションにしたのですが、実行結果を見ればわかりますが、グレーのボタンを押したときの見た目の結果に、ゼロ位置へ移動は見て取れません。

当たり前ですがw

こういう状況は、アニメーションが複雑になっていくと結構ハマるポイントになってしまうし、アニメのタイミングによってはシーン遷移が終わらないという状況にもなりえるので、気をつけましょう。

ポイントは、同次元（同軸）のアニメーションは、同じCommandExecutorインスタンスに管理させることな気がします。

終わりに

んな感じで、アニメの管理にCommandExecutorを使うと便利よー話を、覚書。
こんな便利なクラスは、Progressionの裏で暗躍させておくだけでは勿体無い！

という事で、積極的に使っていって、少しでも早く家に帰れるようになれれば、後はやることは１つ。

明るい、家族計画！！！（言いたいだけ）