spritesheet-canvas v1.0.2

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();