remix-add-sprite

将精灵图添加到游戏工作流

概述

本技能将指导你在 Remix 平台上为基于 canvas 的游戏生成精灵图集。

前提条件

• 游戏 HTML 文件必须已存在（如果从头开始，请先遵循 game-creation 工作流）。
• 必须已在 Remix 平台上创建游戏（需要游戏 ID）。
• 必须设置 REMIX_API_KEY 环境变量。

步骤

1. 检查现有游戏 ID

如果任务上下文或之前的工具结果中有 gameId，请使用该 ID。

否则，读取最近的 .remix-cli.json。较旧的项目可能仍使用 .remix-mcp.json。如果其中任何一个文件包含 gameId，请复用该 ID。

只有当这些来源中都没有 gameId 时，才应遵循 upload-game 工作流来创建一个 ID。

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 规范确认确切 的 schema。

3. 将精灵图集集成到游戏中

使用返回的 URL 和 canvas 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 触发后再启动游戏循环。