Windows版のImageMagickを使い、透過PNG画像を単色で塗りつぶして、クリッカブルマップ用の領域画像(パレット画像)を作成します。

1色の場合

画像全体を青色で塗りつぶし、パレット形式のpng8ファイルで出力する

1

convert.exe hoge.png -fill blue -colorize 100 -type Palette png8:hoge_p.png
入力画像(hoge.png)


出力画像(hoge_p.png)


※出力画像をPictBearで開いてパレットを確認してみた様子


→ ちゃんとパレットが2色になってますね！

2色以上の場合

1色ずつ領域画像を作成し、最後に合成します。①領域画像の作成

1
2
3

convert.exe hoge1.png -fill blue   -colorize 100 -type Palette png8:hoge1.pass1.png
convert.exe hoge2.png -fill red    -colorize 100 -type Palette png8:hoge2.pass1.png
convert.exe hoge3.png -fill yellow -colorize 100 -type Palette png8:hoge3.pass1.png

②背景を透過する

1
2
3

convert.exe hoge1.pass1.png -alpha set -background none -channel RGBA -fill "#00000000" -draw "matte 1,1 floodfill" hoge1.pass2.png
convert.exe hoge2.pass1.png -alpha set -background none -channel RGBA -fill "#00000000" -draw "matte 1,1 floodfill" hoge2.pass2.png
convert.exe hoge3.pass1.png -alpha set -background none -channel RGBA -fill "#00000000" -draw "matte 1,1 floodfill" hoge3.pass2.png

③合成するベース画像を生成する

1

convert.exe -size 800x600 xc:black hoge_p.png

④ベース画像へ合成する

1
2
3

composite.exe -compose over hoge1.pass2.png hoge.png hoge_p.png
composite.exe -compose over hoge2.pass2.png hoge.png hoge_p.png
composite.exe -compose over hoge3.pass2.png hoge.png hoge_p.png

⑤合成後のベース画像を再度パレット形式に変換し完成

1

convert.exe hoge_p.png -type Palette png8:hoge_p.png
入力画像(hoge1.png、hoge2.png、hoge3.png)




出力画像(hoge_p.png)


※出力画像をPictBearで開いてパレットを確認してみた様子


→ ちゃんとパレットが4色になってます！

参考URL