キャンバス上のループ色

[      HTML5]



キャンバス(<canvas>)およびモバイルアプリケーションへの関心は、8ビット画像の旧美術学校の復活につながります。 エフェクトゲームのJoe Huckabyは、色のループをいじくり回しました。
90年代のカラーループを覚えている人はいますか? この技術は、ループカラーシフト法を使用して興味深い壮観な効果を達成するために、その時代の8ビットビデオゲームでよく使用されていました。 当時、ビデオカードは一度に256色しか表示できなかったため、選択した色のパレットが使用されていました。 しかし、プログラマーは自分の裁量でこのパレットを変更することができ、画面上の色はすぐに変わり、それに合わせて調整されました。 これはすぐに発生し、文字通り追加メモリを必要としませんでした。
ここでも巧妙な最適化が行われます-各フレームのシーン全体をクリアして再描画する代わりに、Joeは変化するピクセルのみを更新します。
ブラウザーで迅速なフレーム変更を実現するために、エンジンの最適化をやや狂気に調整する必要がありました。 32ビットのRGBキャンバスにインデックス付きの色で640x480の画像を表示すると、JavaScriptを使用して各フレームで307200ピクセルをクロールして描画することになります。 これは膨大な配列のバイパスであるため、一部のブラウザーは単純に処理できません。 画像が最初に読み込まれたときに前処理を行い、アニメーション化された色(つまり、パレットのループサブセットに含まれる色)を参照するピクセルを収集することで、それらの遅延を克服しました。 これらのピクセルの座標は別の(より小さい)配列に格納されるため、画面上で変更可能なピクセルのみが更新されます。 この最適化のトリックは非常にうまく機能したため、iPhone 3GSおよびiPadでアニメーションは非常に高速で回転します。



All Articles