ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage( player.image, sx, sy, 32, 32, 0, 0, 64, 64 ); };
// 1. Create the player const player = new Player({ // Sprite sheet image (loaded separately) image: document.getElementById('spriteImage'), // or new Image()
// Auto start playing autoplay: true }); install player-animator, version 0.9.9 or later.
// Loop forever loop: true,
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: You need version 0
// Speed: frames per second fps: 12,
// Frame size frameWidth: 32, frameHeight: 32, // Frame size frameWidth: 32
// Frame order: indices 0,1,2,3 (repeat) frames: [0, 1, 2, 3],