プレレンダリングして処理負荷の高いアニメーションを滑らかに

Marimo

今回はFolkした作品の紹介。wonderflに投稿されていたtail_yさんのマリモ(こちらの作品)が気持ちよかったので、Folkしてアニメーションさせていただきました。

技術的なメモ

アニメーションといっても、マリモ1回描写するだけで1秒前後のパフォーマンスがかかるので、とてもリアルタイムに処理しきれません。そこでプレレンダリングしてみることにしました。

プレレンダリングとは、時間のかかる描写処理をビットマップとしてあらかじめキャプチャしておく手法のことで、ビットマップにしてしまえば数倍の速度向上が見込めます。具体的には次の記事で紹介しているので、詳しくはそちらをご覧ください。

[Flashの高速化を試す]BitmapDataを配列に格納することで2〜3倍の高速化

ProgressionのCommandクラスでプレレンダリング

Flashには1秒間のスクリプト実行時間が15秒を超えるとエラーアラートが表示されるのですが、プレレンダリングといっても例外ではなく15秒を超えるとエラーになります。

ポイントとしては1回のレンダリングが1秒前後なので、1回のレンダリングを終了すると非同期処理を挟んで次のフレームの処理に回してみました。

考え方はそんなところで具体的な実行はこんな感じです。

var com:SerialList = new SerialList()
com.addCommand(
	// プレレンダリングの処理
	function():void{
		for(var i=0; i<回数; i++){
			this.parent.insertCommand(
				function(){
					//レンダリング処理
				},
				new Wait(50) //ここが非同期処理
			)
		}
	},
	// プレレンダリング終了後
	function():void{
		// ご自由に
	}
)
com.execute()

フレームワークのProgressionのコマンドという機能を使えばこのような非同期処理も同期処理のように記述できるので、とても扱いやすくてオススメです。

for文の箇所でプレレンダリングのタスク(コマンド)を作り、プレレンダリングが終了してから通常の処理に戻るわけです。new Wait(50)の箇所が非同期処理の部分で、Waitコマンドは内部的にTimerを使われているので、同一フレームでのスクリプト処理を回避することができます。

とりあえず貼り付けておく

ちなみにパラメーターは調整していますが、マリモの描写処理のロジックなどはオリジナルと変わりません。アニメーションさせると、もっと空気の摩擦によるフサフサな質感があらわれると思ったのですが、いまいち表現できていませんね。そこは私の力量不足です。もしよかったらどなかた挑戦してみませんか?

<追記>
twitterでいただいたアドバイスをもとに調整していたら、いい感じな質感に近づいてきました。フレームレートを高めたHigh-FPS版を用意しましたが、時間のある方はぜひそちらをご覧ください。

関連記事

投稿者 : 池田 泰延

BookMark

ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加