LightCinematicTS

Light helper for animations based on spritesheets/image sequence written in Typescript.

How to use

You have mainly two objects in this small lib: - LightManager - LightCinematic

You can create a scene instantiating LightManager like:

var manager = LightManager.create({fps:25, stage: {width: 200, height:200, canvas:document.getElementById('myCanvas')}});

Create a spritesheet:

var img = new Image();
img.src = "spritesheet.png";

var sprites = new LightCinematic({
 		frames: {cols: 9, count: 9, width: 50, height: 72, src: [img]},
 		loop: -1, (infinite loop: -1)
 		x: 0,
 		y: 0,
 		multispritesheet: true,
       onComplete: (sprite:LightCinematic) => {}
 	});
 
  sprites.setContext(<CanvasRenderingContext2D>document.getElementById('myCanvas').getContext('2d'));
 
  requestAnimationFrame(() => {
  	sprites.draw();
  })

Add add it to the manager

manager.add(sprites);

Whenever you feel ready, start the manager:

manager.start();

Light Manager Config

These are the properties you can pass to the manager:

• fps : Frames per second which the animation will be drawn. - Default: 25
• stage : Contains the information about your canvas dom element`
  • width : your canvas total width - Default: 300
  • height : your canvas total height - Default: 300
  • canvas : HTML Canvas element

Light Spritesheet Config

These are the properties you can pass to the spritesheet:

• cols : Amount of columns in the spritesheet
• frames : Contains the information about frames in the spritesheet`
  • count : total amount of frames
  • width : width of each frame
  • height : height of each frame
  • src : Array of images (if it's just one image, it will be taken as spritesheet)
• loop : Indicates if the spritesheet must loop
• x : x position within your canvas (Relative to 0,0)
• y : y position within your canvas (Relative to 0,0)
• scale : scale factor range 0 to 1

Contributing

• You need to have Typescript transpiler installed: http://www.typescriptlang.org/
• Set the following arguments to the compiler: --target ES5 --declaration