remix-add-image

ゲームワークフローに画像を追加する

概要

このスキルでは、AI 画像を生成し、そのホスト URL をゲームの HTML に組み込む手順を説明します。MCP の generateImage を優先してください。現在は生成とアップロードを一度に行えます。

前提条件

• ゲームの HTML ファイルがすでに存在している必要があります（最初から作成する場合は、先に game-creation ワークフローに従ってください）。
• Remix プラットフォーム上にゲームが作成されている必要があります（ゲーム ID が必要です）。
• MCP 認証または CLI 認証を利用できる必要があります。

手順

1. 既存のゲーム ID を確認する

重要：最初に確認せず、新しいゲームを作成しないでください。

タスクのコンテキストや以前のツール結果で gameId が利用できる場合は、それを使用してください。

それ以外の場合は、最も近い .remix-cli.json を読み取ってください。古いプロジェクトでは .remix-mcp.json が使われている場合もあります。いずれかに gameId が含まれていれば、それを再利用してください。

これらの情報源のいずれにも gameId が含まれていない場合に限り、upload-game ワークフローに従ってゲームを作成してください。

2. 画像を生成する

推奨される MCP の手順：

generateImage({
  gameId: "<your-game-id>",
  prompt: "a pixel-art treasure chest on a grassy hill",
  fileName: "treasure-chest"
})

ツールはホスト済みのアセット URL を直接返します。base64 ペイロードも、別途アセットをアップロードする手順も必要ありません。

MCP を使わず、REST 呼び出しを直接記述する場合は、まず https://api.remix.gg/docs/json から正確なパスとレスポンス形式を取得してください。

3. ゲームアセットとしてアップロードする

MCP の generateImage を使用する場合は、この手順を省略してください。ツールが生成した画像をすでにアップロードし、ホスト URL を返しています。

画像以外のアセット（音声、3D モデル）をアップロードする方法については、 remix-upload-asset スキルを参照してください。

4. URL をゲームに組み込む

アセット URL をゲームの HTML に追加します。画像のサイズは、表現するゲーム内のエンティティに合わせてください。元の解像度のまま表示しないでください。たとえば、ゲーム内で宝箱が 32x32 タイルの場合、元画像のサイズにかかわらず、画像を 32x32 で描画または表示します。

画像の使い方に応じて、組み込み方法が異なります。

HTML の画像要素として使用する場合：

<img src="https://returned-asset-url.png" alt="Treasure chest" width="32" height="32" />

CSS の背景として使用する場合：

.game-bg {
  background-image: url("https://returned-asset-url.png");
}

JavaScript で読み込む画像として使用する場合（canvas ゲーム向け）：

const img = new Image();
img.src = "https://returned-asset-url.png";
img.onload = () => {
  // draw at the entity's size, not the image's native size
  ctx.drawImage(img, x, y, entityWidth, entityHeight);
};

例

Canvas ゲームに背景を追加する

const bg = new Image();
bg.src = "https://uploaded-asset-url/background.png";
bg.onload = () => {
  function draw() {
    ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
    // draw game objects on top...
    requestAnimationFrame(draw);
  }
  draw();
};

スプライトシートを追加する

const spriteSheet = new Image();
spriteSheet.src = "https://uploaded-asset-url/player-sprites.png";
spriteSheet.onload = () => {
  // draw a 32x32 frame from the sprite sheet
  ctx.drawImage(spriteSheet, frameX, frameY, 32, 32, player.x, player.y, 32, 32);
};

ヒント

• プロンプトは具体的に記述してください。 アートスタイル、カラーパレット、コンテキスト（例：「16 ビット風のピクセルアートの赤いドラゴン」）を含めてください。透明度や背景の処理を指定する必要はありません。サーバーが処理します。
• ゲームプレイを開始する前に画像をプリロードしてください。 ちらつきやアセットの欠落を防ぐため、ゲームループを開始する前に onload を待ってください。
• 複数の画像には手順を繰り返してください。 ゲームで必要な画像ごとに、手順 2～4 を実行します。