// 1. Create the player const player = new Player({ // Sprite sheet image (loaded separately) image: document.getElementById('spriteImage'), // or new Image()
// Frame order: indices 0,1,2,3 (repeat) frames: [0, 1, 2, 3],
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.
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.
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. Give it a spin – your animated characters will thank you
// Speed: frames per second fps: 12,
As of its 0.9.9 release, the API is stable, flexible, and perfect for games, interactive avatars, or even animated icons. Let’s install it and write our first animation. You need version 0.9.9 or later . The library is available as an ES module. Using a package manager (npm / yarn) npm install player-animator@^0.9.9 Using a CDN (quick prototyping) <script type="importmap"> { "imports": { "player-animator": "https://unpkg.com/player-animator@0.9.9/index.js" } } </script> Or import directly: import Player from 'https://unpkg
// 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;