npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sprite-reader

v0.1.6

Published

Little TexturePacker animation engine. It allows you to play in a canvas your TexturePacker JSON export (array typed).

Downloads

268

Readme

sprite-reader

Little TexturePacker animation engine. It allows you to play in a canvas your TexturePacker JSON export (array typed).

Installation

npm install -S sprite-reader

How to use

var SpriteReader = require('sprite-reader');

var reader;

var img = new Image();
img.onload = function() {
	
	reader = new SpriteReader(img, require('sprite-data.json'));

	anim();
};
img.src = 'sprite.jpg';

function anim() {
	
	requestAnimationFrame(anim);

	reader.update();
}
With multipack

In order to work with multipack (and only in that case), TexturePacker configuration must follow some configuration rules :

  • Algorithm: Basic
  • Sort by: Name
  • Sort order: Ascending
  • Detect identical sprites has to be unchecked

Documentation

Constructor

new SpriteReader(image, json[, options]);

image Array[Image]

The loaded images which contain the sprites. Single Image can be passed without array.

json Array[Object]

JSON datas associated to image order. Length of the array must be equals to image length.


Options

autoplay Boolean true

Start playing immediately when instanciated

canvas Canvas null

The targeting canvas element. If not provided, one will be created and must be inserted, accessible through canvas property.

fillColor Hex null

Fill background color

fps Number 30

FPS of the animation

from Number 0

Starting sprite

loop Boolean false

Loop when it reaches to value

onReady Function null

Called when all sprites have been cached

onComplete Function null

Called when the animation complete. Does not work if repeat is set.

onRepeat Function null

Called at each repeat

onRepeatComplete Function null

Called when the animation has played all repeat

repeat Number 0

How many time the animation should repeat

retina Boolean false

If true, the created canvas (if no one was provided) would be styled with width and height divided by 2

reverse Boolean false

If true, animation will be played in reverse side

to Number null

Frame to stop the animation


Methods

update([force])

Update the current sprite according to fps. This method has to ba called by your own in a raf.

  • force Boolean false : If force is set to true, FPS will be ignore and current frame will be updated

play()

Start playing from last known position

pause()

Pause at current position

stop()

Stop playing and set current position to from value

reverse([side])

Switch playing side, optionaly forcing it

  • side Boolean null : Switch playing side. If side is set to true, normal side will be forced; false will force reverse.

goFromTo([from, to])

from or to can be omitted.

  • from Number : Set starting frame and go to it
  • to Number : Set ending frame

goToAndStop(frame)

  • frame Number : Move cursor to frame and stop playing

destroy()

Clear the canvas and stop it


Properties

Getter

canvas Canvas

Return the targeting canvas. If no canvas was given to the constructor, you will have to add this to your page.

Setters

fps Number

FPS of the animation

loop Boolean

Loop when it reaches to value

repeat Number

How many time the animation should repeat

onComplete Function

Called when the animation complete. Does not work if repeat is set.

onRepeat Function

Called at each repeat

onRepeatComplete Function

Called when the animation has played all repeat


Browser compatibility

Should works in IE9+ browsers (canvas compatibility).

For IE9 support you will have to install :

  • perfnow polyfill with npm install -S perfnow

Contribute

First you should install EditorConfig package in your code editor. Then,

cd .git/hooks
ln -s ../../hooks/pre-commit

npm install

Then 2 commands are available :

  • npm run watch watch and build js files
  • npm run build clean, build and uglify js files