ピクセル・アート・エディター

カスタマイズ可能なグリッドでピクセルアートを描画して、PNGでエクスポートします。

キーボードショートカット

D · 鉛筆   E · 消しゴム   F · 塗りつぶし   I · スポイト

L · ライン   R · 長方形   Ctrl+Z · 元に戻す

ピクセルアートはハードウェアで生まれ、それからそこに留まることを選んだ

最初の数十年、ピクセルアートは美学ではなく制約でした。Atari 2600(Summer CES、1977年6月4日)はテレビインターフェースアダプターで画像を描き、8ピクセル幅の2つの「player」スプライトを公開し、それらをスキャンライン基準で再利用しました、プログラマーは「ビームを競争」させて一度により多くの色を画面に表示することを学びました。Commodore 64(1982年1月)は8つの 24×21 ハードウェアスプライトと VIC-II の16色パレットを提供し、それは欧州ゲームの十年の視覚的シグネチャになりました。NES(1985)は約54の識別可能な色のマスターパレットを持つ Ricoh 2C02 PPU を使用し、そのうち25色が画面に同時に存在でき、13色の背景パレットと4つの3色スプライトサブパレットに分かれていました、そして 8×8 スプライトタイルは今日のピクセルアートでもまだ感じられるデザイン単位になりました。Game Boy DMG-01(1989)は限界をさらに押し進めました、日中はオリーブに見える 160×144 反射 LCD 上の単色の4階調。これらのパレットのどれも美しさのために選ばれませんでした、それらは数セントでチップが何ができるかによって選ばれました。

1990年代のどこかで、方程式は反転しました。ハードウェアが追いつき、事前レンダリングそしてリアルタイム 3D が大予算プロダクションの標準になりました。ピクセルアートはそこで死んでいたかもしれません。代わりに、それはより稀なものになりました、意図的な美的選択。「Pixel」と単純に署名する Daisuke Amaya は大学とフルタイムの仕事の間に5年間を費やして Cave Story を組み立て、2004年12月20日にフリーウェアとしてリリースしました。Markus「Notch」Persson は2009年5月17日に TIGSource に Minecraft の最初のバージョンを投稿し、デフォルトのブロックテクスチャは 16×16 ピクセル、リソースパックの今日でも標準形式です。Eric「ConcernedApe」Barone は2016年2月26日に Stardew Valley をリリースしました、約4年半の単独開発の後、Paint.NET で各スプライトを自分で描きました。Heart Machine は Hyper Light Drifter(2016年3月)をリリース、Maddy Thorson と Noel Berry は Celeste(2018年1月)をリリース、もとは Joseph White の PICO-8 ファンタジーコンソールでの4日間プロトタイプ。Motion Twin は2018年8月に Dead Cells をリリース、その「ピクセルアート」は実際には低解像度でレンダリングされた 3D モデルです。これらのゲームは合わせてピクセルアートが懐古主義に過ぎないと主張することを不可能にしました、それは独自の慣習、ツール、スーパースターを持つ現代の媒体でした。

なぜ2の累乗グリッドか、そしてあなたのものを選ぶ方法

標準ピクセルアートキャンバスサイズ、8×8、16×16、32×32、64×64、はコンソールハードウェアに直接さかのぼります。NES の 8×8 タイル、C64 の 24×21 スプライト、Game Boy の 8×8 OBJ、安価な2の累乗演算でアドレス指定でき、メモリに効率的にパックできるビットマップデータ。16×16 のキャラクタースプライトは2つの NES タイルが積み重なったもの、32×32 は4つです。慣習はメモリアドレッシングが重要でなくなった時代も生き延びました、その時までにアーティストは「タイルは8または16ピクセルで、単一の読みやすい形を含む」作業リズムを内面化していたからです。このエディタでの各サイズの実用的な使用:8×8 アイコン、Twitch エモートスケッチ、非常に小さなタイル要素;16×16 基本キャラクタースプライト、アイテムアイコン、Minecraft の標準テクスチャ形式;32×32 詳細なポートレートやより大きなアクセサリピース;48×48 シェーディングを含むタイルセット;64×64 ヒーロースケールスプライトと小さなシーン。小さく始めてください、ピクセルアートは低解像度によって定義されます、16×16 または 32×32 で作業する規律はサムネイルサイズで読みやすい作品を生み出すものです。

パレット、ピクセルアートを読みやすくする規律

ハードウェアパレット制限はピクセルアートに2つ目の定義特徴を与えました、強制された色の規律。NES は 8×8 背景タイルあたり最大4色のみを許可(普遍的な背景を数える)、Game Boy DMG は一度に4階調の緑灰色のみを表現できました。現代のハードウェアはどれも強制しません、2026年の任意のピクセルアーティストは完全な 24 ビット RGB 色空間と完全な 8 ビットアルファを利用できます。それでもコミュニティは大部分が16、32、または 64 色のパレット内で作業することを選択し、レトロな作為のためではありません。小さなパレットは各色決定を重要にします、それは一貫した値構造、意図的に選ばれた補完色、複数のスプライト間で再利用される色を強制し、シーンが混沌としてではなく統一されて読まれるようにします。これが多くの現代ピクセルアートが平均的なアマチュアデジタルアートが見えない方法で意図的に見える理由です。パレットは規律です、ソネットの14行制約のように。

現代のシーンを4つのアーティスト署名パレットが支配します。PICO-8(Joseph「zep」White、2014年5月9日 Pico Pico Cafe で公開、2015年に公開リリース)、White が Commodore 64、Amiga 500 のトラッカー、「他の80年代ハードウェアの一般的な美学」までさかのぼる16色。Celeste の2015年プロトタイプは PICO-8 で4日間で書かれました。DawnBringer DB16 と DB32(Richard Fhager、2007 と以降)、特定のハードウェアを模倣するのではなく、表情豊かな手描きピクセル作業のために設計。今や Aseprite と GIMP のデフォルトとして同梱。Endesga 32 と 64(Seth「ENDESGA」)、高コントラストと高彩度の「ピクセルアートと唯物論的デザイン」のために構築。生のダウンロード数による(Lospec で Endesga 32 が 192,000+、Endesga 64 が 91,000+)、インターネットで最も使用されているアーティストパレットの中。Sweetie 16(GrafxKid)、TIC-80 ファンタジーコンソールのデフォルトパレットになりました。Lospec.com 自体、skeddles と自称するアーティストが2017年に設立、は中央コミュニティハブです、パレットデータベース、チュートリアル、ギャラリー(2023年1月にローンチ)、トーナメント、Aseprite、Photoshop、Paint.NET、GIMP と互換性のある形式のすべてのハードウェアパレットのダウンロード可能アーカイブ。

ブラウザ内のピクセルエディタが実際にどう機能するか

Web ピクセルアートエディタはブラウザの便利なデフォルトと戦わなければなりません、すべての現代のブラウザは画像をスケールするときバイリニアまたはバイキュービック補間を適用し、写真には適していますがピクセルアートを破壊します(シャープなピクセルをぼやけたしみに変える)。解決策は異なるレイヤーに適用される2つの補完的な設定です。CSS の image-rendering: pixelated をキャンバス要素に設定するとブラウザのコンポジターはキャンバスがバッキングストアと異なるサイズで表示されるとき最近傍スケーリングを使用するように強制します、16×16 キャンバスが CSS で 512×512 にストレッチされるとき、各オリジナルピクセルはシャープなエッジを持つ32×32 の同一ピクセルブロックになります。ctx.imageSmoothingEnabled = false を 2D レンダリングコンテキストに設定すると、入力データをスケールするとき描画操作自体が最近傍を使用するように強制します。両方なしでは、ぼやけを得ます。描画モデル:メモリ内の色値の 2D 配列、CSS サイズがバッキングストアよりはるかに大きいキャンバス、配列を変更し ctx.fillRect で関連セルを再描画するツール。グリッドオーバーレイは1ピクセル幅の線として上に描かれ、邪魔のないプレビューのためにオフにできます。PNG エクスポートは canvas.toBlob(callback, 'image/png') を使用、非同期、メインスレッド外でエンコード。PNG は2つの理由で正しい形式です:無損失(各ピクセルがビット完全に生き残る)とアルファをサポート(ゲームスプライトの透明な背景)。JPEG は悪い、その DCT 圧縮はブロックエッジで滲み、リンギングアーティファクトを導入します。

6つのツールとそれらが実際に行うこと

ピクセルアートが行く場所、実際の出力サイズ

専用ツールに対する正直な範囲

3つの専用ツールがピクセルアート空間を支配します。Aseprite はプロの de facto 選択です、David Capello が1998年に趣味プロジェクトとして開始(2001年に Allegro Sprite Editor として最初のリリース)、現在は David、Gaspar、Martín Capello がリードする Igara Studio S.A. が開発、Steam で 19.99 米ドルで販売(2016年8月までは GPLv2 でフリー、その後ライセンスはプロプライエタリに変更されたがソースコードは GitHub で表示可能)。レイヤー、フレーム、タイムライン、タイルマップ、アニメーションエクスポート、Lua スクリプト、コマンドラインツール、コミュニティの合意による最高の有料ツール。Piskel は主要な無料の競合者で、Julian Descottes が作成したオープンソースの web エディタ、piskelapp.com でホストされたバージョンとダウンロード可能なデスクトップビルド。強み:フレームバイフレームアニメーションタイムライン、ライブプレビュー、GIF とスプライトシートエクスポート。Pixilart は強い社会/コミュニティレイヤーを持つ無料のオンラインエディタです、100万人以上のユーザー、公開ギャラリー、コメント、フォロー。このエディタの正直な範囲は3つよりも狭いです:単一フレーム、ブラウザのみ、素早いスプライト、アイコン、アバター用のツール。6つの基本ツール(鉛筆、消しゴム、塗りつぶしバケット、ピックアップ、線、長方形)、カラーピッカー、パレット、元に戻す、オプションのグリッドオーバーレイ、キャンバスのネイティブサイズで PNG エクスポート。レイヤーなし、フレームなし、アニメーションタイムラインなし、オニオンスキンなし、タイルマップモードなし、スクリプトなし。 最初のスプライトを描く、Twitch エモートをスケッチする、または 32×32 ポートレートを即興で作るには、これが正しいフリクションレベルです:インストールゼロ、アカウントゼロ、学習曲線ゼロ。レイヤードエフェクトを持つアニメーションスプライトのゲームの完全な価値には、Aseprite をインストールするか Piskel を開いてください。

プライバシー、なぜブラウザ専用がここで重要か

ピクセルアートはしばしば未発表のインディーゲームプロジェクト、契約された委託、まだ非公開のブランドキャラクターデザインの進行中の作業です。サーバー側エディタは各ブラシストロークをサードパーティサービスにアップロードし、そこにログとして残り、バックエンドアクセスを持つ誰でも検査できます。このエディタは JavaScript を介して完全にブラウザで実行されます:配置された各ピクセル、各元に戻す、各色のピックアップはあなたのデバイスに残ります。DevTools の Network タブを確認してください、描いている間にリクエストは出ません。PNG エクスポートはブラウザの組み込み canvas.toBlob API と blob URL を使用、アップロードステップなし。読み込み後にページをオフライン(機内モード)にしてもエディタはまだ動作します。未発表のプロジェクト、NDA 下の作業、ブランドアセットデザイン、または見知らぬ人のハードドライブにコピーされたくないスプライトに安全です。

関連ツール

画像カラーピッカー

画像から色を取得します。HEX、RGB、HSL値を取得します。

ファビコンジェネレーター

画像から複数のサイズでファビコンを生成します。

画像コンバーター

PNG、JPG、WebP、その他の形式の間で変換します。