Skip to content

Light helper for animations based on spritesheets/image sequence.

License

Notifications You must be signed in to change notification settings

VictorGa/LightCinematic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f75e708 · Jun 7, 2017

History

20 Commits
Jun 12, 2016
Jun 7, 2017
Jun 19, 2016
Jun 19, 2016
Jun 19, 2016
Jun 19, 2016
Jun 12, 2016
Jun 19, 2016
Jun 12, 2016
Jun 19, 2016
Jun 19, 2016
Jun 12, 2016
Jun 19, 2016

Repository files navigation

Build Status Coverage Status Code Climate npm version

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

About

Light helper for animations based on spritesheets/image sequence.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published