2d Games Assets Generator

2d-assets-mcp

ゲームのアートをデザインする前に、ゲームの手触りをデザインしましょう。

ワイヤーフレームがスケッチを始める前にデザイナーがユーザーフローを視覚化するのに役立つように、2d-assets-mcp は、ゲーム開発者が最終的なアートワークに何時間も費やす前に、タイミング、フレームレート（FPS）、コリジョン境界、UI レイアウトを視覚化するのに役立ちます。

この MCP（Model Context Protocol） サーバーを使うと、あらゆる AI アシスタント（Antigravity、Claude Code、Codex、Devin など、MCP 互換であればどれでも）が、PNG 形式の高度な 2D モックアップ／プレースホルダーアセットをプロジェクトフォルダーに直接生成できます。時間を節約してプロトタイプをすばやく作成し、2d-assets-mcp でゲームの手触りを調整してから、準備ができたらモックアップをオリジナルのアートワークに置き換えましょう。

この MCP はゲームエンジンに依存せず、PNG のインポートに対応するあらゆるゲームエンジンで問題なく動作します。たとえば、次のようなエンジンに対応しています。

• Godot
• Unity
• Unreal Engine
• GameMaker
• Construct
• RPG Maker
• その他多数！

グラデーション、パターン、透明度、テキストの回転、自動スケーリングに完全対応し、チャットだけで、画像エディターを開くことなく、仮の体力バー、スプライトシート、思いつく限りの UI 要素を作成して時間を節約できます。 この MCP は、最終的なアートアセットを待たずに、スケール、ジャンプの軌道、アニメーションのタイミングをプロトタイプで試しながら、まずゲームの手触りをテストして改善できるようにすることを目指しています。しかも、手間はかかりません。プレースホルダーのボタンを 20% 大きくしたい場合は、AI クライアントに再生成を頼むだけです。

ヒント

2d-assets-mcp は AI に適したメタデータを備えています。→ 生成される各 PNG には、サイズ、色、形状、グラデーションのプロパティ、パターンの詳細、テキストのプロパティ、線のプロパティ、説明を含むリッチな JSON メタデータが EXIF データに直接埋め込まれるため、視覚機能のない AI モデルでもアセットの内容を理解できます。

生成アセットの例

この MCP サーバーで生成されたアセットの例を紹介します。

キャラクタースプライトとアニメーション

ヒーローの待機アニメーション（8 フレーム、512x64）

エフェクト付きの 8 フレーム待機アニメーションスプライトシート

UI 要素

攻撃ボタン（128×48）

赤いグラデーション、角丸、「ATTACK」ラベル付きのボタン

体力バー（200×24）

緑色の塗りつぶしが 75% で、濃いグレーのトラックが付いた体力バー

ゲームアイテム

金貨（32×32）

放射状グラデーション、ドットパターンのオーバーレイ、「COIN」ラベル付きの円形コイン

草と水

木

アニメーションスプライトシート

炎のアニメーション（4 フレーム、192x48）

4 フレームのスプライトシート

セキュリティ上の考慮事項

アセットの内容

• 生成されるアセットは純粋なプレースホルダー画像であり、悪意のあるコードは含まれません。
• 埋め込まれたメタデータは通常の JSON であり、実行可能ではありません。

この MCP サーバーは時間を節約するためにお使いのマシンへ直接ファイルを書き込むため、次のセキュリティのベストプラクティスをご確認ください。

ファイルシステムへのアクセス

• サーバーは、AI アシスタントが指定した任意のパスにファイルを書き込めます。
• 推奨事項： AI クライアントを設定し、アクセスをゲームのプロジェクトディレクトリのみに厳しく制限してください。
• 警告： AI にプロジェクトディレクトリ外のアセットを生成させる場合は、十分に注意してください。

パストラバーサル

• このサーバーはパスを検証しますが、MCP サーバーを扱う際は、パストラバーサルの試みに常に注意し、操作を確定する前に生成されたファイルパスを確認してください。

全般的なベストプラクティス

• あいまいさを防ぐため、設定では絶対パスを使用してください。
• AI のアクセスをゲームのプロジェクトディレクトリのみに制限してください。
• バージョン管理にコミットする前に、生成されたアセットを確認してください。
• Node.js の依存関係を最新の状態に保ってください。

主な機能

• アセットを即座に生成：ツールを 1 回呼び出すだけで、視覚設定をすべて指定した PNG を 1 つ生成します。
• スプライトシートと一括モード：複数のフレームを生成するか、1 回のリクエストでそれらを 1 つのアニメーションストリップスプライトシートに合成します。
• 豊かなビジュアル：単色塗りつぶし、線形／放射状グラデーション、ストライプ／ドット／グリッドパターンのオーバーレイ、角丸、円、不透明度、ストロークの制御に対応しています。
• 動的な UI 要素：fillPercent と trackColor を使って、一部が塗りつぶされたプログレスバーやヘルスバーを作成できます。
• 自動スケーリングするラベル：テキストはアセットに収まるよう自動的にスケーリングされます。必要に応じて、明示的な fontSize で上書きすることもできます。
• 視覚機能を持たない AI にも対応：埋め込み JSON メタデータは、画像のピクセルを読み込まずに read_image_metadata で読み取れるため、視覚機能を持たない AI のワークフローに最適です。
• スマートな命名：出力ファイルには、モデルがアセットの寸法を視覚的に確認できない場合でも寸法がわかるよう、寸法を含む名前が自動的に付けられます（例：player_idle_128x128.png）。

ツールリファレンス

この MCP サーバーは、2D アセットのメタデータを生成・読み取る 3 つのツールを AI に提供します。

1. generate_mock_asset

単一の PNG アセットを生成し、ディスクに書き込みます。グラデーション、パターン、透明度、テキストの回転、埋め込みメタデータに対応しています。

メモ

出力ファイル名の形式

サーバーは書き込み前に、ファイル名へ自動的に寸法を追加します。

player_idle.png  →  player_idle_128x128.png

2. generate_mock_asset_batch

1 回のリクエストで複数のアセットを生成します。個別の PNG または 1 つにまとめたスプライトシートに対応しています。

メモ

スプライトシートのレイアウト

すべてのアセットを横一列（従来のアニメーションストリップ形式）に配置します。各フレームセルのサイズは、バッチ内で最も大きいアセットに合わせます。小さいアセットはセル内の中央に配置されます。出力ファイル名には、シート全体のサイズが含まれます。

player_run.png  →  player_run_648x136.png

3. read_image_metadata

このサーバーで生成された任意の PNG の EXIF ImageDescription フィールドに埋め込まれた JSON メタデータを読み取ります。画像をデコードせずにアセットの内容を理解できるため、視覚機能を持たない AI モデルに役立ちます。

メタデータの埋め込み方法

メタデータは、sharp ライブラリの withMetadata API を使用して、PNG の EXIF IFD0.ImageDescription フィールドに JSON 文字列として保存されます。

読み取りには、標準的な TIFF のバイト列走査を意図的に回避します。バイナリの TIFF 構造を解析する代わりに、既知の "generator":"2d-assets-mcp" キーを UTF-8 文字列として生の EXIF バッファー内から検索し、周囲の JSON オブジェクトを抽出します。これにより、さまざまな PNG ライターで発生する TIFF のパディング、バイト順の違い、通常と異なる IFD レイアウトの影響を受けずに読み取れます。

{
  "generator": "2d-assets-mcp",
  "type": "asset",
  "name": "player_idle",
  "width": 128,
  "height": 128,
  "color": "#4A90E2",
  "shape": "rounded-rectangle",
  "fillMode": "linear-gradient",
  "fillPercent": 100,
  "trackColor": null,
  "pattern": "none",
  "secondaryColor": "#2E5A8A",
  "gradientAngle": 45,
  "textRotation": 0,
  "textPosition": "center",
  "strokeColor": "#000000",
  "strokeWidth": 4,
  "description": "Player idle placeholder, blue rounded rectangle 128x128",
  "createdAt": "2025-01-15T10:30:00.000Z"
}

{
  "generator": "2d-assets-mcp",
  "type": "spritesheet",
  "totalWidth": 648,
  "totalHeight": 136,
  "columns": 4,
  "rows": 1,
  "frameCount": 4,
  "frameWidth": 128,
  "frameHeight": 128,
  "margin": 8,
  "spacing": 8,
  "frames": [
    {
      "index": 0,
      "x": 8,
      "y": 8,
      "width": 128,
      "height": 128,
      "name": "frame_0",
      "color": "#4A90E2",
      "shape": "rounded-rectangle"
    }
  ],
  "createdAt": "2025-01-15T10:30:00.000Z"
}

AI 向けのプロンプト例

AI コーディングアシスタントに接続したら、ワークフローを効率化するために次のプロンプトを試してみてください。

単一アセット

「プレイヤーキャラクター用に、C:\Users\me\project\assets\sprites\（Windows）、/home/me/project/assets/sprites/（Linux）、または /Users/me/project/assets/sprites/（macOS）に 128×128 の青い角丸長方形のプレースホルダーを作成してください。『Player』とラベルを付け、放射状グラデーションを設定してください。」

ヘルスバー

「200×24 ピクセルで、塗りつぶし率 65％、細い線、赤い塗りつぶし色、暗いグレーのトラックのヘルスバー PNG を、プロジェクトの UI フォルダーに生成してください。ファイル名は health_bar.png にしてください。」

スプライトシート

「プレイヤー用に、4 フレームの走行サイクルのスプライトシートを作成してください。各フレームは 64×64 で、青の濃淡を変え、『Frame 1』から『Frame 4』までラベルを付けてください。プロジェクトの sprites フォルダーに保存してください。」

メタデータを読み取る

「プロジェクトの sprites フォルダーにある player_idle_128x128.png のメタデータを読み取ってください。」

インストール

オプション 1：npx で直接使用する（インストール不要）

あらゆる AI コーディングアシスタントに接続する最も速い方法です。

{
  "mcpServers": {
    "2d-assets": {
      "command": "npx",
      "args": ["-y", "2d-assets-mcp"]
    }
  }
}

オプション 2：パッケージマネージャー（pnpm、npm、yarn）を使って手動でインストールする

1. リポジトリをクローンする

git clone https://github.com/crony-io/2d-assets-mcp.git
cd 2d-assets-mcp

2. 依存関係をインストールする

pnpm install   # recommended
# or: npm install
# or: yarn install

3. プロジェクトをビルドする

pnpm run build
# or: npm run build
# or: yarn run build

4. MCP クライアントを設定する

{
  "mcpServers": {
    "2d-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/2d-assets-mcp/dist/index.js"]
    }
  }
}

オプション 3：pnpm または npm でグローバルにインストールする

このプロジェクトは、どの Node.js パッケージマネージャーでも動作します。お好みのものを選んでください。

npm

npm install -g 2d-assets-mcp

pnpm

pnpm add -g 2d-assets-mcp

次に、インストールしたバイナリを指定します。

{
  "mcpServers": {
    "2d-assets": {
      "command": "2d-assets-mcp"
    }
  }
}

Claude Code / Claude Desktop

Claude Code／Claude Desktop の MCP 設定に追加します。

{
  "mcpServers": {
    "2d-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/2d-assets-mcp/dist/index.js"]
    }
  }
}

Devin

Devin の MCP 設定（mcp_config.json）に追加します。

{
  "mcpServers": {
    "2d-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/2d-assets-mcp/dist/index.js"],
      "disabled": false
    }
  }
}

Cursor

プロジェクト内に .cursor/mcp.json を作成します。

{
  "mcpServers": {
    "2d-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/2d-assets-mcp/dist/index.js"]
    }
  }
}

開発

前提条件

• Node.js 18 以降
• pnpm 8 以降 または npm 9 以降（どのパッケージマネージャーでも使用できます）

セットアップ

git clone https://github.com/crony-io/2d-assets-mcp.git
cd 2d-assets-mcp
# Choose your package manager:
pnpm install   # recommended
# or
npm install
# or
yarn install

スクリプト

新しいツールの追加

1. src/tools/yourTool.ts を作成し、registerYourTool(server: McpServer) 関数をエクスポートします
2. src/server.ts でインポートして呼び出します
3. 新しい Zod スキーマを src/schemas.ts に、型を src/types.ts に追加します

ライセンス

MIT — 全文は LICENSE を参照してください。

コントリビューション

Issue とプルリクエストをいつでも歓迎します。PR を作成する前に、次の点を確認してください。

1. pnpm run check または npm run check を実行します（エラーがないこと）。
2. 新しいツールはそれぞれ src/tools/ 内の独立したファイルに追加します。
3. 新しい型は src/types.ts から、スキーマは src/schemas.ts からエクスポートします。
4. 新規または変更したパラメーターについて、この README の ツールリファレンス セクションを更新します。