PNG(8ビットカラーパレット形式)を使ってJavaScriptでパレットアニメーションさせてみた - Qiita

はじめに 昔、絵本型のカートリッジの幼児向けゲームを作るお仕事をしているときに、パレットを操作してアニメーションなんかをさせてました。 主に点滅させたり、フェードアウトさせたりなんですが・・・ それをWebでできないかなー？あわよくばゲームで使えないかなー？というのがきっかけです。 とりあえず動画のようにパレットの操作ができたので書いておきます。 やってることの概要 やってることはそんなに難しくありませんが、ちょっと面倒です。 PNGをバイナリとして読み込み保持します。 PNGが8bitカラーでかつパレットを持っているか確認します 読み込んだPNGのパレットを書き換えて、dataURLに変換します。 ImageオブジェクトにdataURLをセットします。 その結果をCanvasに描画します 要はPNGを書き換えてるだけです。 詳細 3つに分けて解説します。 PNGの読み込み パレットの操作