本文へスキップ

拡大したドット絵を1倍に縮小 · 元のピクセルに戻す

×4で保存したスプライト、スクリーンショット、小数倍でサイズを変えたストア画像では、1ドットが何ピクセルもの塊になり、なめらか補間でにじむこともあります。整理パネルは絵だけからドットの大きさを測り、見つけたグリッドと確かさを示してから、元の画像には触れずに1倍のスプライトを新しく作ります。

拡大されたドット絵を1倍に戻すには、まずドットの大きさを見つけ、ブロックごとに色を1つだけ残します。4倍ニアレスト拡大の128 × 128の画像は4 × 4のブロックでできているので32 × 32になります。単純な「25 %に縮小」が合うのは、倍率がわかっている整数で、グリッドが0番目のピクセルから始まるときだけです。小数倍(×3.3)やなめらかな(バイリニア)拡大はグリッドを測る必要があります。Nerulioの整理パネルはグリッドを測って確かさと一緒に示し、ブラウザ内で1倍のスプライトを新しいスプライトとして作ります。

描くスプライト・フレーム・GIF・.aseprite、または整理する拡大画像をドロップ
空のStudioを開く
ブラウザ内で処理し、ファイルはアップロードされません。
Studio のピクセル作業画面の整理パネル:バイリニアで×4.25に拡大したCC0スプライトを滑らかな拡大と判定してグリッドを表示し、適用前に64×48の結果をプレビュー
CC0アセット(OpenGameArt)を開いた実際のStudio画面です。
書き出し先
  • .aseprite検証済み· Aseprite 1.3.18
  • Palette files測定確認· read back
  • Engine bundles検証済み· Godot 4.7.2 · Unity 6000.5
  • Frame PNG · .nerulio通常ファイル

「25 %に縮小」では足りない理由

整数k倍のニアレスト拡大は1ドットを1色のk × kブロックにするため、色が変わる位置はすべてkの倍数に並びます。kとグリッドの始まりがわかれば戻すのは正確です。ブロック内のどのピクセルもそのブロックの色だからです。Nerulioは色が変わる位置からkを証明し、絵がグリッドから数ピクセルずれて切られていれば、それらの位置に共通する余りからオフセットを求めます。

小数倍のニアレスト拡大では、幅の違う2種類のブロックが交互に並びます。×2.5なら連続区間は3、2、3、2ピクセルです。40 %に固定して縮小すると一部のブロックを境目で読むため、1ピクセルの線が消えたり二重になったりします。Nerulioは測った縁ごとに区切りを置き、セルの内側半分(両側の外側4分の1は捨てる)で最も多い色を選び、平均は取りません。

なめらかな拡大(バイリニア・バイキュービック・Lanczos)には平らなブロックがなく、縁はすべて坂です。Nerulioは絵を元のピクセル中心の間の線形補間とみなし、最小二乗でその中心の値を解いてから、ほぼ同じ色をまとめて縁をくっきりさせます。本当のバイリニア拡大なら逆変換になり、JPEGやぼかしが加わっていれば元どおりではなく最も近いバイリニアの解釈になります。

ドットの大きさ(倍率)
1ドットが占める画像のピクセル数。×4拡大なら4、幅96pxのスプライトを363pxで保存したものなら約3.78。
オフセット(位相)
グリッドからずれて切られた画像で、最初の完全なブロックが始まる位置。
セルのサンプル
セルごとに1色。内側半分で最も多い色、目立つ色がなければOklabのメドイド。

例:96 × 144のスプライトを2通りに拡大

同じCC0シート(ErisのSumo Hulk、9色)を×4ニアレストと×3.78バイリニアで拡大し、1倍に戻しました。

正解               96 × 144、9色

×4ニアレスト       384 × 576      384/4 = 96    576/4 = 144
  Nerulio          96 × 144を自動で検出、ピクセル100 %一致
  Aseprite 1.3.18  Sprite Size 25 %、ニアレスト:96 × 144、100 %一致

×3.78バイリニア    363 × 544      363/96 = 3.78   544/144 = 3.78
  Nerulio          96 × 144を自動で検出、99.7 %一致、13色
  Aseprite         正しいサイズ(96 × 144)を入力、ニアレスト:81.5 %一致
  Aseprite         25 %と推測:91 × 136、54.4 %一致

×4は倍率さえわかればどのツールでも簡単です。差が出るのはバイリニアのほうです。363 × 544の25 %は90.75 × 136で、サイズも合わずグリッドにも乗りません。

できること

  • 測定では何も変わりません。「×7に拡大」「なめらかに約×4.25へ変更」などの判定、確実・おそらく・不確かの付いたドットの大きさ、入力と結果のサイズ、色のノイズ、検出した背景を示し、キャンバスにグリッドを描きます。
  • 正確な整数ブロックは、グリッドからずれて切られた画像でも見つけます。セルが2pxと3pxで交互になる小数倍のニアレスト拡大は縁の間隔から、なめらかな拡大はバイリニアフィルタの最小二乗逆変換で戻します。
  • 各セルは最も多い色かOklabでのメドイド1色になり、縁を平均しません。ほぼ同じ色はOklabでまとめるので、輪郭がくっきり残ります。
  • プレビューは整数倍で前後を表示し、並べて比較もできます。適用すると1倍のスプライトが1回で取り消せる新しいスプライトとして加わり、フレーム・時間・ピボット・ボックス・タグは保たれます。
  • すべての計算はメインスレッド外のワーカーで行われ、同じ入力と設定なら常に同じバイト列になります。384×576の×4拡大は全体で1.4秒、363×544のバイリニア拡大は4.7秒でした。

使い方

  1. 拡大されたPNGをこのページにドロップすると、1枚の絵としてピクセル作業画面に開きます。
  2. 整理パネルで範囲(このフレーム、タグ、全フレーム)を選んで「測定」を押し、判定とキャンバス上のグリッドを確かめます。
  3. 単色の背景が絵の一部なら、背景を「残す」にします。そのままだと縁の色が透明になります。
  4. プレビューで前後を比べ、「新しいスプライトとして適用」を押して1倍の結果を書き出します。

結果の確認

  • 適用する前に判定を読みます。「×4に拡大(正確なブロックグリッド)」は証明、「なめらかに約×3.78へ変更」は確かさ付きの測定、「弱すぎて信頼できない」は適用されません。
  • 結果のサイズを確認:入力 ÷ ドットの大きさ(384 ÷ 4 = 96、576 ÷ 4 = 144)。
  • プレビューで整数倍の表示にして前後を比べます。輪郭が1ピクセル幅で途切れていないはずです。
  • 色数を本来の色数(上のスプライトなら9)と比べます。ずっと多ければノイズが残っているので色数の上限を設定します。

拡大の種類ごとの1倍結果の正確さ

元の絵と比べた完全一致ピクセル:初期設定 / 背景を残す。CC0ケース69件、docs/STUDIO-PIXEL.md §5。

拡大の種類サイズを正確に判定完全一致ピクセル
ニアレスト、整数倍(×2〜×8)100 %92.2 % / 97.4 %
ニアレスト、小数倍(×2.5・×3.3・×4.7)100 %88.6 % / 97.0 %
なめらか(バイリニア・バイキュービック・Lanczos)93 %70.5 % / 75.9 %
拡大後にぼかし67 %53.8 % / 66.4 %
拡大後にJPEG80 %4.5 % / 12.1 %(ΔE 0.02以内は84.0 %)

トラブルシューティング

症状考えられる原因確認方法対処
結果が予想の半分か2倍のサイズグリッドが実際のブロックの倍数か半分に合ってしまった(単色の長い区間が多い絵)キャンバスにグリッドを表示し、1セルに1ドットちょうどか確認整理パネルにドットの大きさ(例:4)を入力して測り直す
1ピクセルの線が消える・二重になるパーセント固定の縮小がブロックの境目を読んだ(小数倍やずれた切り抜き)線にグリッドを重ねてみるパーセントではなく測ったグリッドを使う。切り抜きのオフセットは自動で見つかる
全体の色が少しずつ違うJPEG入力やなめらかな拡大で、ビット単位で同じピクセルがないレポートの色数が本来よりずっと多い背景を残す、色数の上限、またはスプライトのパレットへ減色(パレットエディタ)
絵の一部である背景が透明になった背景「透明にする」(既定)が検出した縁の色を消すレポートにその色と縁に占める割合が出る適用前に背景を「残す」に
「約…pxのグリッドが見つかったが、弱すぎて信頼できない」一貫したグリッドがない。生成画像でよくある(AIドット絵の修正)キャンバス上の黄色の破線グリッド見える大きさを入力するか、大事な部分を描き直す

ほかの方法

方法こんなときに向いています
Aseprite:Sprite › Sprite Size、25 %、ニアレスト倍率のわかっているきれいな整数倍の拡大。私たちのテストでは3手順で100 %一致しました。グリッド検出はないので、小数倍やなめらかな拡大は正しいサイズを入力する必要があります(テストでは81.5 %)。
ピクセルパーフェクト チェッカー(ピクセルラボ)画像が正確な整数倍の拡大かどうかを知り、ピクセル単位で戻せればよいとき。ブロックのグリッドが証明されたときだけ復元を出します。
通常の画像リサイズドット絵ではない絵(写真や絵画)で、なめらかな再サンプリングが望む結果のとき。

エンジン別の書き出しと検証方法

「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。

書き出し先ファイル検証
.asepritelayers · blend · opacity · locked · indexed palette · frames · tags検証済み Aseprite 1.3.18実際のAsepriteコマンドラインで、インデックスモード・レイヤー2枚・不透明度160の乗算・編集不可のロックレイヤーのまま開き直し、フレームのピクセルも一致しました。
Palette files.gpl · .pal · .hex · .ase · .act · .json測定確認 read back各形式を書き出して読み戻し、一致を確認。Asepriteが書いた.gpl・.pal・.hex・.actと実際のAdobe .ase(16色)も読み込めました。
Engine bundlesGodot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export検証済み Godot 4.7.2 · Unity 6000.5描いたスプライトはパック&書き出しでまとめます。そのエンジン用ファイルは実在のCC0アセットで各エンジンに読み込んで確認済み(49回中47回合格。失敗2回はPhaser 3プリセットで避けられるPhaser 3.90のバグ)。
Frame PNG · .nerulioPNG-8 with the palette when an indexed frame fits it · project file通常ファイルどのツールでも使える通常ファイルで、エンジンでの検証は主張しません。

検証の根拠

整理のベンチマーク(元の1倍画像が分かっているCC0ケース69件):サイズを正確に当てたのは81 %(±1px:90 %)、背景を残すとピクセルの74.0 %が完全一致。最も良い競合ツールはサイズ30 %(perfectPixel)、完全一致ピクセル44.6 %(unfake.js)。Asepriteで作った×4ニアレスト拡大は100 %、×3.78バイリニアは99.7 %一致で戻り、どちらもサイズは自動で判定。1pxのアウトラインとドロップシャドウはAsepriteの結果とピクセル単位で一致(1846px・705px)。ここで書いた.asepriteはAseprite 1.3.18でインデックスモード・レイヤー・合成モード・ロックのまま開きます。

制限

  • 1回の整理でドットの大きさは1つです。違う倍率で拡大されたフレームは別々に整理してください。
  • グリッドは縦横の方向で測ります。回転や遠近でゆがんだスクリーンショットには見つけるべきグリッドがありません。
  • ぼかしの加わった拡大がベンチマークで最も弱い種類で、サイズが合ったのは67 %でした。
  • ピクセル作業画面にないもの(Asepriteにはある):レイヤーグループ、リンクセル、タイルマップレイヤー、参照レイヤー、RotSpriteと選択範囲の自由回転・拡縮(反転と90°のみ)、グラデーション・スプレー・輪郭・テキストツール、カスタムブラシ(四角・丸の1〜16px)、タイル状の連続描画、LuaスクリプトとCLI。
  • 対称軸は数値入力で、キャンバス上でドラッグできません。タッチでは右ボタンがないため、背景色は入れ替えボタンかXで使います。
  • 整理:JPEGは近い色で戻りますが(背景を残すと84 %がΔE 0.02以内)、完全一致はまれ(12 %)。模擬的な生成画像でサイズが完全一致したのは20 %(±1px:80 %)、実際の生成画像7枚は1枚も自動では合わせません。パネルが示すピクセルサイズを入力してください。
  • インデックス変換はAsepriteのRGB距離ではなくOklabで最も近い色を選びます。テスト用スプライトでは68 %のピクセルが別の(見た目により近い)色になりました。Lospec検索が唯一の通信で、事前に確認します。

バージョンと出典

数値はNerulioの整理ベンチマーク(1倍の元画像がわかっているCC0のケース69件。サイズ一致81 %、1px以内90 %)と、Sumo Hulkシートでの直接比較によるもので、Aseprite 1.3.18はコマンドラインで実行しました(docs/STUDIO-PIXEL.md §5–§6)。Asepriteのメニューの場所は公式ドキュメントに従っています。

参照した公式ドキュメント

よくある質問

測ったドットの大きさが違っていたら?

判定には確かさが付き、弱いグリッドは確実として適用せず黄色の破線で描かれます。整理パネルでドットの大きさを自分で入力してください。「適用」を押すまで何も変わらず、適用は新しいスプライトを作ります。

結果が予想より1ピクセル小さい・大きいのはなぜ?

絵がグリッドから数ピクセルずれて切られていると、端のセルが欠けています。ベンチマークではサイズを正確に当てたのが81 %、1px以内が90 %でした。

JPEGのスクリーンショットでも使えますか?

部分的に使えます。JPEGのノイズで色がビット単位まで戻ることはまれですが(背景を残して12 %)、84 %は元の色とΔE 0.02以内で、1倍では見分けられません。PNGがあればPNGを使ってください。

無料ですか?アカウントは必要ですか?

このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。

スプライトはアップロードされますか?

いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ(IndexedDB)に自動保存され、.nerulioファイルとして保存できます。

Asepriteやエンジンのプラグインは必要ですか?

いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています(Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト)。