ピクセルアートをぼかさず拡大する：書き出したファイルを確認

原寸のPNGから始める

編集していない原本を保管し、実寸を確認します。ピクセルアート風の大きな画像には、既に滑らかな縁や多数の色が含まれている場合があります。忠実に拡大しても、その問題は残ります。元の画素グリッドが正しいことまで証明する処理ではありません。

今回の原本は不透明色が4色で、アルファ値は0か255のみです。容量は170バイトです。Ciyoは整数画素の長方形で描き、出力と一緒に保管しました。自分の制作では、描き直しを頼まずに承認済みPNGを読み込みます。

整数倍率で拡大する

4×なら元の1画素が4×4のブロックに、8×なら8×8になります。全画素が同じ面積を占めます。100×100のような任意のサイズでは、16×16のグリッドを均等な整数ブロックに分配できません。

最近傍法によるファイルのサイズ変更と、別ファイルへの保存を指定します。「細部を改善」「高解像度化」だけでは再描画につながる場合があります。この作業では絵を保ち、ファイルの寸法だけを変えます。

この既存の16×16 RGBA PNGを使ってください。描き直しや画像生成をせず、最近傍法で4×（64×64）と8×（128×128）の別ファイルを書き出します。保存した各ファイルを開き直し、k×kの各ブロックがアルファを含めて元画素と一致することを確認してください。寸法、不透明色数、バイト数を報告します。原本は変更せず、出力をキャンバスに保存してください。

透明度を含めて保存後の画素を比較する

キャンバスで良く見えるだけでは不十分です。PNGをダウンロードしてデコードし、出力の各画素を対応する元画素と比較します。アルファも対象にします。不透明な背景や滑らかになった透明な縁は、明るいキャンバスでは見落としやすいためです。

独立した画素比較では両出力とも不一致チャンネルが0でした。不透明色4色と二値の透明度も保持しています。容量の増加は、この小さなサンプルだけの結果です。自分の作品の容量を予測する値ではありません。

滑らかな比較画像で違いを見る

比較ボードには、原本と最近傍法の出力を同じ見かけの大きさで並べ、意図的なバイリニア補間の画像を加えました。前者は同じ四角い境界を保ちます。滑らかな比較画像は縁を混ぜて中間色を作ります。採用する出力ではなく、比較用と明記しています。

Ciyoのボードは960×400のラスタ画像で、3つの表示領域にラベルがあります。原寸ファイルは別に残しています。キャンバスやブラウザがプレビューを平滑化している場合は、適切なビューアでダウンロードファイルを確認してから判断します。

表示先の設定は別に確認する

ファイルが正しくても、Webサイトやゲーム側が再び滑らかに表示することがあります。MDNは拡大画像に対するimage-renderingを説明しています。実際の表示寸法とブラウザを確認しましょう。正しいPNGがCSSやゲームエンジンのテクスチャフィルタまで設定するわけではありません。

均等で鮮明な画素ブロックが目的なら、表示にも整数倍率を使います。この実演で確認したのは書き出した画素です。エンジンとの互換性、アニメーションのタイミング、すべてのブラウザの拡大動作は検証していません。

• MDN：image-rendering
• 表示サイズでピクセルアートを確認する
• 位置を揃えたスプライトシートを準備する

原本を残して必要なサイズを渡す

出力名に倍率と寸法を含め、原本と納品ファイルを区別します。原本、採用した出力、拡大指示を一緒に保管します。次の修正はスクリーンショットや平滑化済みプレビューではなく、原寸の原本から始めます。

下のサンプルで画素比較を再現できます。原寸で既にぼやけているなら、先に絵のグリッドを修正してください。最近傍法は既存の情報を保つ処理で、元にない細部は復元できません。

• 16×16の原本PNGをダウンロード
• 64×64のPNGをダウンロード
• 128×128のPNGをダウンロード
• ラベル付き比較ボードを開く