ピクセルアートメーカー — 無料のオンラインピクセルアートエディター＆ジェネレーター

ピクセルアートメーカーの本質は4つです：グリッド、鉛筆、消しゴム、そして書き出しボタン。それ以外 — レイヤー、アニメーション、パレット管理 — は、このループの上に積み重ねられた便利機能にすぎません。ここにあるエディターはブラウザで動作します。キャンバスサイズを選び、1ピクセルの鉛筆で描いて、PNGをダウンロードします。インストーラーも、アカウントも、アップロード手順もありません。

多くのツールが埋もれさせている決断：グリッドサイズこそが最も巻き戻しにくいものです。その後に続くすべて — 顔に何ピクセル割り当てるか、目を1ピクセルにするか2ピクセルにするか、スプライトがゲームエンジンでの4倍拡大にどう耐えるか — はそこから決まります。このページでは、エディターそのもの、グリッドの計算、スプライトを描くことと生成することの違い、予算としてのパレット、そして今描いたキャラクターを誰かが歩き回れる3Dワールドに持ち込む方法を扱います。

ピクセルアートメーカー（ライブキャンバス）

キャンバスがページそのものです。最初の画面には、固定サイズのビットマップグリッド、1クリックごとに1ピクセルを書き込む鉛筆、透明の値を書き戻す消しゴム、パレットの帯、そしてPNGを書き出す書き出しボタンがあります。左クリックで描画し、右クリックまたは修飾キーで消去し、キャンバスの中央は常に、拡大された推測ではなく本来のピクセル境界を示します。

何かを描く前に、キャンバスサイズと表示サイズの違いを理解してください。800x800で表示された32x32のキャンバスも、データとしては依然として32x32ピクセルです。ズームはピクセルがどれだけ大きく描画されるかを変えるだけで、ピクセルの数は決して変えません。拡大した状態で書き出しても、出力されるのは32x32のファイルです。これは正しい動作であり、ほぼ誰もが最初は驚きます。

初心者が唯一間違える設定は、描く前ではなく描いた後にグリッドサイズを選ぶことです。誰かが64x64のキャンバスにキャラクターをスケッチし、気に入って、それを16x16のタイルゲームに入れたくなります。手描きの64x64スプライトをリサンプリングで16x16に縮小すると、それは壊れます。2ピクセルのディテールは灰色の滲みになり、1ピクセルの輪郭は2ピクセルの灰色の線になり、平均化されたすべての辺が新しい値を作り出すため色数は倍増します。すでに間違ったサイズで描いてしまったなら、古い版を視覚的な参照として使い、目標のサイズで描き直してください。それはどの縮小よりも速くて綺麗で、小さなグリッドが実際に必要とする単純化を強制します。

後からの拡大は安全です。後からの縮小は安全ではありません。必要なディテールを収められる最小のグリッドを選び、使ったピクセルはすべて使ったものとして扱ってください。

ピクセルアートのグリッドとテンプレート

「ピクセルアート グリッド」「ピクセルアート用グリッド」「グリッド上でピクセルアートを描く」を検索する人は、みな同じものを指しています。一つのマスが1ピクセル、1色である、区切られたマスの集まりです。グリッドは作品の上に乗る飾りではありません。それは解像度の契約です。半径5の円は円ではなく、手で置くかテンプレートから受け入れるかする、1ピクセル単位の特定の階段です。

テンプレートが存在するのは、円、アイソメトリックの立方体、あるいは斜め見下ろし（3/4ビュー）のキャラクターの最初の4行を、記憶から導くのは面倒で、少し間違えやすいからです。テンプレートは出発点であり、完成したスプライトではありません。形を貼り付けたら、自分のキャラクターに属さないピクセルを削除し、光の方向が他に描いたすべてと一致するように輪郭を塗り直します。

選ぶサイズは、ピクセルで表された予算です。8x8のスプライトでは顔に使えるのはおよそ4x4で、輪郭と目と口を同時に置く余白はなく、二つを選ぶことになります。16x16のスプライトなら、1ピクセルの輪郭と素材ごとに2トーンが収まります。32x32のスプライトでようやく光の方向を入れる余裕が生まれます。64x64を超えると、ピクセルではなく線で描きたくなり、この作風を成立させている厳格さが滲み出し始めます。

正方形でないグリッドはタイルで重要になります。16x32のキャンバスは見下ろし型ゲームの立ちキャラクター、32x32のキャンバスはタイルです。この二つのカテゴリは別のファイルに分けてください。キャラクターのスプライトとタイルセットのタイルは、エンジンに届いたときの位置合わせの規則が異なるからです。

表計算ソフトでグリッドを作り、1セルを1ピクセルとして、セルを塗り、縮小して形が一目で読めるか確認する人もいます。それは機能し、一つの実用的な利点があります。6x6の目のブロックをコピーして、スプライトシートのすべてのセルに、描き直さずに貼り付けられるのです。

失敗のパターンは書き出しにあります。表計算ソフトは目盛線、罫線、セルの余白を描画します。シートをスクリーンショットして切り抜くと、すべてのピクセルの間に1ピクセルの暗い継ぎ目が入り、各セルの縁の色がわずかにずれます。まず目盛線と罫線を非表示にし、ズームを正確な整数倍に設定し、目分量ではなくピクセル境界で切り抜いてください。専用のキャンバスならこの問題はまるごと避けられます。だからこそ表計算ソフトは計画には向いていますが、制作には向いていません。

描くか、生成するか

どちらの方法も同じキャンバスを埋めます。手描きは、置いたとおりのピクセルを書き込みます。生成は、説明を満たすピクセルの集合を書き込み、それをあなたが編集します。どちらかが他方を飛び越える近道ではなく、それぞれ別の問いに答えます。

シルエットがすでに見えているときは手描きが勝ります。兜の形、目の正確な間隔、あるいはこのキャラクターを既存の4体のスプライトの隣にどう並べるかを分かっているなら、ピクセルを置くほうが、説明して結果を修正するより速いです。探索しているときは生成が勝ります。鎧を着た横見のカエルが盾を持つ、というアイデアはあるがシルエットは分からない、というとき、生成は40の決断の代わりに一度で出発点を与えてくれます。Agent Sprite Forgeは説明から直接、編集を続けられるグリッドへスプライトを生成します。これは重要で、出力は出発点であり、完成品ではないからです。

生成されたスプライトの出力は、サムネイルサイズではもっともらしく、8倍ズームでは乱れています。典型的な損傷：輪郭から1マス浮いた孤立した1ピクセル、連続しているべき1ピクセルの輪郭の途切れ、パレットにない色を運ぶアンチエイリアスの縁、そしてスプライトがキャンバスの縁に触れていること。最後のものは見た目の問題ではありません。キャンバスいっぱいを占めるスプライトには余白がなく、回転、ドロップシャドウ、あるいはエンジンの余白処理がそれを切り落とします。

修正は機械的で、スプライト1体につき数分です。同じ順序で毎回行い、すでに直した問題を再び持ち込まないようにしてください。

オンライン、無料、ダウンロード不要

無料で描画のループ全体をカバーします：グリッドの選択、鉛筆、消しゴム、塗りつぶし、パレットの編集、そしてPNGの書き出し。期限はなく、書き出しをアカウントの向こう側に閉じ込めることもありません。実用上の制限があるのは生成の部分です。スプライトの生成は、ピクセルを置くのとは違い計算資源を消費するからです。描画と書き出しに回数制限はありません。

描画や書き出しにアカウントは不要です。描いたものは何もアップロードされず、画像はブラウザのタブにとどまり、ダウンロードしたときにだけ外へ出ます。クライアント側での編集の代償は、自動保存のないデスクトップアプリと同じです。書き出さずにタブを閉じれば、描画は失われます。完成したときではなく、スプライトが正しく読めたときに書き出してください。途中の版は安く済みます。

書き出しにはピクセルがそのまま入ります。キャンバス本来の寸法のPNGで、8ビットRGBA、アルファは保持されます。透明な背景に描いたなら、背景は透明のままです。透明は色ではなく値であり、書き出しを生き延びます。塗りつぶした背景に描いたなら、その塗りはキャラクターの後ろのすべてのピクセルに焼き込まれます。背景色が欲しいなら、意図して塗ってください。後でスプライトを何かの上に重ねたいなら、背景を空のままにしてそのまま書き出します。

正直な線引きは、生成とそれ以外の間にあります。編集、色の作業、ファイル出力はローカルで動作し、このツールを一度しか使わなくても毎日使っても同じように振る舞います。実用上の制限は生成に当てはまります。だからこそ役に立つ流れは、大まかな形を生成し、計量されないエディターで時間を過ごすことです。

書き出しの経路では、透かしを加えたり、画像をリサンプリングしたり、ファイル名をキャンバスの寸法に変えたりしません。描いたものがそのまま得られます。

パレットと作風

色は好みではなく予算です。16色のパレットは再利用を強制する制約であり、再利用こそが、スプライトをピクセルの山ではなく一つの物体として読ませるものです。同じ中間の茶色が革の帯、木の柄、ブーツに現れると、目はそれらをひとまとめにし、キャラクターが焦点を結びます。256色のパレットは、スプライトを縛り首にするのに足る縄です。問題にぶつかるたびに新しい色を足せてしまい、結果には内側の論理がありません。同じ作家の2体のスプライトが、無関係な60色のパレットを2つ使っていると、別々の企画から来たように見えます。

パレットは個別の色ではなく、階調の連なりとして組み立ててください。実用的な16色セットは、3トーンからなる5本の階調に、輪郭専用の1色を加えたものです。各階調はベース、影、ハイライトです。ベースは中間色です。影はベースを暗くし、青か紫へ寄せたもので、ただ暗くするのではありません。明るさを下げるだけで作った影は汚れに見えます。ハイライトはベースを明るくし、黄色へ寄せたものです。16x16のスプライトでは、ハイライトはピクセルのおよそ10分の1を覆うべきです。それより多いと、光源が方向を持たなくなります。

作風は、色そのものではなく、一貫して適用する規則から生まれます。登場人物全体でパレットを共有するとは、プレイヤーのチュニックの赤が、敵の旗の赤や回復アイテムの赤と同じRGB値であるということです。これが秘訣のすべてです。徹底するのに何の手間もかからず、意図して作られたゲームと、寄せ集めに見えるゲームの違いになります。

ピクセルキャラクターを3Dワールドにする

受け渡しは一文です。スプライトを100パーセントで書き出し、テクスチャとして読み込み、ピクセルが正方形のままでいるよう、ピクセルグリッドの整数倍でワールドに配置します。

3Dゲームビルダーはそのテクスチャを、常にカメラの方を向く平面に貼ります。だから16x16のキャラクターは、横に歩いても薄い断片にならず、どの角度からも16x16のキャラクターとして読めます。当たり判定、重力、追従カメラはスプライトから独立しているので、キャラクター制御に触れずに後からアートを差し替えられます。Mini World は結果を試す最小の場所です。小さな歩ける範囲、キャラクター1体、ぶつかるものがいくつか。The Cyclops' Island はより大きな試しで、地形の高低と見通しによって、スプライトの縮尺が環境に対して正しいかが一目で分かります。

縮尺は、ほとんどの最初の試みが失敗する場所です。何かを配置する前に換算を決めてください。1ピクセル＝1ワールド単位は、16x16のスプライトでは小さすぎ、128x128では大きすぎます。キャラクターがおおよそ扉の高さになるように係数を選び、その係数を企画内のすべてのキャラクターで保ってください。別々のピクセル対ワールド比で作られた登場人物は、並んで立つと決して正しく見えません。

ぼかさずに拡大・アップスケールする

ピクセルアートは作られ方として硬い縁を持ちます。すべての平滑化フィルター — バイリニア、バイキュービック、Lanczos — は隣り合うピクセルを平均することで働き、2つのパレット色を平均すると、パレットにない3つ目の色が生まれます。その3つ目の色がぼかしです。これは後から取り消せる描画設定ではありません。一度画像がリサンプリングされると、元の硬い縁は失われます。

拡大は整数倍だけで行います：2倍、3倍、4倍、8倍。16x16のスプライトを4倍にすると64x64で、元の各ピクセルは綺麗な4x4のブロックになります。2.5倍では、ある元ピクセルは幅2ピクセルになり、別のものは3ピクセルになり、グリッド全体に目に見える不均一が生じます — ある場所では太く、別の場所では細い輪郭です。事後にそれを直す方法は、整数倍で書き出し直す以外にありません。

鮮明なスプライトを静かに台無しにする設定はリサンプルのフィルターで、ツールによっては補間、リサンプル、画像のリサンプル、あるいは拡大縮小の隣の「スムーズ」チェックボックスといった名前が付いています。ほとんどのエディターや画像ビューアーでは平滑化モードが初期値で、使うたびに画像を再フィルタリングします。寸法に触る前に最近傍に設定してください。同じ規則は画像エディターの外にも当てはまります。3Dエンジンに読み込んだテクスチャは、縮小フィルターと拡大フィルターを最近傍に設定し、ピクセルテクスチャではミップマップを無効にしなければ、カメラが動くたびにエンジンが平滑化します。ウェブページでは、相当するのは image-rendering プロパティを pixelated に設定することです。さもなければ、32x32のPNGを幅96ピクセルに拡大するブラウザが独自の平滑化を加え、最後の段階であなたの作業を台無しにします。

もう一つ。ユーザーインターフェースにスプライトをパーセントで拡大させないでください。画像を可変幅の100パーセントに合わせるコンテナは、ウィンドウによって2.3倍や3.7倍になり、スプライトは画面ごとに違って見えます。本来のピクセルサイズで描画し、整数倍で拡大するか、表示サイズを明示的に指定してください。

そのスプライトが属する世界へ歩き出す

スプライトは、立つ場所のないキャラクターです。最後の一歩は、他にはないものです。今作ったシートを、誰かが歩き回れる世界に置きます — 小さな島、惑星、雨の街角。このサイトのすべてのワールドは、一つの書かれた説明から作られ、遊べるページとして公開されています。

FAQ