Sprites in TCJSgame

Sprites are animated graphics that bring characters, objects, and effects to life. In TCJSgame v3, the Sprite class is designed to handle sprite sheet animations. A sprite sheet is a single image containing multiple frames of an animation, laid out horizontally. Instead of drawing each frame manually, the Sprite class automatically cycles through them.

The constructor takes five arguments: the sprite sheet image, frameWidth, frameHeight, total frameCount, and frameSpeed. The update() method moves the animation forward, while draw(ctx, x, y) renders the current frame on the canvas.

Basic Example

// Load a sprite sheet
let img = new Image();
img.src = "player.png";

// Create sprite: 4 frames, 64x64 each
let playerSprite = new Sprite(img, 64, 64, 4, 8);

function update() {
  display.clear();

  // Animate
  playerSprite.update();

  // Draw at position (100,100)
  playerSprite.draw(display.context, 100, 100);
}
    

Combining with Components

Since Sprite does not handle movement or physics, you can combine it with a Component to make a fully interactive game object. The component manages position and physics, while the sprite handles animation.

let hero = new Component(64, 64, null, 50, 50, "image");
let heroSprite = new Sprite(img, 64, 64, 4, 6);

function update() {
  display.clear();

  // Move component
  hero.x += 2;

  // Update and draw sprite at hero's position
  heroSprite.update();
  heroSprite.draw(display.context, hero.x, hero.y);
}