<canvas id="demoCanvas" width="64" height="64"></canvas> import Player from 'player-animator'; const canvas = document.getElementById('demoCanvas'); const ctx = canvas.getContext('2d');
// Frame order: indices 0,1,2,3 (repeat) frames: [0, 1, 2, 3], install player-animator, version 0.9.9 or later.
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. canvas id="demoCanvas" width="64" height="64">
// 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; import Player from 'player-animator'
// Speed: frames per second fps: 12,