PNG・GIFのパレットを読み込んだり書き換えたり他

このまえ作ったドット絵用ビューアを更新しました。更新内容は主に

  • アニメーションGIFの対応
  • PNG/GIF画像のパレット読み込み・書き換え

の二つです。実際に動いているのは、

ドット絵ビューア例

みたいなかんじです。

AS3のLoader(今まで使っていたもの)だと、PNGやGIFなどの画像を読み込んで表示がお手軽にできるのですが、アニメGIFを読み込んでも最初のフレームしか表示できなかったり、表示オブジェクトにしかならないので、パレットの情報などは得られません。

ちゃんと画像として読み込むには、URLLoaderを使って画像データをバイナリとして読み込み(ここまでは簡単)、さらにバイナリを仕様に基づいて分解してBitmapなどに変換してやる必要があります。

アニメGIFに関してはGIF Player(下のほうにVersion 0.2があります。)なるアニメGIFをバイナリから読み込んで表示できるライブラリがあったので、苦労せずして読み込めるようになりました。もっと早く気づいていればよかった。少しソースをいじれば、GIFのデコーダからパレットや背景色情報なども取得できます。

PNGに関してはデコーダクラスは今のところない(そもそもLoaderで表示できるので普通は必要ない)ようなので、

あたりを参考に、パレットを読み込んでいます。パレット形式のほかにも、フルカラーPNGの対応などを考えると大変なので、ビューア上でのPNG表示はLoaderに任せて、パレット・透過の色情報だけ取得しています。なので、そんなに難しくありません。

で、GIFもPNGもBitmapDataとパレットの情報に変換できたので、ついでにパレットの色の書き換えも実装してみました。ただし、擬似的なものでちゃんとしたパレットの変換にはなってません。だいたいこんな感じ

// 画像(BitmapData)の中の色(oldColor)を色(color)に変換する
private function transColor(b:BitmapData, oldColor:uint, color:uint):void 
{
  b.threshold(b, b.rect, new Point(), '==', oldColor, color);
}

これだと、パレット番号に関わらず同じ色のものが変換されてしまうのでよくないです。色変換前のBitmapDataとパレット情報を保存しておいて、うまくやればちゃんとパレットでの変換になるとおもいますが、そもそもビューアであってエディットツールではないのでそこまでこだわる必要も無い気がしたのでこの辺でやめておきました。(この辺で力尽きたというのもあります)

ドット絵ビューアの今後の展望

ここまできたらもはや編集出来るようにしてもいい気もしますが、やっぱり既存のドット絵エディタツールには敵う気がしないのでビューア機能を強化したいところです。あんまり機能つけすぎて重くなってもしょうがないし。

というわけで、気が向いたらそのうち実装するかもしれないアイデアメモ

  • パレットデータの保存(EDGEの.pal形式とか)
  • 網掛け表示
  • アニメーション表示いろいろ(並べて・重ねてetc...)