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.
<canvas id="demoCanvas" width="64" height="64"></canvas> import Player from 'player-animator'; const canvas = document.getElementById('demoCanvas'); const ctx = canvas.getContext('2d'); 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
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage( player.image, sx, sy, 32, 32, 0, 0, 64, 64 ); }; Have you used player‑animator in a project
// Frame order: indices 0,1,2,3 (repeat) frames: [0, 1, 2, 3],
// 1. Create the player const player = new Player({ // Sprite sheet image (loaded separately) image: document.getElementById('spriteImage'), // or new Image()
// 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;