Tile sheets, animation and blitting

A sprite sheet puts several animation frames into one bitmap. Blitting copies a rectangular frame into a destination bitmap, giving you explicit control over what is drawn and when. The same idea works in ActionScript bitmap code and in a Canvas renderer.

Store frame width, frame height, number of columns and animation speed alongside the image. Given a frame index, the source column is the index modulo the number of columns; the row is the integer quotient. Keeping that calculation separate from game movement makes an animation reusable.

Clear the destination once per frame, then copy every visible sprite. If a sprite rotates or scales, consider a display object or a transformed canvas draw instead. Test transparent edges and leave padding between frames if scaling exposes neighboring pixels.

Try the idea

const column = frame % columns;
const row = Math.floor(frame / columns);
ctx.drawImage(sheet, column * frameW, row * frameH,
  frameW, frameH, x, y, frameW, frameH);