add-assets
ジオメトリシェイプをピクセルアートのスプライト（キャラクター・敵・アイテムなど、アニメーション対応）に置き換えます。「スプライトを追加して」「図形を本物のアートに差し替えて」「ピクセルアートにして」「キャラクターをリアルにして」「ゲームアセットを追加して」といった指示に対して使用します。3Dゲームにはadd-3d-assetsを、ゲームプレイの変更にはadd-featureを使用してください。
description の原文を見る
Replace geometric shapes with pixel art sprites — recognizable characters, enemies, and items with optional animation. Use when the user says "add sprites", "replace the shapes with real art", "add pixel art", "make the characters look real", or "add game assets". For 3D games, use add-3d-assets instead. Do NOT use for 3D models (use add-3d-assets) or gameplay changes (use add-feature).
SKILL.md 本文
Performance Notes
- 時間をかけて十分に実施してください
- 速度よりも品質を優先してください
- 検証ステップをスキップしないでください
アセットを追加
基本的な幾何学図形（円、四角形）をすべてのゲームエンティティのピクセルアートスプライトに置き換えます。すべてのキャラクター、敵、アイテム、プロジェクタイルは認識しやすいビジュアルアイデンティティを持つようになります。外部画像ファイルは不要で、すべてコードで生成されます。
手順
$ARGUMENTS にあるゲーム（パスが指定されていない場合はカレントディレクトリ）を分析します。
まず、game-assets スキルを読み込んで、完全なピクセルアートシステム、アーキタイプ、統合パターンを取得します。
ステップ 1: 監査
package.jsonを読んでエンジン（Phaser または Three.js — このスキルは Phaser 対応）を特定するsrc/core/Constants.jsを読んでエンティティタイプ、色、サイズを理解する- すべてのエンティティファイル（
src/entities/*.js）を読んで、エンティティスプライトを作成するgenerateTexture()、fillCircle()、fillRect()、fillEllipse()の呼び出しをすべて見つける - シーンファイルを読んでゲームエンティティとして使用されるインライン図形描画をチェックする
- 現在幾何学的図形を使用しているすべてのエンティティをリストアップする
ステップ 2: 計画
スプライト作成のテーブルを提示します：
| エンティティ | アーキタイプ | グリッド | フレーム | 説明 |
|---|---|---|---|---|
| Player（パーソナリティ） | Personality | 32x48 | 1-4 | [名前]のキャリカチュア、スケール 4 |
| Player（汎用） | Humanoid | 16x16 | 4 | ... |
| Enemy X | Flying | 16x16 | 2 | ... |
| Pickup | Item | 8x8 | 1 | ... |
ゲームが実在する人物または著名な人物を登場させる場合、プレイヤーキャラクターには Personality アーキタイプをデフォルトとします。このアーキタイプは 32x48 グリッドをスケール 4 で使用（レンダリング時 128x192px、キャンバス高さの約 35%）— 一目でその人物を認識できるほどの大きさです。
ゲームの既存のカラースキームに最も合うパレットを選択します：
- DARK — ゴシック、ホラー、ダークファンタジー
- BRIGHT — アーケード、プラットフォーマー、カジュアル
- RETRO — NES スタイル、ミュートされたトーン
グリッドサイズは 8x8（小さなピックアップ）から 16x16（標準エンティティ）、32x48（パーソナリティキャラクター）までの範囲があります。名前付きキャラクターは常に Personality アーキタイプを使用して、その人物を認識するというミーム的なフックが確実に成立するようにします。
ステップ 3: 実装
src/core/PixelRenderer.jsを作成 —renderPixelArt()とrenderSpriteSheet()ユーティリティ関数src/sprites/palette.jsを作成 — 共有カラーパレットsrc/sprites/にスプライトデータファイルを作成：player.js— プレイヤーアイドル + ウォークフレームenemies.js— すべての敵タイプスプライトとフレームitems.js— ピックアップ、ジェム、ハート等projectiles.js— 弾、ファイアボール、ボルト（該当する場合）
- 各エンティティコンストラクタを更新：
fillCircle()/generateTexture()をrenderPixelArt()またはrenderSpriteSheet()に置き換え- 複数フレームを持つエンティティに Phaser アニメーションを追加
- スプライトサイズが変更された場合は物理ボディの寸法を調整（
setCircle()またはsetSize()）
- 静的アイテム（ジェム、ピックアップ）の場合、まだ存在しなければ bob トゥイーンを追加
ステップ 4: 検証
npm run buildを実行してエラーがないか確認- 衝突検出がまだ機能しているか確認（物理ボディのサイズ調整が必要な場合があります）
- 作成および変更されたすべてのファイルをリストアップ
- ユーザーにゲームを実行してビジュアルをチェックするよう促す
- すべてのエンティティの外観が異なるため、
/game-creator:qa-gameを実行してビジュアル回帰スナップショットを更新するよう提案
使用例
標準的なゲーム
/add-assets examples/asteroid-dodge
結果：幾何学図形を使用しているすべてのエンティティを監査 → プレイヤー、小惑星、ジェムのピクセルアートを含む src/sprites/ を作成 → fillCircle()/fillRect() を renderPixelArt() に置き換え → 衝突バウンドを調整。
パーソナリティゲーム（ツイートから）
/add-assets examples/nick-land-dodger
結果：著名な人物を検出 → スケール 4 で 32x48 Personality アーキタイプを使用 → プレイヤーキャラクターとして認識しやすいキャリカチュアを作成 → 敵とアイテムはテーマに沿ったピクセルアートを獲得。
トラブルシューティング
スプライトは表示されるがサイズが正しくない
原因： ピクセルアートの寸法が元のヒットボックスと一致していない。 修正： スプライトの寸法を元の fillRect/fillCircle のサイズに近く保つ。必要に応じて衝突バウンドを調整する。
スプライトが表示されない
原因： 最初のレンダリングフレームの前にキャンバステクスチャが作成されていない。 修正： テクスチャを scene preload() または create() で生成し、update() では生成しない。
次のステップ
ユーザーに以下をお伝えします：
ゲームエンティティが幾何学図形の代わりにピクセルアートスプライトを持つようになりました！各キャラクター、敵、アイテムは独特のビジュアルアイデンティティを持ちます。
作成されたファイル：
src/core/PixelRenderer.js— レンダリングエンジンsrc/sprites/palette.js— 共有カラーパレットsrc/sprites/player.js、enemies.js、items.js— スプライトデータゲームを実行して新しいビジュアルを確認してください。Playwright テストがある場合は、
/game-creator:qa-gameを実行してビジュアル回帰スナップショットを更新してください。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- opusgamelabs
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/opusgamelabs/game-creator / ライセンス: MIT
関連スキル
nano-banana-2
inference.sh CLIを通じてGoogle Gemini 3.1 Flash Image Preview（Nano Banana 2）で画像を生成します。テキストから画像を生成する機能、画像編集、最大14枚の複数画像入力、Google Searchグラウンディング機能に対応しています。トリガーワード：「nano banana 2」「nanobanana 2」「gemini 3.1 flash image」「gemini 3 1 flash image preview」「google image generation」
octocode-slides
洗練されたマルチファイル形式のHTMLプレゼンテーションを生成します。6段階のフロー（概要 → リサーチ → アウトライン → デザイン → 実装 → レビュー）で構成されています。各スライドは独立したHTMLファイルとなり、iframeで読み込まれます。「スライドを作成してほしい」「プレゼンテーションを作ってほしい」「HTMLスライドを生成してほしい」「デックを構築してほしい」といった依頼や、ノート・ドキュメント・コードを洗練されたプレゼンテーションに変換する際に使用できます。
gpt-image2-ppt
OpenAIのgpt-image-2を使用して、視覚的に優れたPPTスライドを生成します。Spatial Glass、Tech Blue、Editorial Monoなど10種類のキュレーション済みスタイルに対応し、ユーザーが提供したPPTXファイルを模倣するテンプレートクローンモードも搭載しています。HTMLビューアと16:9形式のPPTXファイルを出力します。プレゼンテーション、スライド、ピッチデック、投資家向けPPT、雑誌風PPTの作成依頼などで活用してください。
nano-banana
Nano Banana PRO（Gemini 3 Pro Image）およびNano Banana（Gemini 2.5 Flash Image）を使用したAI画像生成機能です。以下の場合に活用できます：（1）テキストプロンプトからの画像生成、（2）既存画像の編集、（3）インフォグラフィックス、ロゴ、商品写真、ステッカーなどのプロフェッショナルなビジュアルアセット制作、（4）複数画像での人物キャラクターの一貫性保持、（5）正確なテキスト描画を含む画像生成、（6）AI生成ビジュアルが必要なあらゆるタスク。「画像を生成」「画像を作成」「写真を作る」「ロゴをデザイン」「インフォグラフィックスを作成」「AI画像」「nano banana」またはその他の画像生成リクエストをトリガーとして機能します。
oiloil-ui-ux-guide
モダンでクリーンなUI/UXガイダンス・レビュースキルです。新機能や既存システム（Webアプリ）に対して、実行可能なUI/UX改善提案、デザイン原則、デザインレビューチェックリストが必要な場合に活用できます。CRAP（コントラスト・反復・配置・近接）をベースに、タスクファーストなUX、情報設計、フィードバック・システムステータス、一貫性、affordances、エラー防止・復旧、認知負荷を重視します。モダンミニマルスタイル（クリーン・余白・タイポグラフィ主導）を強制し、不要なテキストを削減、アイコンとしての絵文字を禁止し、統一されたアイコンセットから直感的で洗練されたアイコンを推奨します。
axiom-hig-ref
Apple Human Interface Guidelines リファレンス — 色（セマンティックカラー、カスタムカラー、パターン）、背景（マテリアル階層、ダイナミック背景）、タイポグラフィ（標準スタイル、カスタムフォント、Dynamic Type）、SF Symbols（レンダリングモード、色、多言語対応）、ダークモード、アクセシビリティ、プラットフォーム固有の考慮事項を網羅したガイドラインです。