2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ドット絵変換時の最適なパレットを生成するAIモデルを作った話【減色AI】

Last updated at Posted at 2025-06-07

今回作ったのは「Neural Palette」というドット絵に特化した減色AIになります。

技術的に見る「ドット絵の色」

ドット絵の“色”は、通常のフルカラー画像と違い、あらかじめ定義された限られた色の中から選んで使う色のことを指します。これを「パレット」と呼びます。

例:

ファミコン:最大25色程度
ゲームボーイ:4階調(2bit)

技術的には「1ピクセル = インデックス番号」で、画像の中には「このピクセルはパレットのn番の色」という記述で表現されます。

ドット絵は色数が制限されたものですので、避けて通れないのが「減色」という訳です。

従来の減色手法

手法名 特徴・用途
K-means クラスタリングで柔軟に減色。
Median Cut 定番。画像編集ソフト(Photoshop等)でも採用。
Octree 高速+そこそこ高品質。
Popularity 超高速。シンプルな画像向け。色が偏るのが弱点。

ドット絵変換に良く用いられるのは「K-means法」になります。

いずれも、減色する画像ソースの色に依存しており、場合によって"平均化された薄い色"や"過剰な色"になりやすい傾向があります。

今回作ったAI(Neural Palette)での狙い

ドット絵制作において、「パレットを自分で作る or 選ぶ」という工程が毎回発生します。
これはある程度のセンスを要し、初心者にとってなかなか難しい工程になります。

この画像をドット絵にした時はこういうパレットになる」という減色のセンスを学習することで、AIを使った次世代型減色手法をドット絵変換に取り入れるのが狙いです。

NeSpriteのパレットを使った変換とも相性がいいというのもありますね。

機械学習の流れ(Neural Palette)

今回の減色AI「Neural Palette」は、通常イラストの色分布(パレット)を入力として、
それに合うような15色のドット絵用パレットを出力するモデルです。

1.データセットの準備

データセットでは色の配列が記述された.txtファイルのペアを使用します。
(600ペア程)

①trainA
palettes_ill/:イラスト画像の色を抽出したパレット(最大64色)

画像をK-means法で64色に減色した際の「色の配列」をテキストファイルに記述したものを使用します。
なお、被写体部分の色のみを学習させるという意味で、透過色(背景)は緑(0,255,0)で塗りつぶし、計算からは除外されるように設定しました。

64色への減色程度では画像の色味が損なわれないことが、下の画像から分かると思います。

data.png

②trainB
palettes_pix/:その画像を減色したドット絵の使用パレット(15色)

ペアの画像がドット絵になった時のパレット(15色)をテキストファイルに記述したものを使用します。
なお、ペアになるtrainAの色分布が狭い時(色数が元々少ない)場合はドット絵になった時も色数が少なくなるということも考慮して学習してくれることを期待して、色数が少ない場合15色までの残りの色を緑(0,255,0)で埋めるようにしました。

pixel.png

pix2pix(画像→画像)に倣い、それぞれファイルを分けてtxt2txt(配列→配列)となるようにペアにしました。
なお、どちらの配列に対してもHSVソートを実行し、ある程度規則的な並びになるよう調整を行いました。

2.データの前処理

種類 フォルダ 中身 処理後の形
入力 palettes_ill/ 最大64色のRGBテキスト [192]ベクトル(64×3)
出力 palettes_pix/ 最大15色のRGBテキスト [45]ベクトル(15×3)

色データを「数値ベクトル」として扱える形に変換し、AIにとって学習可能なデータセットにします。

3.モデル定義( PaletteMapper )

このAIモデルは、イラストのパレット(64色)を入力として、ドット絵用の15色パレットを出力するシンプルなニューラルネットワーク(MLP)です。

モデルの構成

レイヤー 内容 出力サイズ 説明
入力 64色 × RGB → ベクトル化 192 パレットを1本のベクトルに変換
中間層① 全結合 + ReLU 256 色の特徴を抽出
中間層② 全結合 + ReLU 128 色の関係性を学習
出力 全結合 + Sigmoid 45 15色 × RGB(0〜1に正規化)

出力は [0〜1] の値なので、RGBとして使うために最終的に ×255 して丸めます。
これで「イラストに合った減色パレット」が得られる仕組みです。

4.学習設定

学習に使用するパラメーターは以下の通りです。

項目 内容
損失関数 MSE(Mean Squared Error)
最適化手法 Adam
学習エポック数 1500
バッチサイズ 32

5.学習ループとモデル保存

・各エポックごとに損失を記録

・損失が最小だった時のモデルを「ベストモデル」として保存

・最終的なモデルも別に保存

・学習の過程で得られた損失値を CSV形式でログ出力(可視化や分析用)

学習結果

loss_curve.png

・学習は順調に進行
→ 序盤で急激に損失が減少し、その後安定

・発散や異常はなし
→ 損失が一貫して減少し続けている

・過学習の兆候なし
→ 後半も損失が低く安定している

・十分に収束している
→ 1000エポック以降はほぼ横ばい

K-means減色とNeural Paletteを使った減色の比較

GPT4oで背景を透過したイラストを生成➡背景を緑(0,255,0)に塗りつぶした画像を作成

元画像1
src02.png

K-means(16色) | Neural Palette(15色+緑)

001.png

元画像2
src03.png

K-means(16色) | Neural Palette(15色+緑)

002.png

元画像3
src01.png

K-means(16色) | Neural Palette(15色+緑)

003.png

輪郭線の黒がちゃんと保持されていることや、被写体の色にちゃんとパレットの色が寄っていることから、ランダムにRGB値が生成されているだけということはなさそうなのが確認できます。

色の忠実度で言えば当然K-means法に軍配が上がりますが、このモデルは『ドット絵にしたときの最適な色を推定する』のが目的なので、これは望んだ結果でもあります。

比べると、Neural Paletteの方がメリハリのあるパレットになっていることが分かります。
これはK-means法では得られない効果です。

今後の課題とまとめ

最適なパレットを生成出来たとして、配色はどうするの?という課題が出てきます。
この配色のAIモデルを作るのが今後の課題です。

また、このモデルでは15色への減色しかできません。
色数をユーザーが指定してパレットを生成出来たらいいなぁと思っています。

AIを活用した次世代型の減色手法ということで、結構面白い試みだったと思います。

推論が高速なので、気に入ったパレットが生成されるまでポチポチやる使い方になりそうです。
インデックス0はアルファ用に緑(0,255,0)を後から追加しています。

nesprite.gif

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?