Community画像github.com

OmniSprite 🎮✨ — /sprite コマンド

Aseprite 上で大型で詳細なピクセルアートスプライト、タイルセット、アニメーションを pixel-mcp サーバー経由で作成します。ユーザーがスプライト、キャラクター、タイル、アイコン、ピクセルアートシーン、スプライトシート、アニメーションサイクル、または特定のスタイル(8-bit、16-bit、GBA、HDピクセル、ダークファンタジー、サイバーパンク、等角図法)を要求したときに使用します。英語でのスプライト、ピクセルアート、スプライトシート、アニメーションサイクルのリクエストでも起動します。解像度レベル、パレット優先、方向固定、レイヤー、視覚レビューを強制し、結果が小さく平べったくならないようにします。

sprite コマンド とは?

OmniSprite は、Claude Code などの AI エージェントが `pixel-mcp` サーバーを通じて Aseprite 上でピクセルアートを生成するためのスキルです。`/sprite` コマンドを提供し、ユーザーの要求に基づいてスプライト、タイルセット、アニメーションを作成します。このスキルは、解像度レベル(S/M/L/XL/Scene)、スタイルプリセット(12種類)、ビュー方向(側面/3/4/正面/等角図法)、アニメーションサイクル、パレットを細かく指定できるフラグを備えています。ワークフローは、事前要件チェック、簡潔なブリーフィング、パレット優先設計、方向固定、レイヤー構築(背景、影、ベース、シェード、ライト、ディテール、アウトライン、FX)、必須の視覚レビューサイクル、そしてアニメーション(必要な場合)と最終出力(.aseprite、PNG、GIF、スプライトシート)の生成から成ります。このスキルは主に Aseprite と pixel-mcp MCP サーバーを対象とし、プラグアンドプレイのセットアップスクリプト、Lospec からのパレット導出、グリッド法による複雑な形状の作成、品質チェックリストに基づく反復的なレビューをサポートします。これにより、単なるアイコンサイズを超えた、詳細で構造化されたピクセルアートの生成が可能になります。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/LimaEdu-7x/omni-sprite/tree/HEAD

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

OmniSprite 🎮✨ — コマンド /sprite

pixel-mcp サーバー(ツールカタログ: references/mcp-tools.md)を介した Aseprite 上の外科的なピクセルアートワークフローです。ユーザーにはそのユーザーの言語で応答してください。

コマンド /sprite

使用方法: /sprite [説明] [フラグ]。引数がない場合は、何を作成するか尋ねてください。

フラグ効果
--tamanho S|M|L|XL|cenaサイズレベル(デフォルト L、128×128)
--estilo <プリセット>references/styles.md の12スタイルのいずれか(デフォルト hd-pixel)
--vista lateral|3-4|frontal|iso固定ビュー(デフォルト 側面、右向き)
--anim idle,walk,attack,...アニメーションするサイクル(レシピは references/animation.md)
--paleta <slug-lospec|#hex,#hex|ref:パス>指定パレット(Lospec から、または画像から派生)
--doctor診断のみ:Aseprite が見つかるか? MCP が登録されているか?(項目0の手順)
--compilarソースから Aseprite をコンパイルするフローを強制(項目0.4a)

指定されたフラグは、対応するブリーフィングの質問を省略します。不足しているものは grill-me ラウンドで尋ねます。例: /sprite ダークファンタジーの騎士 --tamanho L --anim idle,walk,attack

0. 前提条件(プラグアンドプレイ; 一度確認し、不足を修正)

  1. MCP ツールは見えていますか?(create_canvas, draw_pixels, export_sprite...)。見えている場合は手順1へ。
  2. 見えていない場合、Aseprite を見つけてください: scripts/find-aseprite.ps1(Windows)または scripts/find-aseprite.sh を実行。終了コード0はパスを表示、2は未検出。
  3. Aseprite が見つかった場合→ scripts/install-mcp.ps1 / .sh を実行(自動検出、固定バージョンの pixel-mcp をダウンロード、SHA-256 を確認、登録)。ユーザーにクライアントの再起動を依頼し、続行。
  4. Aseprite が見つからなかった場合→ ユーザーに(1つの質問で、選択肢を示して)尋ねてください。推測しないでください:
    • 「Aseprite がインストールされていません。GitHub からコードをダウンロードしてコンパイルし、設定しますか?(git、CMake、Ninja、C++コンパイラが必要です。約10〜40分かかります。Aseprite のライセンスでは、個人使用のためのコンパイルは許可されていますが、バイナリの再配布は許可されていません。)」
    • 選択肢: (a) はい、コンパイルしてください(推奨)· (b) 自分でインストールします(Steam / aseprite.org / itch.io; 有料、開発者を支援)· (c) Aseprite をスキップして Python/Pillow によるプランBを使用(.aseprite ファイルなし、スタイルルールは同じ)。
    • (a) の場合: scripts/build-aseprite.ps1(Windows)または scripts/build-aseprite.sh を実行。前提条件が不足している場合は、それを伝え、尋ねた上でプラットフォームのパッケージマネージャー(winget / brew / apt)でインストールするよう提案。失敗した場合は references/build-aseprite.md に従う。完了したら手順3を実行。
  5. ブリーフィング(セクション1)を終える前に描画してはいけません。回答が不足している場合は質問するか、デフォルトを使用してその旨を伝えてください。

1. ブリーフィング(grill-me がインストールされている場合はそれを使用)

以下の質問を grill-me の短いラウンドとして行ってください(すべての独立した質問をまとめて、それぞれに推奨回答を付け、「はい」で受け入れます)。スキルが存在しない場合は、通常通り質問してください。不足しているものだけを尋ねてください。

質問無回答の場合のデフォルト
一言 + 雰囲気で何ですか?–
どこで使用されますか(ゲームのジャンル、UI、印刷)? カメラ: 側面 / 3/4 トップダウン / 等角図法 / 正面側面図
スタイル(references/styles.md 参照)hd-pixel
サイズレベル(下記表)L
アニメーション?どのサイクルなし
パレット: 指定 / Lospec から選択 / 参照から派生color スキル(/color)が存在すればそれで派生、なければ Lospec

2. サイズレベル(「アイコンサイズ」を超えて進み、ピクセルアートであり続ける)

レベルキャンバス典型的な用途色数
S32×32アイテム、アイコン8–16
M64×64小さなキャラクター、小道具16–24
L128×128主要キャラクター、詳細な小道具24–40
XL192×192 / 256×256ヒーローポートレート、ボス32–64
シーン320×180 または 480×270背景、キーアート32–64

ルール: ピクセルは正方形であり、非整数値で拡大されてはなりません。詳細はより多くのピクセルから生まれ、ぼかしからではありません。ユーザーが「もっと詳細に」と要求した場合は、ノイズを追加する前にレベルを1つ上げてください。

3. パレット優先

  1. パレットを選択/派生します(references/palette-workflow.md; Lospec の16進数: https://lospec.com/palette-list/<slug>.hex)。
  2. インデックスカラーモードで create_canvas し、その後 set_palette します。各ランプ内でパレットを暗いものから明るいものへ並べ替えます(必要に応じて sort_palette を色相、次に輝度で)。
  3. 孤立した色ではなく、ランプを組み立てます: マテリアルごとに3〜5段階(影、中間、光、ハイライト)、色相シフト(影→より冷たく/彩度高く、光→より暖かく)を含めます。analyze_palette_harmonies で確認。
  4. 描画呼び出しで use_palette: true を渡し、各ピクセルがパレットに適合するようにします。

3b. 方向とポーズ(描画前に固定; references/orientation-and-pose.md 参照)

view(側面 / 3/4 / 正面 / 等角図法)、facing(側面図は右向きに描画)、光の方向、どの手がどの小道具を持つか、マント/髪が垂れる方向を宣言します。ルール: カメラ側の手足は胴体の前に、反対側は後ろに、頭は視線の方向に向け、マントは背中に固定され最下層に、小道具は手に1つずつ、体の前に配置します。アニメーションするものについては、最初にスケルトンを組み立てます: ジョイント + 2ボーンIK、次に形状(rig.py は https://github.com/LimaEdu-7x/omni-sprite/tree/main/examples/knight を参照)。最初のレンダリング後、シルエット/ミラー/オーバーラップテストを実行します。

4. 構築順序(レイヤー、常にこの順序)

add_layer で下から上にレイヤーを作成: bg, shadow-cast, base, shade, light, detail, outline, fx。

  1. シルエット – base に単一の暗い色で全体の形状を塗りつぶします。1倍で見て、シルエットとして認識できない場合はやり直します。強い非対称性、頭/胴体/手足の明確な分離、読みやすいネガティブスペース。
  2. ベタ塗り – fill_area / draw_rectangle / draw_circle / draw_contour でマテリアルごとに1つの中間トーン。
  3. 形状の影 – 1つの光の方向を選択(デフォルト: 左上)。shade/light に apply_shading(シャープなスタイルは hard、HD は smooth)を使用; 主要な光の反対側に選択的な輪郭光を追加。
  4. テクスチャと詳細 – スタイルが許可する場所でのみ draw_with_dither(スタイルを参照); 目、縫い目、バックル、輝きには手動で draw_pixels。ピクセルをグループ化; 孤立ピクセル(ノイズ)や「ギザギザ」(線の不規則な段差)を避ける。
  5. 輪郭 – apply_outline し、その後手動で調整: HD には選択的輪郭(純粋な黒ではなく、色相シフトのある最も暗い色); 8/16ビットには完全な暗い輪郭; 「輪郭なし」にはなし。
  6. アンチエイリアシング – 曲線/斜め線に suggest_antialiasing(1ビット/NES ではスキップ)。
  7. FX – fx/shadow-cast に輝き、火花、地面の影。

複雑な有機的形状にはグリッド法を使用します: スプライトを ASCII グリッド(1文字 = パレットインデックス)として記述し、scripts/grid_to_pixels.py で draw_pixels のバッチに変換します(references/grid-method.md 参照)。大きな領域は図形ツールで、詳細はグリッドで。

5. レンダリングとレビューのサイクル(必須)

各重要なステップの後: export_sprite PNG → scale_sprite ×4(最近傍)でコピー、または拡大 PNG → 画像を確認(PNG を読む)。references/quality-checklist.md のチェックリストを実行。最悪の欠陥を修正し、再度レンダリング。ステップごとに最大3サイクル;その後、残った問題を報告。

6. アニメーション(要求された場合)

references/animation.md に従う: 最初にキーポーズ、次に中間、8〜12 fps(set_frame_duration 80〜125 ms)、サイクルごとに1つのタグ(create_tag: idle, walk, run, attack, hurt, death)、duplicate_frame + 編集、静止部分には link_cel、ピボット/足は同じピクセル行に固定。export_sprite(プレビュー GIF)と export_spritesheet(+JSON)でエクスポート。

7. 納品

.aseprite を保存(save_as)、1倍 PNG、4倍プレビュー PNG、アニメーションの場合は GIF + スプライトシート + JSON をエクスポート。報告: キャンバスサイズ、パレット名/色数、光の方向、スタイル、ファイルパス。

既知の落とし穴(pixel-mcp 0.5.0 で確認)

  • create_canvas は JSON {"file_path": ...} を返します。このパスが他のすべてのツールの sprite_path です。名前パラメータはありません。名前を付けるには save_as を使用してください。
  • output_path には通常のスラッシュを使用してください(C:/Users/ユーザー/出力.png)。バックスラッシュは生成された Lua を壊します(\U がエスケープとして読み取られ)、「invalid character 'U'」エラーで失敗します。
  • scale_sprite はスプライトをその場で変更します: コピーを save_as し、コピーを拡大してエクスポートしてください。
  • フレーム番号は1から始まります(フレーム0で export_sprite するとすべてのフレーム)。
  • draw_pixels は [{x,y,color}] を受け取り、1回の呼び出しで最大約10,000個まで。grid_to_pixels.py がこれを生成します。
  • stdio でサーバーと通信する場合: JSON-RPC は1行ごと。バイトを \n で書き込んでください(CRLF は「invalid trailing data」で失敗)。
  • 完全な例(スケルトン → 影付きパーツ → レイヤー → エクスポート)は https://github.com/LimaEdu-7x/omni-sprite/tree/main/examples/knight にあります。

追加リファレンス(オンデマンドで読み込み)

  • references/build-aseprite.md – ソースから Aseprite をコンパイルし、障害を解決。
  • references/orientation-and-pose.md – ビュー/視線方向、近景/遠景レイヤー、リグ、方向セット。
  • references/styles.md – 正確なルールを持つ12スタイル。
  • references/palette-workflow.md – ランプ、色相シフト、Lospec パレット、色予算。
  • references/animation.md – サイクル、フレーム、タイミング、イージング。
  • references/quality-checklist.md – 合格/不合格レビューリスト。
  • references/resources.md – 学習と統合のための12以上のサイトと20以上のコミュニティスキル/サーバー。
  • references/mcp-tools.md – ツールカタログ。
  • オプションのコンパニオンスキル: color / /color(パレット選択とミラーリング)、スプライトが Web UI 用の場合のフロントエンドデザインスキル。

正直な限界

ツール呼び出しによる1ピクセル単位の描画は遅く、モデルはエクスポートなしではキャンバスを「見る」ことができません。図形 + グリッド法 + レビューサイクルを優先してください。ユーザーが参照画像を送信した場合は、analyze_reference / downsample_image を使用してください。

関連スキル