remix-add-sprite

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add Sprite to Game Workflow

为游戏添加精灵图的工作流程

Overview

概述

This skill guides you through generating sprite sheets for canvas-based games on the Remix platform.

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

Prerequisites

前提条件

The game HTML file must already exist (follow the game-creation workflow first if starting from scratch).
A game must be created on the Remix platform (you need a game ID).
The
```
REMIX_API_KEY
```
environment variable must be set.

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

Steps

步骤

1. Check for Existing Game ID

1. 检查现有Game ID

Read

.remix-settings.json

in the current directory. If it exists and contains a

gameId

, use that value.

Only if

.remix-settings.json

does not exist or has no

gameId

should you follow the upload-game workflow to create one.

读取当前目录下的

.remix-settings.json

文件。如果该文件存在且包含

gameId

，则使用该值。

只有当

.remix-settings.json

不存在或没有

gameId

时，才需要遵循upload-game工作流程来创建一个。

2. Generate the Sprite Sheet

2. 生成精灵图

Call the sprite generation endpoint:

POST https://api.remix.gg/v1/games/{gameId}/sprites/generate
Authorization: Bearer $REMIX_API_KEY
Content-Type: application/json

{
  "prompt": "a pixel-art knight walking animation, 4 frames",
  "gridSize": 4,
  "imageUrl": null
}

Parameters:

```
prompt
```
(required) -- description of the sprite and animation
```
gridSize
```
(optional) -- number of frames in the sprite sheet grid
```
imageUrl
```
(optional) -- reference image URL to base the sprite on

The response returns

spriteUrl

and

transparentSpriteUrl

directly (already hosted -- no separate upload step needed).

调用精灵图生成接口：

POST https://api.remix.gg/v1/games/{gameId}/sprites/generate
Authorization: Bearer $REMIX_API_KEY
Content-Type: application/json

{
  "prompt": "a pixel-art knight walking animation, 4 frames",
  "gridSize": 4,
  "imageUrl": null
}

参数说明：

```
prompt
```
（必填）—— 精灵图及动画的描述
```
gridSize
```
（可选）—— 精灵图网格中的帧数
```
imageUrl
```
（可选）—— 用于生成精灵图的参考图片URL

接口响应会直接返回

spriteUrl

和

transparentSpriteUrl

（已托管，无需单独上传）。

3. Integrate the Sprite Sheet into the Game

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

Use the returned URL with canvas

drawImage

to render individual frames:

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();
};

Use

transparentSpriteUrl

when you need the sprite rendered over other game elements without a background.

使用返回的URL，通过Canvas的

drawImage

方法渲染单个帧：

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

const frameWidth = 64;  // 单帧宽度
const frameHeight = 64; // 单帧高度
const totalFrames = 4;
let currentFrame = 0;

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

    // 从精灵图绘制当前帧
    ctx.drawImage(
      sprite,
      currentFrame * frameWidth, 0,  // 精灵图中的源坐标x、y
      frameWidth, frameHeight,        // 源宽高
      player.x, player.y,            // 画布上的目标坐标x、y
      frameWidth, frameHeight         // 目标宽高
    );

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

当你需要精灵图在游戏元素上无背景渲染时，请使用

transparentSpriteUrl

。

Tips

提示

Be specific about frame count and action. "4-frame walk cycle" is better than "walking character".
Specify art style. Include "pixel-art", "hand-drawn", "flat vector", etc. in your prompt.
Frame layout is horizontal. Frames are arranged left-to-right in a single row. Divide the image width by
```
gridSize
```
to get individual frame dimensions.
Use
transparentSpriteUrl
for in-game sprites that need to overlay backgrounds or other elements.
Preload before gameplay. Wait for
```
onload
```
before starting the game loop.

明确帧数和动作。“4帧行走循环”比“行走角色”的描述更准确。
指定艺术风格。在prompt中包含“像素风”、“手绘风”、“扁平化矢量图”等描述。
帧布局为水平排列。帧在单行中从左到右排列。将图片宽度除以
```
gridSize
```
即可得到单帧尺寸。
对需要叠加背景或其他元素的游戏精灵使用
transparentSpriteUrl
。
游戏开始前预加载。在启动游戏循环前等待
```
onload
```
事件触发。