Sprite Sheet

A sprite sheet is a single image containing multiple frames of an animation, arranged in a consistent grid. Each frame has the same size, and its position can be calculated mathematically. This makes sprite sheets simple and efficient for animations like walking or running cycles.

+------------------------------------+
| idle1 | idle2 | run1 | run2 | run3 |
+------------------------------------+

Example:

const frameWidth = 32;
const frameHeight = 32;
const frameIndex = 2;

ctx.drawImage(
texture,
frameIndex \* frameWidth, 0, frameWidth, frameHeight,
x, y, frameWidth, frameHeight
);

No metadata is needed because the frame layout is predictable.

Texture Atlas

A texture atlas is a single large texture that contains many unrelated sprites packed tightly together. The images inside can be any size or shape. A metadata file (often JSON or XML) tells the engine where each sprite is located in the atlas.

+------------------------------------+
| player_idle | enemy_run | coin    |
| UI_button   | explosion_frame1 ... |
+------------------------------------+

Example metadata:

{
  "player_idle": { "x": 0, "y": 0, "w": 32, "h": 32 },
  "coin": { "x": 100, "y": 0, "w": 16, "h": 16 }
}

Drawing with metadata:

const frame = atlas["coin"];
ctx.drawImage(
  texture,
  frame.x,
  frame.y,
  frame.w,
  frame.h,
  x,
  y,
  frame.w,
  frame.h
);

The atlas reduces texture swaps and improves rendering efficiency because many sprites share one texture.