spritesheet-canvas

Small lib to easily create, tick and draw a spritesheet from one source image, rendering it to Canvas.

• Small
• Flexible
• Fits nicely into a canvas game

Install with:

npm install spritesheet-canvas --saveDev

### Try it

• Try it or see it in action in this JSFiddle ### Example code

var SpriteSheet = require('SpriteSheet')
  
var walk_texture = new Image();
walk_texture.src = "./assets/images/walk_texture.png";
 
var walk_spritesheet = SpriteSheet.new(walk_texture, {
  frames: [200, 200, 200], //Each frame defined by the amount of time it will be rendered before moving on
  x: 0, //Start coordinates of the sequence
  y: 0,
  width: 48, //Size of each frame. Only supports one frame size for all
  height: 48,
  restart: true, //Loops the sequence
  autoPlay: true, //Starts the 
});
 
walk_spritesheet.play(); //Help methods to toggle the state
walk_spritesheet.pause();
 
//Do this every game loop, advances the sequence by a 60th of a second by default. Will not advance if paused, so call this always and let the internal state dictate if the tick takes effect
walk_spritesheet.tick();
 
//Use your own methods for placing and rotating the canvas before drawing
context.save()
context.translate(50, 30);
 
//Draw the current sprite in the texture
walk_spritesheet.draw(context);
 
context.restore();