ドット絵クリーンアップ · アンチエイリアスとはみ出しピクセルの除去
すべてまず候補として報告します。画像上に表示して数え、チェックしたものだけを変更。アンチエイリアス除去は、間にあるピクセルを両側のパレット色のどちらかに合わせます。
ドット絵の整理とは、縁がくっきりして色数の限られたスプライトにそぐわないものを取り除くことです。縁のアンチエイリアスの中間色、孤立したピクセル、小さな塊、1ピクセルの穴、輪郭のすき間が対象です。Nerulioのピクセルラボはすべての候補をまず表示して数え、チェックしたものだけを変えます。アンチエイリアス除去は中間色のピクセルを両側のパレット色のどちらかに合わせるので、シルエットは動きません。入力は1倍のPNGフレーム、出力は整理したPNGフレームと共通のパレット1つです。
- PNG frames測定確認· Pillow
- Palette測定確認· re-import
- pixel-lab.json未検証
何が汚れで、それぞれどう直すか
アンチエイリアスはイラストには役立ちますが、スプライトには害になります。輪郭と塗りが混ざった縁のピクセルはどちらでもない新しい色で、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つ目の色には決してならない判定はすでに書き換えたピクセルではなく元のピクセルから読むので、画像を走査する順番で結果が変わることはありません。
できること
- アンチエイリアス除去：2つのパレット色の間のピクセルを、その組の近い方に合わせます。元のピクセルで判定するので走査順で結果は変わりません。
- はみ出しピクセル、小さな塊（サイズ調整可）、1ピクセルの穴を1回の連結成分走査で検出。
- 輪郭チェック：直線の縁のすき間・二重・太さ。自動修正はすき間を埋めるだけ。
- アルファはしきい値を設定しない限り変えず、設定しても0か255に丸めるだけ。
使い方
- フレームをドロップ。
- 候補の件数を読み、表示されたピクセルを確認。
- 必要な修正（アンチエイリアス・はみ出し・塊・穴・輪郭のすき間）にチェック。
- 整理したフレームを書き出し。
結果の確認
- チェックする前に件数を読みます。孤立・塊・穴・アンチエイリアスの候補が別々に表示され、画像上でハイライトされます。
- 書き出したあと色を確認します。フレームのすべての色がパレットの中にあるはずです。
- チェックの段階で整理前後のシルエットを比べます。形が同じはずです。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| ディザーをかけた部分が孤立ピクセル数百個と報告される | ディザーはわざと1ピクセルずつ置いた模様 | 変換の段階でディザーがオンか確認 | 整理の前にディザーを「なし」にするか、孤立ピクセルにチェックしない |
| 目や1ピクセルのハイライトが消えた | 孤立ピクセルの候補で、孤立ピクセルにチェックしていた | 適用前にハイライトされた候補を見る | 孤立ピクセルのチェックを外すか、元に戻して（Ctrl+Z）そのピクセルを手で直す |
| 縁のピクセルが反対側の色になった | しきい値が広く、どちらの組にも属さない色まで拾った | アンチエイリアスのしきい値（既定0.08）を下げてみる | しきい値を下げるか、ドット絵エディタで手直し |
| 修正後も輪郭が二重 | 修正はすき間を埋めるだけ。細くするとシルエットが動く | 輪郭のレポートに二重の区間の数が出る | 必要な所だけ手で細くする |
| 拡大や生成の絵で、整理するにはノイズが多すぎる | まだ1倍になっていない | チェッカーが整数倍率かサイズ変更を報告する | 先に1倍復元で縮めてから整理 |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| Studioのピクセル作業画面の整理パネル（拡大・生成された絵向け） | 絵が1倍でないとき。グリッドを取り直し、縁のにじみを一度に取り除いて、編集を続けられる新しいスプライトを作ります。 |
| どのドット絵エディタでも手作業で | フレームが数枚で、すべてのピクセルを自分で決めたいとき。確認すべき自動の候補はありません。 |
| パレット抽出 | 形は変えずに、多くのフレームで共有するパレットが1つほしいだけのとき。 |
出力ファイルと検証方法
「測定確認」は、ダウンロードしたファイルをページ外（Pillow・numpy・独立したパーサー）で開き直して性質を測ったという意味です。ゲームエンジンでの読み込みは試していません。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| PNG frames | anim_N.png · 1×–8× nearest | 測定確認 Pillow書き出したPNGを読み直し、すべての色が固定パレット内にあることを確認。 |
| Palette | .gpl · .hex (Lospec) · .json | 測定確認 re-import各形式を書き出してUIで読み戻し、16 → 16色を確認。 |
| pixel-lab.json | generic frames + palette | 未検証汎用JSONで、どのエンジンでも読み込んでいません。 |
検証の根拠
アンチエイリアスのかかった8フレーム → 16色パレット1つ、パレット外の色0。ディザーなしとBayer 4×4の両方で変化のない領域が全8フレームで同一。アンチエイリアス除去で271色 → 16色、シルエットの移動0ピクセル。整数倍率・オフセット・2.5倍の非整数倍率を正確に検出。
制限
- 輪郭の問題で自動修正するのはすき間だけで、二重のピクセルは報告するだけで消しません。
- フレームの合計面積が4メガピクセルを超えると、件数は表示中のフレームだけを数えます。
- 4096 × 4096より大きいフレームは受け付けません。すべての処理がメインスレッドで動き、まだキャンセルボタンがありません。
- スプライトシートは1枚の画像として扱います。先にフレームに分割してください（スプライトシート分割）。
- ディザーを有効にすると、クリーンアップの件数にディザーのピクセルが含まれます。先にディザーを「なし」にしてください。
- 書き出すJSONは汎用形式で、Godot・Unityへの読み込みは試していません。
バージョンと出典
数値はChromiumでのピクセルラボのブラウザテストで、書き出したファイルをページの外で開き直して測ったものです（Firefox・WebKitは未実行）。
よくある質問
スプライトの輪郭は動きますか？
いいえ。テストのフレームでアンチエイリアス除去が271色をパレットの16色に減らす間、アルファのピクセルは0個しか変わりませんでした。
ディザーのかかった絵にも使えますか？
ディザーのパターンは1ピクセルでできているので件数に含まれます。整理の前にディザーを「なし」にしてください。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。