画像生成AIで作った微妙なドット絵風画像をゲームで使える形式に直すウェブアプリ「Unfaker」

画像生成AIを使うと簡単にドット絵風の画像を作れますが、高品質な画像生成AIであっても「色がにじむ」「線が曲がる」「完全な格子状にならない」といった問題が発生します。そんな問題を解決するべく開発されたJavaScriptライブラリが「unfake.js」で、ドット絵風画像の各種問題をサクッと解決してゲーム開発などに使える形式に変換できます。

GitHub - jenissimo/unfake.js: Fix AI pixel art and vector images right in your browser
https://github.com/jenissimo/unfake.js

画像生成AIで作られたドット絵風画像の例が以下。パッと見るとドット絵として完成しているように見えますが、格子模様に当てはめてみると完全に格子状になっておらず線も曲がっていることが分かります。こういった画像を補正できるのがunfake.jsです。

unfake.jsはJavaScriptライブラリとして公開されています。簡単に使えるデモサイトも以下のリンク先で公開されているので、実際に使ってみます。

Unfaker by jenissimo
https://jenissimo.itch.io/unfaker

まず、以下の写真をもとにドット絵風画像を作成します。

Geminiに頼んで、Nano Banana Proを使ってドット絵風画像に加工してもらいました。

できあがったドット絵風画像が以下。クリックすると縮小前の画像を確認できます。

拡大してみると、にじみが発生していることや、線が曲がっていることが分かります。また、ドット絵は画像全体の色数が少なくなるのが特徴なのですが、この画像には3万8680色もの色が使われています。

生成した画像をデモサイトの画像入力欄にドラッグ＆ドロップ。

「Process」をクリック。

画像の解像度が高すぎたようで、エラーメッセージが表示されました。

画像の横幅を560ピクセルに縮小して、もう一度ドラッグ＆ドロップ。

「Process」をクリック。

数秒で補正後の画像が表示されました。

下方向にスクロールするとカラーパレットを確認可能。色数は16色に抑えられています。

「Copy to Clipboard」をクリックすると補正後の原寸大画像をクリップボードにコピー可能で、「Download PNG」をクリックすると原寸大画像をダウンロードできます。また、「Download Upscaled」をクリックすると拡大画像をダウンロードできます。

ダウンロードした原寸大画像が以下。左目がつぶれてしまっていますが、かなり高品質なドット絵になりました。画像生成の時点で何度か生成を繰り返せば、さらに品質の高いドット絵を選ぶことができます。

拡大画像が以下。

ズームして細部を見てみると、線は完全にまっすぐになり、色のにじみが消え、格子状になっていることが分かります。

デモサイトでは補正後の色数を16色から256色の範囲で指定可能です。

なお、画像生成AIとunfake.jsを組み合わせてキレイなドット絵を生成できるComfyUI向けのワークフローも公開されています。

GitHub - tauraloke/ComfyUI-Unfake-Pixels: Transform a fake pixel generation to a pixel image
https://github.com/tauraloke/ComfyUI-Unfake-Pixels/