はじめまして。ひやめし(Hiyameshi_8bit)です。
はじめての技術ブログになりますので、自己紹介含め手探りで記述していきます。
普段何をやっている人間か
肩書きとしては「マルチクリエイター」になるのでしょうか。
一応メインの活動としてはYouTube等で初代ゲームボーイ実機を使用した音楽の8bitアレンジ等をしています。
ゲームボーイの波形メモリに歌わせる"歌うゲームボーイ"なんかが代表的かと思います。
また、人によってはコウメ界隈の1人と言った方が伝わるかもしれませんね。
ゲームボーイに閉じ込められてしまったコウメ太夫
ポケモンの世界に閉じ込められてしまったコウメ太夫
いずれにせよ、レトロゲームの音楽系クリエイターって感じです。
ドット絵変換ソフト『NeSprite』
自分のクリエイター活動を効率化するために「NeSprite」というドット絵変換ソフトを開発していたりもします。
これの動画変換用Aeプラグインの「NeSprite for AfterEffects」は、アニメ制作会社やゲーム開発会社にも採用されている一番のヒット作だったりします。
NeSprite
今回作ったのは画像のボタンにある「Neural Palette」というドット絵に特化した減色AIになります。
技術的に見る「ドット絵の色」
ドット絵の“色”は、通常のフルカラー画像と違い、あらかじめ定義された限られた色の中から選んで使う色のことを指します。これを「パレット」と呼びます。
例：
ファミコン：最大25色程度
ゲームボーイ：4階調（2bit）
技術的には「1ピクセル = インデックス番号」で、画像の中には「このピクセルはパレットのn番の色」という記述で表現されます。
ドット絵は色数が制限されたものですので、避けて通れないのが「減色」という訳です。
従来の減色手法
| 手法名 | 特徴・用途 |
|---|---|
| K-means | 高画質。AIでも使われる。クラスタリングで柔軟に減色。 |
| Median Cut | 定番。画像編集ソフト（Photoshop等）でも採用。 |
| Octree | 高速＋そこそこ高品質。リアルタイム用途にも。 |
| Popularity | 超高速。シンプルな画像向け。色が偏るのが弱点。 |
ドット絵変換に良く用いられるのは「K-means法」になります。
いずれも、減色する画像ソースの元の色に依存しており、場合によって"平均化された薄い色"や"過剰な色"になりやすい傾向があります。
ちなみにNeSpriteではどれとも違う「あらかじめ使う色(パレット)」を定義しておき、近似色に置き換えるという手法を採用しています。
今回作った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色への減色程度では画像の色味が損なわれないことが、下の画像から分かると思います。
②trainB
palettes_pix/：その画像を減色したドット絵の使用パレット（15色）
ペアの画像がドット絵になった時のパレット(15色)をテキストファイルに記述したものを使用します。
なお、ペアになるtrainAの色分布が狭い時(色数が元々少ない)場合はドット絵になった時も色数が少なくなるということも考慮して学習してくれることを期待して、色数が少ない場合15色までの残りの色を緑(0,255,0)で埋めるようにしました。
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形式でログ出力（可視化や分析用）
学習結果
・学習は順調に進行
→ 序盤で急激に損失が減少し、その後安定
・発散や異常はなし
→ 損失が一貫して減少し続けている
・過学習の兆候なし
→ 後半も損失が低く安定している
・十分に収束している
→ 1000エポック以降はほぼ横ばい
K-means減色とNeural Paletteを使った減色の比較
GPT4oで背景を透過したイラストを生成➡背景を緑(0,255,0)に塗りつぶした画像を作成
元画像１
K-means(16色) | Neural Palette(15色+緑)
元画像2
K-means(16色) | Neural Palette(15色+緑)
元画像3
K-means(16色) | Neural Palette(15色+緑)
輪郭線の黒がちゃんと保持されていることや、被写体の色にちゃんとパレットの色が寄っていることから、ランダムにRGB値が生成されているだけということはなさそうなのが確認できます。
色の忠実度で言えば当然K-means法に軍配が上がりますが、このモデルは『ドット絵にしたときの最適な色を推定する』のが目的なので、これは望んだ結果でもあります。
比べると、Neural Paletteの方がメリハリのあるパレットになっていることが分かります。
これはK-means法では得られない効果です。
今後の課題とまとめ
現状のNeSpriteの仕組みでは、最適なパレットを生成出来ても近似色への置換という仕組みを採用していることで、配色が適切に実行できません。
ですので、配色用のAIも作れたら良いなぁと思っています。
また、このモデルでは15色への減色しかできません。
この色数をユーザーが指定してパレットを生成出来たらいいなぁと思っています。
AIを活用した次世代型の減色手法ということで、結構面白い試みだったと思います。
推論が高速なので、気に入ったパレットが生成されるまでポチポチやる使い方になりそうです。
インデックス0はアルファ用に緑(0,255,0)を後から追加しています。
