Sprite Sheet Maker

JavaScript Example

const image = new Image();
image.src = "spritesheet.png";
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
const frameWidth = 32;
const frameHeight = 32;
const columns = 4;
const frameSpacing = 2;
const cellPadding = 0;
const outerMargin = 0;
let frame = 0;
let last = 0;
function drawFrame(index) {
  const col = index % columns;
  const row = Math.floor(index / columns);
  const sx = outerMargin + col * (frameWidth + cellPadding * 2 + frameSpacing) + cellPadding;
  const sy = outerMargin + row * (frameHeight + cellPadding * 2 + frameSpacing) + cellPadding;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, sx, sy, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
}
function loop(time) {
  if (time - last > 125) {
    drawFrame(frame);
    frame = (frame + 1) % 1;
    last = time;
  }
  requestAnimationFrame(loop);
}
image.onload = () => requestAnimationFrame(loop);

CSS Animation Example

The CSS steps example is simplest for a single-row sprite sheet with 0px spacing. For multiple rows or spacing, the JavaScript example is more flexible.

.sprite {
  width: 32px;
  height: 32px;
  background-image: url("spritesheet.png");
  animation: play 0.13s steps(1) infinite;
}
@keyframes play {
  from { background-position: 0 0; }
  to { background-position: -32px 0; }
}