写真・画像からピクセルアートへの変換 — 無料・オンライン・ログイン不要

画像からピクセルアートへの変換は、まず縮小し、次にパレットを削減する、という順序で行われます。ページに写真をドロップし、グリッドを設定し、色数を設定して、PNG をダウンロードします。変換はブラウザのキャンバス上で実行されるため、ファイルがアップロードされることはなく、アカウント登録の手順もなく、書き出しに透かしも入りません。

結果のほとんどを決めるのは 2 つの設定です。グリッドサイズは、どれだけ構造が残るかを決めます。色数は、どれだけ階調が残るかを決めます。この 2 つを正しく設定すれば、残り——ディザリング、エッジの整理、書き出し倍率——は微調整です。ここを間違えると、どれだけ手作業で整えても画像は元に戻りません。

写真をピクセルアートに変換する（ライブツール）

最初の画面はドロップゾーンです。PNG、JPEG、WebP、GIF、BMP をドラッグするか、クリックしてファイル選択を開きます。画像はローカルでデコードされ、キャンバスに描画されます。大きなスマートフォンの写真は、スライダーに触れる前に、長辺が数百ピクセルの作業用コピーに縮小されます。スライダーを動かすたびにフル解像度で変換し直すと、プレビューが使い物にならなくなるからです。

手順は短く、非破壊的です。ファイルをドロップし、グリッドサイズを選び、色数を選び、プレビューを確認して、ダウンロードします。ツールは作業用コピーをメモリ上に保持し、設定が変わるたびに縮小とパレット削減をやり直すため、書き出すまで何も確定しません。

書き出しは PNG で、1× または整数倍の拡大率です。拡大は最近傍法のみです。64×64 の結果を ×8 で書き出すと、硬い 8 ピクセルのブロックを持つ 512×512 になります。その後、そのファイルを JPEG に通さないでください。圧縮による劣化が、ちょうど整理したばかりのエッジに乗り、パレットに存在しなかった色を持ち込んでしまいます。

グリッドサイズは出力のセル数です。32×32 の変換は 1,024 個のセルを持ち、それぞれが単色です。縮小には滑らかなバイキュービックではなく面積平均を使います。バイキュービックはコントラストの強いエッジの周囲でリンギングを起こし、汚れのように見えるハローのセルを残すからです。これが、最終的に顔に目が残るかどうかを決める設定です。

色数は、書き出した PNG に含まれる異なる色の数で、2 から 64 までです。削減はパレットの構築と、それに続く最近色の割り当てとして実行されるため、結果はぼやけた画像ではなく、単色のインデックス画像になります。色数を増やす前にグリッドを大きくしてください。大きなグリッドはぼやけた被写体を直しますが、色を増やすとたいていはざらつきが増えるだけです。

写真をピクセルアートに変換する方法

この手順の順序は重要です。パレットを整えた後にグリッドを変更すると、画像全体が新しいセルの並びに割り当て直されるため、その整理は無駄になります。

最終的な用途から逆算して進めてください。エンジンが ×6 に拡大するスプライトは、同じ画像をポスターとして印刷する場合より少ないセル数で済みます。エンジンは画面上ですべてのセルを掛け算するからです。

出力サイズと色数

16×16 のグリッドは 256 個のセルです。すべてのセルが判断であり、何も担わないセルの居場所はありません。その 256 個のセルに 64 色を使うと、各色は平均しておよそ 4 セルを覆います。それは陰影ではなく、ざらつきです。

パレットが陰影として読めるのは、1 つのランプ色が連続した領域を覆うときだけです。頬、あごの線、布の折り目などです。色数は、プレビューがきれいに見えるまで押すスライダーではなく、領域に割り当てる予算だと考えてください。

最もよくある失敗は、小さなグリッドに対して色数を設定しすぎることです。結果は 400% ズームのプレビューでは許容できるように見えても、ゲームやチャットウィンドウで 1× 表示になった瞬間に汚れへと変わります。

2 つ目は、低いグリッドでのディザリングです。ディザのノイズは、等倍で目に平均化されるように設計されています。32×32 のスプライトを大きく表示すると、それは 1 つずつ消していかなければならない、ただの間違ったピクセルにすぎません。

3 つ目は、整数でない書き出し倍率です。32×32 の結果を ×3 にすると 96×96 で問題ありませんが、小数倍率はセル幅が不均一になり、ひどいスクリーンショットのように見えます。4 つ目は圧縮された元画像です。すでに強く圧縮された JPEG にはブロックノイズが焼き付いており、量子化がそれをそっくり、似た色の群れとして再現してしまいます。

「画像からピクセルアート」対「写真からピクセルアート」

この 2 つの語句は検索では異なる結果を返しますが、同じ操作を表しています。一方は「画像」という語を借り、もう一方はカメラを借ります。どちらも変換ツールが行うこと——グリッドへの縮小、パレットへの削減、書き出し——を変えません。

このページでは、それらは同じ操作であり、同じツールです。デフォルトは 64×64 のグリッドと 32 色で、壁紙や大きなアイコンにとって安全な中間です。まずグリッドを動かし、次に色を動かしてください。

マインクラフト向けの画像からピクセルアート変換

マインクラフトへの変換は通常のルールを破ります。出力が画像ではなく、建築図だからです。グリッドはピクセル数ではなくブロック数です。64×64 の変換は幅 64 ブロックの壁、つまり 4,096 ブロックの資材になります。パレットは変換ツールが選ぶものではなく、あなたが集めてもよいブロック次第です。サバイバルではその数はわずかです。クリエイティブではより多くなりますが、それでも有限で、色の系統ごとに偏って分布しています。

この 2 つ目の制約こそ、写真がスプライトよりも多くのブロック数を必要とする理由です。スプライトは顔に 16 色を使えます。羊毛、コンクリート、テラコッタの壁では、1 つの色系統で使える段階が 4 つほどしか得られないかもしれませんし、地形ブロックは平坦な色と衝突する独自のテクスチャを加えます。細部は代わりに解像度で担う必要があります。ブロック数を 2 倍にするとコストは 4 倍になり、しかも特徴を判読可能に保つ唯一の方法であることがよくあります。

実際に設置してもよいブロック数に照らしてグリッドを計画します。32×32 の壁は 1,024 ブロックで、長い 1 回の作業になります。128×128 の壁は、陰影用に 2 層目を加える前で、1 層あたり 16,384 ブロックです。PNG を書き出し、頭の中で覚えようとするのではなく、設置中にセルごとの参照として使ってください。

まず写真を小さなグリッドに変換し、次にパレットを許可されたブロックの一覧に制限して、画像内のすべての色が設置可能なものに対応するようにします。役立つ出力は画像だけでなく、資材リストでもあります。各種類のブロックがいくつ必要かを、数の多い順に並べたものです。これで画像が買い物リストに変わります。

層ごとに建てます。1 層目は最も暗い色調のシルエット、2 層目は中間色、3 層目はハイライトと 1 セルだけの細部です。建築テンプレートが役立つなら、Mini World のような小さなピクセル調のワールドから始め、そのテクスチャを自分の変換結果に置き換えると、縮尺、カメラの高さ、ブロック密度がすでに正しくなっています。

変換から何が作れるか

設定を選ぶ前に出力を選んでください。それぞれの出力は、他のすべてを上書きする 1 つの制約を課すからです。

エンジンが拡大するスプライトは、同じ画像をポスターとして使う場合より、少ないセル数と少ない色数で済みます。繰り返すタイルは、他の何かを直す前に、まず端同士が合う必要があります。

2D の変換から、歩けるピクセルワールドへ

ダウンロードする PNG は、画像であると同時にテクスチャでもあります。3D ゲームビルダーは PNG を読み込み、マテリアルとして登録し、シーン内のジオメトリに適用します。整数倍の拡大率で平面に貼れば、ピクセルは正方形のままです。遠距離で柔らかく混ざるより硬いエッジを好むなら、テクスチャフィルターを最近傍に設定し、ミップマップを無効にしてください。

下に埋め込まれたシーンは、まさにその種のテクスチャでブラウザ上で動作しています。小さなピクセル PNG をテクスチャにした壁、床、小道具を見ているのであり、元のグリッドが解像度の実単位として扱われています。各ピクセルが表面上の 1 つの正方形になるのです。シーン内のキャラクタースプライトも同じルールに従います。小さなグリッド、小さなパレット、固定されたカメラの高さです。Agent Sprite Forge はその形式でキャラクタースプライトを生成し、それらは環境と同じテクセルグリッド上に並びます。

正直な限界が 1 つあります。3D 表面上のピクセルテクスチャは、カメラが動いてもピクセルパーフェクトのままではいられません。遠近法は深度に応じて表面を不均等に分割するため、遠くの壁はセルを長方形に圧縮し、近くの壁は引き伸ばします。ピクセルアートの 3D シーンは、カメラを固定するか、距離によってセルの形が変わると受け入れるかで、これに対処しています。

2 のべき乗の寸法——32、64、128、256——を使ってください。これらは表面上できれいにタイル化し、どのミップレベルでも均等に分割できるからです。テクセル密度をオブジェクト間で一定に保ちます。1 メートルあたり 128 ピクセルの壁の隣に 1 メートルあたり 32 ピクセルの木箱があると、2 つの別のゲームに見えます。

テクスチャを繰り返す場合は、それで建てる前に継ぎ目を確認します。ピクセルエディターで 2 つのコピーを並べ、つなぎ目を見ます。大きな壁での 1 セルの不一致は、シーンの反対側からでも見えます。そして画像で直すのは安く、ジオメトリで直すのは高くつきます。

その他の無料ピクセルツール

すでに写真があるなら、このページの変換ツールから始めてください。生成ツールは、写真がないときのためのものです。

その世界の中を歩いてみる

スプライトとは、立ち位置を持たないキャラクターです。最後の一手は、他にはない当サイトだけのものです。作成したシートを、誰かが歩き回れる世界に配置します。小さな島、惑星、雨の降る街角などです。このサイト上のすべての世界は、ひとつの記述から作られ、そのまま遊べるページとして公開されています。

FAQ