ドット絵の整理

単独ピクセル・小さな塊・1ピクセルの穴・アンチエイリアスの残りを整理。

ドット絵の整理とは、縁がくっきりして色数の限られたスプライトにそぐわないものを取り除くことです。縁のアンチエイリアスの中間色、孤立したピクセル、小さな塊、1ピクセルの穴、輪郭のすき間が対象です。Nerulioのピクセルラボはすべての候補をまず表示して数え、チェックしたものだけを変えます。アンチエイリアス除去は中間色のピクセルを両側のパレット色のどちらかに合わせるので、シルエットは動きません。入力は1倍のPNGフレーム、出力は整理したPNGフレームと共通のパレット1つです。

画像をここにドロップ複数のファイルをまとめて処理できます

アップロードなし · この端末で処理

何が汚れで、それぞれどう直すか

アンチエイリアスはイラストには役立ちますが、スプライトには害になります。輪郭と塗りが混ざった縁のピクセルはどちらでもない新しい色で、16色パレット用のテストフレームには271色ありました。そのピクセルを最も近いパレット色に合わせるだけでは足りません。暗い輪郭とオレンジの塗りの中間色が、無関係な茶色に一番近いこともあるからです。ピクセルラボは、そのピクセルが乗っているOklabの線分をつくる隣の色の組のうち近い方に合わせ、そうした組がないときだけ全体で最も近いパレット色を使います。

孤立ピクセル・塊・穴は、同じパレット色がつながった領域（4方向の連結）を1回走査して見つけます。孤立ピクセルは1ピクセルの領域、小さな塊は設定した大きさより小さい領域、穴は画像の端に届かず不透明ピクセルに囲まれた透明な領域です。それぞれ周りの色で埋め、1回の走査で3つの一覧を作るので件数が食い違いません。

輪郭のチェックは、4つの隣のうちちょうど1つだけがシルエットの外にある直線の縁だけを見ます。角では太さを1つに決められないので飛ばします。自動修正はすき間を埋めるだけで、二重の輪郭を細くはしません。ピクセルを消すとシルエットが動くからです。

アンチエイリアスのピクセル: そこで接する2つのパレット色の中間の色を持つ縁のピクセル。
孤立ピクセル: 1ピクセルだけの領域。4つの隣に同じ色がない。
Oklab: 知覚にもとづく色空間。この空間の距離はRGBより見た目の差に近くなります。

例：アンチエイリアスのかかった48 × 48のフレーム8枚

なめらかに描いた弾むボールを、全フレーム共通のパレット1つで整理しました。

入力             8フレーム、異なる色271（縁にアンチエイリアス）
パレット         16色、8フレーム全体からまとめて抽出

アンチエイリアス除去、しきい値0.08（Oklabの距離）
  色数           271 → 16、書き出した色はすべてパレット内
  アルファ       0ピクセル変化 — シルエットは動いていない

輪郭と塗りの中間のピクセル → 2色のうち近い方、3つ目の色には決してならない

判定はすでに書き換えたピクセルではなく元のピクセルから読むので、画像を走査する順番で結果が変わることはありません。

結果の確認

チェックする前に件数を読みます。孤立・塊・穴・アンチエイリアスの候補が別々に表示され、画像上でハイライトされます。
書き出したあと色を確認します。フレームのすべての色がパレットの中にあるはずです。
チェックの段階で整理前後のシルエットを比べます。形が同じはずです。

トラブルシューティング

症状	考えられる原因	確認方法	対処
ディザーをかけた部分が孤立ピクセル数百個と報告される	ディザーはわざと1ピクセルずつ置いた模様	変換の段階でディザーがオンか確認	整理の前にディザーを「なし」にするか、孤立ピクセルにチェックしない
目や1ピクセルのハイライトが消えた	孤立ピクセルの候補で、孤立ピクセルにチェックしていた	適用前にハイライトされた候補を見る	孤立ピクセルのチェックを外すか、元に戻して（Ctrl+Z）そのピクセルを手で直す
縁のピクセルが反対側の色になった	しきい値が広く、どちらの組にも属さない色まで拾った	アンチエイリアスのしきい値（既定0.08）を下げてみる	しきい値を下げるか、ドット絵エディタで手直し
修正後も輪郭が二重	修正はすき間を埋めるだけ。細くするとシルエットが動く	輪郭のレポートに二重の区間の数が出る	必要な所だけ手で細くする
拡大や生成の絵で、整理するにはノイズが多すぎる	まだ1倍になっていない	チェッカーが整数倍率かサイズ変更を報告する	先に1倍復元で縮めてから整理

ほかの方法

方法	こんなときに向いています
Studioのピクセル作業画面の整理パネル（拡大・生成された絵向け）	絵が1倍でないとき。グリッドを取り直し、縁のにじみを一度に取り除いて、編集を続けられる新しいスプライトを作ります。
どのドット絵エディタでも手作業で	フレームが数枚で、すべてのピクセルを自分で決めたいとき。確認すべき自動の候補はありません。
パレット抽出	形は変えずに、多くのフレームで共有するパレットが1つほしいだけのとき。

この方法の限界

輪郭の問題で自動修正するのはすき間だけで、二重のピクセルは報告するだけで消しません。
フレームの合計面積が4メガピクセルを超えると、件数は表示中のフレームだけを数えます。

バージョンと出典

数値はChromiumでのピクセルラボのブラウザテストで、書き出したファイルをページの外で開き直して測ったものです（Firefox・WebKitは未実行）。