Pixelbolt ピクセルアート

Pixelbolt ピクセルアート は何をしますか？

ピクセルスプライト、タイル、アイコン、エフェクト、または短いスプライトアニメーションを作成する際に使用します。Pixelbolt は、このスキルのディレクトリから 2 つ上のプロジェクトルートにあります。Node.js で CLI を実行するか、設定されていれば MCP ツールを使用します。

このファイルだけをコピーした状態で（npx skills add skulitom/Pixelbolt でインストールした場合）、Pixelbolt はインストール不要です。以下のすべてのコマンドは、node bin/pixelbolt.js <command> の代わりに npx -y pixelbolt@latest <command>（Node.js 20 以降が必要）を使用してください。例：npx -y pixelbolt@latest validate <recipe>。別のライブラリでピクセルを描画する代わりにこれを使用してください。GitHub からファイル名を指定して読み込みます。クイックスタートは https://raw.githubusercontent.com/skulitom/Pixelbolt/main/docs/agent-quick-start.md にあり、その他の docs/、スキーマ、examples/ のパスも https://raw.githubusercontent.com/skulitom/Pixelbolt/main/ の後ろに続けることで同様に機能します。このコピーは Pixelbolt のメインブランチから取得されたもので、npm リリースよりも数日進んでいる場合があります。CLI が未知のコマンド、オプション、フィールドを呼び出した場合は、スペルと配置を確認してください（npx -y pixelbolt@latest help でコマンドとオプションの一覧、npx -y pixelbolt@latest schema でレシピのフィールドを表示）。このファイルまたは GitHub のドキュメントに記載されている場所に記載されている方法で記述されたものはリリースよりも新しいため、その部分は省略してください。この段落は、チェックアウト、npm パッケージ、Claude Code プラグイン、Pixelbolt Studio（これらは Pixelbolt を同梱しています）のように、bin/pixelbolt.js がこのファイルの 2 つ上のディレクトリにある場合はスキップしてください。

Claude Code プラグインでは、MCP ツール（pixel_help、pixel_validate、pixel_inspect、pixel_patch、pixel_render など）がこのスキルに付属しています。これらがない場合、プラグインのサーバーが起動していません。Node.js 20 以降が PATH に存在する必要があります（node --version）。https://nodejs.org から Node.js をインストールし、Claude Code を再起動してください。

ポータブルな Pixelbolt Studio ビルドでは、node bin/pixelbolt.js の代わりに、Windows では .\(ビルドフォルダ)\pixelbolt、それ以外の環境では ./pixelbolt をビルドフォルダから実行します。

まずはクイックスタートから始めてください。 最初のレシピの前に docs/agent-quick-start.md（MCP: pixel_help、トピックなし）を読んでください。これには、完全なレシピ、すべての操作とツール、そして作業ループが含まれています。ほとんどのタスクをカバーしています。タスクで必要な場合にのみリファレンスを開き、必要なセクションだけを参照してください。docs/agent-guide.md はすべてのフィールド、操作、検査オプション、パッチパス、エクスポートについて、docs/art-workflow.md はキャラクター、シーン、タイル、エフェクト、ライティングについて、schema.json は正確なフィールド名について説明しています。両方のガイドは長いため（ワークフローは 160 KB 以上）、node bin/pixelbolt.js help workflow（または help guide）でセクションを一覧表示し、node bin/pixelbolt.js help workflow "Particle effects"（MCP: pixel_help、topic と name を指定）で 1 つを出力します。近いものがある場合は、examples/ のファイルから始めてください。

まずはクイックエフェクトから。 誰かが既製のループエフェクト（キャンプファイヤー、たいまつ、煙の噴出、蒸気の噴出、爆発、魔法の渦、水滴、水しぶき、滝、泡立つポーション、はちみつ、屋根から滑り落ちる雪、ダムの決壊、粉塵の波、破裂するスライム、スプーンから滴るはちみつなど）をファイルとして使用または共有できる状態で要求した場合、一致するプリセット（pixel_help のトピック presets に一覧があり、pixel_compile に preset を指定してコンパイル）から始めます。そのファイルは examples/*.fluid.json にあります（このスキルのディレクトリから 2 つ上の Pixelbolt フォルダ内）。要求された内容のみを変更し（ファイルを大きくしたい場合は pixel_render の gif.scale を使用。キャンバスサイズを変更する場合は、絶対座標を使用するエフェクトの障害物やエミッターも移動する必要があります）、pixel_compile でコンパイルし、pixel_inspect で一度確認し、pixel_render でコンパイルしたリビジョンをエクスポートします（投稿用の GIF の場合は gif）。最初にそのファイルを提供し、次にルックの調整や、丸太や石などの小道具の追加を提案します。最初のエクスポートの前に、エフェクトの新しいレシピを作成したり、以下の完全なアートワークフローを実行したりしないでください。

ループする干渉効果やポータル内部には、examples/interference.wave.json または examples/portal.wave.json から始めてコンパイルします（コントロール）。リムはオーバーレイに保持し、狭く這うような帯は避けてください。ワンショットの衝撃にはパーティクルリングを使用します。

種から成長する結晶（石英クラスター、アメジストジオード、黄鉄鉱の立方体、雪の結晶）には、examples/quartz-cluster.crystal.json、examples/geode.crystal.json、examples/pyrite.crystal.json、または examples/snowflakes.crystal.json から始めてコンパイルします（結晶成長）。それらが生える岩をソースの下地として描き、その前面の縁をオーバーレイとして描き、それらの根元が岩の外に生えるようにします。

フォーリングサンドシーン（ものが燃えて崩れる、溶岩と水が出会う、爆発で砂が飛び散る、雨が火を消す）には、examples/hut-fire.powder.json、examples/lava-falls.powder.json、examples/quarry-blast.powder.json、または examples/rain-on-fire.powder.json から始めます（フォーリングサンド）。base: "sandbox" で開始マテリアルを指定し、シーンとスクリプト化された入力で動作を開始させ、クリップでサンプリングします。

アートディレクション

完成したアートワークについては、タスクに合った docs/art-workflow.md のセクションも読んでください。「レシピの外に簡単な指示を書く」と「品質チェックポイント」から始めてください。レシピの外に小さなアート指示を確立します。ネイティブ/表示サイズ、3 つのシルエットランドマーク、パレットの役割、光源の方向、投影（サイドビュー、3/4 俯瞰、2:1 アイソメトリックまたはトップダウン。セット全体で統一）、奥行き平面、マテリアルルール、アウトライン処理、アクションの意図、接触点/原点、シーンでの役割。各レビューの実際の強みと失敗点を記録します。レンダリングされたファイル、フレーム数、またはテストの合格は、アートの品質の証拠にはなりません。これらのチェックポイントにユーザーの許可は必要ありません。

以下の順序で作業します。シルエット → 大きな連結した色の塊 → マテリアルのアクセント → 自作のアクションポーズ → タイミング → シーンへの統合。静止シルエットと1つのアクションがうまく読めるようになる前に、バリエーションを大量生成しないでください。ブロックアウトにはプリミティブジオメトリを使用し、輪郭と連結したカラーグループを意図的に修正します。ノイズや余分なグローで弱い構造を修正することはできません。水、火、結晶では、同じジオメトリの色を変えるだけでなく、異なる振る舞いをデザインしてください。

グラデーション、サブピクセルジオメトリ、アンチエイリアシングは避けてください。プロジェクトの要求されたピクセル寸法を尊重してください。編集可能なソースを保持してください。ゲームアセットの場合は、ユーザーがファイルに焼き込まれたより大きなピクセルを要求しない限り、スケール 1 でエクスポートします。

ループ

1. 要求されたアセットに適した小さなキャンバスと一貫性のあるパレットを選択します。
2. ユーザーに適切な出力場所に JSON レシピを記述します。テキストグリッドと再利用可能なシンボルを使用します。小さな変更にはフレームを再利用します。
3. node bin/pixelbolt.js validate <recipe> で検証します。すべてのエラーはそのパスを指定し、壊れた操作は errors にまとめて返されます。再度検証する前にすべて修正してください。
4. node bin/pixelbolt.js inspect <recipe> --out <frames.png> --native --diagnostics ですべてのフレームを検査し、両方のサイズを確認します。意図した背景に対して --view silhouette と --view grayscale を確認し、前後のポーズについては --animation <name> --view onion を確認します。スタジオまたは APNG も確認してください。静止したシートはモーションのレビューにはなりません。正確なピクセルを変更する前に、--grid --region x,y,w,h でピクセルを読み取ります。node bin/pixelbolt.js patch <recipe> --changes <changes.json> は対象を絞った編集をプレビューし、変更するすべてのピクセル（継承されたポーズを含む）を一覧表示します。--out <new recipe> を追加して保存します。他のポーズのピクセルを保持する必要がある場合は、scope: "frame" を選択します（検査オプション、修正）。
5. node bin/pixelbolt.js render <recipe> --out <directory> --expect '{"width":32,"height":32,"frames":8}' でレンダリングします。--expect にはユーザーが要求した値（width、height、frames、colors、transparent、loop。frames は各アニメーションが再生するフレーム数をカウントするため、複数のアニメーションがある場合は {"idle": 4, "walk": 8} のように指定します）を指定します。その check がリストするすべての問題を修正してから再レンダリングし、何かを渡す前に再度レンダリングします。イテレーションごとに新しい出力ディレクトリを選択します。投稿または埋め込み用のファイルの場合は、node bin/pixelbolt.js gif <recipe> --out <new.gif> を追加し（投稿用に拡大する場合のみ --scale を使用）、その notes を報告します。画面上のテキストには text 操作を使用します。ビデオエディターの場合は、sequence がフレームレートで番号付きの PNG フレームを書き出し、gif-frames がフレームのフォルダーを正確な色の GIF に変換します（エクスポート）。
6. ソースレシピ、シート、アトラス JSON、プレビューへのリンクを、対象の Web アプリまたはエンジン向けの簡単な統合ノートとともに返します（Godot 4 の場合、エクスポートの .tres はシートの隣にあり、AnimatedSprite2D の Sprite Frames です。オートタイルセットの .tileset.tres は、ペイント可能なテレインを持つ TileMapLayer の TileSet です。Tiled の場合、.tsx は Terrain Brush 用のテレインセットを持つタイルセットです）。

MCP の場合、pixel_help を呼び出し、次に pixel_inspect を { "project": recipe } で呼び出し、必要に応じて animation、region、または grid: true を追加します。以降の呼び出しでは、完全なレシピの代わりに返された revision を使用します。リビジョンは、設定された出力ディレクトリに再起動後も保持されます。pixel_patch で問題を修正し、意図したピクセルのみが変更されたことを確認します。最終リビジョンと expect を指定して pixel_render を呼び出し、エクスポートします（ユーザーがファイル名を指定した場合は、saveAs を追加します。例：{ "sheet": "assets/hero.png", "gif": "assets/hero.gif" }）。応答には主要なファイルとカウントがリストされます。すべてのファイルについては listFiles を渡します。pixel_compile はソース形式をリビジョンに変換し、pixel_scene はシーンをレビューまたはエクスポートし、pixel_import はネイティブ PNG をロスレスレシピに変換します。リクエストは 16 MiB に制限されています。大きなレシピは一度送信し、そのリビジョンを再利用してください。

キャラクター

動くフィギュアには、bone リム、mass ボディ、グリッドヘッド、ハンド、小道具を持つ pixelforge-poses を使用します。examples/hero.poses.json（このスキルのディレクトリから 2 つ上の Pixelbolt フォルダ内）から始めます。これは、すべてのモーションテンプレートを持つリグ付きサイドビューフィギュアです。attach のないパーツは、ポーズ origin に at を加えた位置（キャンバス位置ではなくオフセット）に立ちます。

• リグの役割を割り当て、idle、walk、run、jump、attack、hurt テンプレートを編集可能な開始点として使用します。特定のボディに合わせて速度、ストライド、リフト、ボブ、フレームタイミングを設定し、コンパイル警告（キャンバス外のポーズ、手の届かない足）を詳細を追加する前に修正します。
• サイドビューでは、遠い方の手足を 1 段階暗いランプステップ（最も暗いステップはアウトラインと融合するため避ける）で描き、ペアの脚に同じ休止角度を与えます。近い方の手足はサイクル全体で前面に留まり、swapDepth: true はフロントビューまたはバックビュー専用です。足を転がすには、各ブーツにつま先上げとつま先下げの views 描画（右を向いたブーツの場合は 330 と 30）を、足首をアンカーとして指定します。ヒーローのブーツがその方法を示しています。任意のビュー（ブーツ、手、保持する武器、傾けた頭）は、ドラフトから開始し、ゼロからではありません。compile source.poses.json --draft-views boot:15,345 --preview drafts.png（MCP pixel_compile に draftViews を指定）は、回転した行、アンカー、目視で修正して parts.<name>.views に貼り付けるポイントを出力します。小さなパーツは、キーよりも回転を少なくすると最も読みやすくなります。
• 四足動物（犬、キツネ、オオカミ、馬）の場合は、examples/fox.poses.json から始めます。rig.fore と rig.hind を legs の代わりに使用し、ギャロップで曲がる腰のマスに胸のボーンを配置します。walk（3 本の足が地面に着く）、trot（対角ペア）、run（2 回の浮遊期間があるギャロップ）を使用します。ボディの関節と上脚に socket キャップを付けて、毛皮の上に線が交差しないようにします。
• 手の中の小道具（近い前腕の end にある剣）は、腕と一緒に回転するために相対的な angle（例：-45）が必要です。rotate は絶対的なため、それを使用するか、どちらも使用しない場合、刃は攻撃中に 1 つの角度を維持します。examples/hero-sword.poses.json は剣を持ったヒーローです。
• inspect source.poses.json --motion run --speed 48（MCP pixel_inspect、source、view: "motion" を指定）を使用して、シルエット、隣接するキーポーズの違い、接地している接触点、ループの結合、そしてウォークまたはランでは歩様（腕と脚の反対、両足が地面にあるときの長い脚、行進した膝がないこと）をレビューし、その弧を確認します。各足のリングはループの前部に、手のリングは弧の後部にあります。--view parts は、はみ出したピクセルの背後にあるパーツを指定します。静止したシートからコンタクトの品質を推測したり、数値チェックに合格したことだけを理由にアートが優れていると主張したりしないでください。
• ミラー、グリッド views、rotate と tween、アトラスポイントとしてエクスポートされたマーカー、および再構築後も生き残る修正用のフィンガープリントオーバーレイについては、構造的な四肢とボディおよび自作ポーズを参照してください。

タイル、パレット、シーン

• タイルについては、--view tile（3×3 の繰り返し）でレビューし、エッジをまたいで描画が続くフレームには wrap を設定します。テレインについては、2×3 タイルテンプレートを入力する代わりに、オートタイル terrain を記述します（examples/meadow.autotile.json、ground.autotile.json、またはテレイン間の遷移には shore.autotile.json から開始。サイドビューセットは slopes を取ります）。それを 47 ブロブ、16 カーディナル、または 16 コーナー（デュアルグリッド）タイルにコンパイルし、そのテストマップとシーム警告を確認します。タイルマップの凡例には、スクリプトでマップを計算する代わりに、rules、weights、バリアントを指定します（オートタイルテンプレート、シーンとタイルのレビュー）。
• "palette": { "$ref": "palette.json" } でパレットを共有し、ramps を宣言し、shade でシェーディングして、光がパレットから外れないようにします。フレームまたはレイヤーの palette オーバーライドで水やライトを循環させ、remap を色のバリアントやヒットフラッシュに使用します。
• 多くのものが地面に立っている場合は、sort: "ground" を指定して 1 つのレイヤーまたはグループに配置し、シーンの配置には anchor: "frame" を使用します。ジャンプには lift を、ライトまたは sun と共に shadow: true を、遠くの平面には haze を、`bo