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 载荷，也无需单独执行资源上传步骤。

如果你要直接编写 REST 调用，而不是使用 MCP，请先从 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。