Install Player-animator, Version - 0.9.9 Or Later.

// Loop forever loop: true,

// Speed: frames per second fps: 12,

If you’ve ever tried to build a sprite‑based animation system from scratch in JavaScript, you know how quickly it becomes messy: frame counters, manual canvas clearing, speed adjustments, and state management. That’s why I was excited to discover Player‑Animator – a tiny, no‑dependency library that makes sprite sheet animations a breeze. install player-animator, version 0.9.9 or later.

// 2. Draw the current frame on each animation tick player.onFrame = (frameIndex) => { const sx = (frameIndex % 4) * 32; // X offset in sprite sheet const sy = 0; // Loop forever loop: true, // Speed: frames

Give it a spin – your animated characters will thank you. Have you used player‑animator in a project? Let me know on Mastodon or GitHub. Draw the current frame on each animation tick player

import Player from 'https://unpkg.com/player-animator@0.9.9/index.js'; Let’s animate a simple sprite sheet. Assume you have a sprite sheet character.png with 4 frames (each 32×32 pixels) in a row.

// 1. Create the player const player = new Player({ // Sprite sheet image (loaded separately) image: document.getElementById('spriteImage'), // or new Image()