remix-add-sprite

ゲームワークフローにスプライトを追加する

概要

このスキルでは、Remix プラットフォーム上でキャンバスベースのゲーム向けスプライトシートを生成する方法を説明します。

前提条件

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

手順

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

利用できる場合は、タスクコンテキストまたは以前のツール結果にある gameId を使用します。

それ以外の場合は、最も近い .remix-cli.json を読み込みます。古いプロジェクトでは、引き続き .remix-mcp.json が使われている場合があります。どちらかに gameId が含まれている場合は、それを再利用します。

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

2. スプライトシートを生成する

MCP の generateSpriteSheet を優先してください。

generateSpriteSheet({
  gameId: "<your-game-id>",
  prompt: "a pixel-art knight walking, side view, 2D game character",
  gridSize: 4
})

レスポンスには、ホストされた spriteUrl、transparentSpriteUrl、グリッドのメタデータ、警告が含まれます。代わりに REST 呼び出しを記述する必要がある場合は、まず OpenAPI 仕様で正確なスキーマを確認してください。

3. スプライトシートをゲームに組み込む

返された URL を使い、キャンバスの drawImage で個々のフレームを描画します。

const sprite = new Image();
sprite.src = "https://returned-sprite-url.png";

const frameWidth = 64;  // width of a single frame
const frameHeight = 64; // height of a single frame
const totalFrames = 4;
let currentFrame = 0;

sprite.onload = () => {
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the current frame from the sprite sheet
    ctx.drawImage(
      sprite,
      currentFrame * frameWidth, 0,  // source x, y in the sprite sheet
      frameWidth, frameHeight,        // source width, height
      player.x, player.y,            // destination x, y on canvas
      frameWidth, frameHeight         // destination width, height
    );

    currentFrame = (currentFrame + 1) % totalFrames;
    requestAnimationFrame(animate);
  }
  animate();
};

背景なしで他のゲーム要素の上にスプライトを描画する場合は、transparentSpriteUrl を使用してください。

ヒント

• フレーム数とアクションを具体的に指定してください。 「歩くキャラクター」より「4フレームの歩行サイクル」のほうが適切です。
• アートスタイルを指定してください。 プロンプトに「pixel-art」、「hand-drawn」、「flat vector」などを含めます。
• フレームのレイアウトは、返されたグリッドのメタデータに従います。 横一列のストリップだと決めつけず、生成されたシートと指定した gridSize からフレームの幅と高さを計算してください。
• 背景や他の要素に重ねる必要があるゲーム内スプライトには、transparentSpriteUrl を使用してください。
• ゲームプレイの前にプリロードしてください。 ゲームループを開始する前に onload を待ちます。