1.0.1 • Published 8 years ago

LightCinematic v1.0.1

Weekly downloads
6
License
-
Repository
-
Last release
8 years ago

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 = "dude_animation_sheet.png";

var sprites = LightSpritesheet.create({
			cols: 9,
			frames: {count: 9, width: 50, height: 72, src: [img]},
			loop:true,
			x: 0,
			y: 0
		});

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