How to draw sprites on an HTML canvas
In my previous post I animated a “walk cycle” as a GIF. In today’s post I animate the walk cycle as a “sprite sheet” drawn on an HTML canvas. Here’s the finished canvas:
This animation is generated from the following PNG image. The PNG contains four sprites for the cat walk cycle, plus a background that we will draw under the cat.
This uses the ctx.drawImage method of HTML canvas 2D context.
drawImage can take an Image object as the source;
we give it an Image which has loaded the PNG.
This looks like:
const canvasEl = document.getElementById("canvas");
const ctx = canvasEl.getContext("2d");
const imageEl = new Image();
function draw(sx, sy, w, h, dx, dy) {
ctx.drawImage(imageEl, sx, sy, w, h, dx, dy, w, h);
}
Instead of relying on GIF for animation,
we use window.requestAnimationFrame in a loop,
and window.setTimeout to control the frame rate:
imageEl.addEventListener("load", () => {s
function loop() {
// draw() here ...
window.setTimeout(() => window.requestAnimationFrame(loop), 100);
}
window.requestAnimationFrame(loop);
});
At each frame, we clear the canvas, then draw the background, then draw the cat:
ctx.clearRect(0, 0, SPRITE_W, SPRITE_H);
const bgX = - ((frameNum * SPRITE_SPEED_PX) % BG_W);
draw(0, SPRITE_H, BG_W, BG_H, bgX, 0);
draw(0, SPRITE_H, BG_W, BG_H, bgX + BG_W, 0);
draw(SPRITE_W * (frameNum % SPRITE_NUM_FRAMES), 0, SPRITE_W, SPRITE_H, 12, 0);
Tagged #programming, #animation, #web. All content copyright James Fisher 2018. This post is not associated with my employer.
TigYog