doope!

これまでのHTMLからローカルDBとの連携やJavascriptやメディアファイルとの更なる親和性で大きく変化を遂げる事になるHTML5、これまでも3Dでテトリスを実現してみたり、GoogleがQuake IIをWebGLを併用して高フレームレートで動かしたり、海外ではすでにMMORPGを作るためのエンジンまで登場し、ゲームのプラットフォームとしての可能性も模索されています。

そんな中、jhuckaby氏がかつてのLucasArtsのMark J. Ferrari氏が開発したThe Secret of Monkey IslandやLoom等のSCUMエンジンでのアニメーションや、昔のゲームで疑似アニメーションの手法として多く利用されたカラーサイクル技術をHTML5で実装してしまいました。まずはこちらのデモ（サウンド有り/サウンド無し）でご確認下さい。

このデモは640×480ピクセルのアルファ無し256色で作成されており、画像は全てアートワークのピクセル情報が収められたJSONデータを元に、Javascriptによって1点1点リアルタイムに描画されています。また、オプションで表示されるカラーパレットからも判る通り、イメージで見られるアニメーション効果はパレットアニメーションにより実現されています。

さらに驚くべきはこれが結構な高FPSで実行されている事で、筆者のC2Dの3GHzPCでも40FPS程度の動作が可能になっています。Javascriptで640×480ピクセルのイメージを描画するには1フレーム辺り30万7200ピクセルを描画する必要があり、さらにこれが32bitカラー空間（画像は8bit画像ですが、多くのPCは32bitカラーで動作）で動作する事を考えると配列のサイズはかなり巨大な物となり、いくつかのブラウザではまったく満足に描画出来なかったとの事。

これをjhuckaby氏は最初の配列ロード時にアニメーションするピクセルを前もって演算し、それらのXY座標を別の配列に格納する事でアニメーション部分だけのカラーサイクルを実現したそうです。こうやって圧縮されたJSONデータはgzip圧縮でブラウザに転送され、1イメージ辺り100kb程度のデータでアニメーションが実現されています。これによりiPhone 3GSなどでも実用に耐えるFPSで動作が可能との事で、近年のモバイルゲームやWebブラウザ上のカジュアルゲームで十分に役立ちそうな技術に仕上がっていると言えそうです。

なお、ソースも配布されており、描画部分のHTML5関連のソースだけでなく、DOSで作成されたAmigaのIFFとILBMファイルからのピクセルコンバーターのソースも含まれています。興味のある方は一度中身を確認してみてはいかがでしょうか。