Add Sprite to Game Workflow

Overview

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.

Steps

1. Check for Existing Game ID

.remix-settings.json

gameId

.remix-settings.json

gameId

2. Generate the Sprite Sheet

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

  (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

spriteUrl

transparentSpriteUrl

3. Integrate the Sprite Sheet into the Game

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

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.