canvas でトランジションをしたら

Javascript で 2D ゲームを作りたいと思ったらいろんなことができるようになってきたけど, 画面トランジションは躊躇するところ. canvas 要素の ImageData を使えばピクセル操作ができるので, 原理的には可能だけど画面全体でやったら重そう.

と思ってたけど実際試してみたことないなあと思ってやってみました. 今時間ないから詳細書きませんが, Safari で試したところによると, 毎フレーム 640x480 の ImageData を 2 つピクセル単位で合成して別の ImageData に書き, それを canvas に入れる, という操作はやっぱり重いみたいで, 手元の Macbook で 20 fps ちょいまで落ちました.

ちなみにやってみたのはフェードするカーテントランジション. ユニバーサルトランジションならもう一枚ルール画像の ImageData を読みながらになるので, さらに重くなりそう. 逆にフェードカーテンがやりたいだけなら, 実際にはフレームごとに書き換える必要があるのは画面の一部だけで, 部分更新でやればそこそこの速度を保てました (フェードの幅を 64 pixel にしたら 50 fps くらいは保てた). 低スペック環境でもそこそこ動いてほしいという場合はこっちも厳しいかもしれないけど.

canvas のピクセル配列は一般の配列より (大抵の環境で) 少しだけ速いらしいです. 整数型固定とか, いろいろ制約が多いので. あと, こういうことやるときには効率が重要ですが, Javascript の場合現状は手動の最適化がかなり効くらしいです. スコープチェーンをできるだけたどらないようにするとか, その手の.

とはいっても本当にバリバリ動くゲームを作るなら今後は WebGL ですよね.