AIチュートリアル

pxlでピクセルアート、スプライトシート、GIFをコードとして作成

pxlのインストール方法、コンパクトなDSLによるピクセルアートの定義、PNGスプライトとスプライトシートの生成、ブラウザのライブビューアでの変更確認、バリアント、アニメーション、シーン、ライティング、AI支援ワークフローなどの高度な機能を解説します。

2026年10月15日約12分で読了

pxlとは？

pxlは、Node.js向けのコードファーストなピクセルアートツールです。コンパクトな.px.jsまたは.px.tsファイルでアートワークを記述し、コマンドラインインターフェースを使って、PNGスプライト、JSONメタデータ付きスプライトシート、アニメーションGIF、ピクセルグリッド付きの拡大プレビューを生成できます。

このプロジェクトにはNode.js 22.18以降が必要です。ランタイム依存関係はなく、クローンしたリポジトリから使う場合は別途ビルドする必要もありません。

内蔵のブラウザビューアーは、ソースファイルを保存するたびにアートワークを再構築します。編集したアセットを操作ごとに再生することもできるため、手作業で描く場合もAIエージェントと作業する場合も、制作過程を簡単に確認できます。

主な機能

コンパクトなパレット: 1文字のキーに色を割り当て、Pico-8、Sweetie 16、Endesga 32などの組み込みパレットを使用できます。
スプライトとバリエーション: テキストグリッドのスプライトを作成し、反転、自動アウトライン、回転、フリップ、パレットを入れ替えたバリエーションの生成ができます。
描画ツール: 長方形、線、円、ポリゴン、グラデーション、ディザリング、ノイズ、散布ブラシ、タイルマップ、組み込みピクセルフォントを使用できます。
スプライトシート: TexturePacker形式のJSONメタデータ付きで、パック済み画像を書き出せます。
シーン: アートワークをレイヤーで整理し、影と光のレイヤーを追加して、各レイヤーをPNGファイルとして書き出せます。
アニメーション: フレームをベーススプライトへのパッチとして定義し、ストリップ、JSONタグ、GIFファイルを書き出せます。
オプションのライティング: ランプ、グロー、法線ベースのレリーフを追加できます。
便利な診断情報: エラーにはファイル、行、列、アセット、レイヤー、操作の情報が含まれ、該当する場合は「もしかして」の候補も表示されます。

pxlのインストールと実行

方法1: リポジトリをクローンする

プロジェクトをクローンして、そのディレクトリに移動します。

git clone https://github.com/crsolver/claude-pxl.git
cd claude-pxl

クローンした場合は、node bin/pxl.jsでCLIを実行します。付属のサンプルをライブビューアーですぐに開くことができます。

node bin/pxl.js serve examples/shop.px.js

ブラウザでhttp://127.0.0.1:4321/を開きます。アートファイルを保存するたびに、ビューアーがプロジェクトを再構築します。

方法2: npxで実行する

クローンせずに、GitHubリポジトリから直接アートファイルをビルドできます。

npx github:crsolver/claude-pxl build art.px.js

以下のコマンドでは、pxlはクローンした場合のnode bin/pxl.js、またはnpx github:crsolver/claude-pxlのいずれかを意味します。

初めてのコード化スプライトを作成する

art.px.jsという名前のファイルを作成し、次のコードを追加します。

pal({
  k: "#1b1630",
  g: "#8ccf63",
  G: "#4c8a44",
  w: "#fff6e0",
  r: "#e2585e",
  R: "#a63a4c"
})

sprite("slime", { mx: true, outline: "k" }, `
  ....ggg
  ..ggGGg
  .ggGwGg
  gggkwgg
  GGGGGGG`)

sprite("slime_red", {
  base: "slime",
  swap: { g: "r", G: "R" }
})

sheet("chars", ["slime*"], { pad: 1 })

サンプルを理解する

pal()は1文字のキーを16進数カラーに対応付けます。対応付けたキーはスプライトグリッドで直接使用できます。
sprite("slime", ...)はベーススプライトを宣言します。
mx: trueオプションは、指定したスプライトの半分を水平方向に反転します。
outline: "k"は、kに割り当てられたパレットカラーでスプライトのアウトラインを自動的に作成します。
2つ目のスプライトはbase: "slime"を使用し、緑色を赤色に置き換えます。グリッドを複製せずに、色違いのバリエーションを作成できます。
sheet()はcharsという名前のスプライトシートを作成します。slime*パターンは一致するアセットを含み、pad: 1は1ピクセルの余白を追加します。

アセットをビルドする

クローンしたリポジトリで、次を実行します。

node bin/pxl.js build art.px.js

この例では、次のようなファイルが生成されます。

out/sprites/slime.png
out/sprites/slime_red.png
out/chars.png
out/chars.json
out/_preview/*.png

スプライトファイルには、元の1ピクセル単位のサイズでアートワークが保存されます。chars.pngとchars.jsonは、スプライトシートとTexturePacker形式のメタデータを構成します。out/_preview/ディレクトリには、ピクセルグリッド付きの拡大プレビューが保存されます。

ライブビューアーを使う

アートファイル用の開発サーバーを起動します。

node bin/pxl.js serve art.px.js

デフォルトでは、ビューアーはポート4321で利用できます。保存するたびに再ビルドが実行され、編集したアセットが手順ごとに再生されます。出力を無効にしない限り、ビルドコマンドと同じout/ファイルもサーバーによって書き出されます。

別のポートや出力ディレクトリを指定するには、次を使います。

node bin/pxl.js serve art.px.js --port 5000 --out generated

生成したアセットをディスクに書き込まずにビューアーを使うには、次を実行します。

node bin/pxl.js serve art.px.js --no-out

CLIコマンドを詳しく見る

選択したアセットをビルドする

buildコマンドは、出力先ディレクトリ、対象アセット、出力倍率、プレビューに関するオプションを受け付けます：

pxl build <art.px.js> [--out DIR] [--only a,b] [--scale N] [--no-preview]

たとえば、名前を指定した2つのアセットだけを元の4倍の倍率でビルドします：

node bin/pxl.js build art.px.js --only slime,slime_red --scale 4

スプライトをテキストとして確認する

asciiコマンドは、横方向と縦方向のルーラー付きで、アセットをパレットキーとして出力します。個々のピクセルを探すときに便利です：

node bin/pxl.js ascii art.px.js slime

プロジェクト定義を一覧表示する

listを使うと、アセット、グループ、シートをソースの場所とともに表示できます：

node bin/pxl.js list art.px.js

高度なワークフローのヒント

TypeScriptのアートファイルを使う

アートプロジェクトでは、.jsまたは.tsを使用できます。リポジトリには.px.tsファイルのエディター補完を提供するtypes/pxl.d.tsが含まれています。

アートワークを再利用・変形する

アセットが共通の構造を持つ場合は、同じグリッドを繰り返さないようにしましょう。ベーススプライトからバリエーションを作成し、別の配色にはパレットスワップを使い、必要に応じて反転、回転、再利用可能な_parts、stampを活用します。

決定論的なプロシージャルツールを使う

DSLには、グラデーション、ディザリング、ノイズ、散布ブラシ、タイルマップ、再現可能なシードを使うランダムグループが含まれています。再現可能な乱数は、生成されたディテールをビルド間で安定させたい場合に特に役立ちます。

シーンをレイヤーで構築する

大きな構成では、すべての操作を1つのフラットなアセットに配置するのではなく、シーンとレイヤーを使います。pxlは、影と光のレイヤー、およびレイヤーごとのPNG出力に対応しています。完全なAPIについてはreference.mdを参照してください。

アニメーションとライティングを選択的に追加する

アニメーションフレームはベーススプライトへのパッチとして表現できるため、類似フレーム間の重複を減らせます。pxlは、これらの定義をストリップ、JSONタグ、アニメーションGIFに変換できます。ランプ、発光、法線ベースの陰影には、専用のライティングガイドに従ってください。

AIエージェントでpxlを使う

このリポジトリは、エージェントのスキルとして機能するように設計されています。推奨されるループは、アートファイルを書き、ビルドし、プレビューを確認して、ソースに修正を加えることです。ライブビューアーによって、このワークフローをリアルタイムで確認できます。

すべてのClaude Codeプロジェクトにスキルをインストールするには：

git clone https://github.com/crsolver/claude-pxl.git ~/.claude/skills/pxl-pixel-art

現在のプロジェクトだけにインストールするには：

git clone https://github.com/crsolver/claude-pxl.git .claude/skills/pxl-pixel-art

Codex、Cursor、その他のエージェントでは、SKILL.mdを参照するようエージェントに指示し、CLIパスをnode <path-to-pxl>/bin/pxl.jsとして指定してください。ブラウザーでアートの構築を確認したい場合は、エージェントにpxl serveを開始するよう依頼します。

開発コマンド

pxl自体を変更する場合は、開発用の依存関係をインストールしてチェックを実行します：

npm install
npm run check

開発用の依存関係には、TypeScriptとNode.jsの型定義が含まれています。リポジトリのギャラリーを再生成するには、次を実行します：

node scripts/gallery.ts

まとめ

pxlは、ピクセルアートをソースコードとして扱う簡潔な方法を提供します。パレットとテキストグリッドのスプライトから始め、PNGとスプライトシートのアセットにビルドし、迅速なフィードバックのためにライブビューアーを開いたままにします。プロジェクトの成長に合わせて、ランタイム依存関係を導入することなく、再利用可能なバリエーション、描画プリミティブ、レイヤー化されたシーン、アニメーション、ライティング、AI支援の反復ループを追加できます。