pencil-js/pencil.js

Add sprite manager

GMartigny opened this issue · 1 comments

Description

A recurring use-case for drawing engine like Pencil.js is to display sprite. Sprites are a large image composed of other images, the point is to go through them to create the illusion of movement (ex)
Mostly used in games, a sprite must have an image and the metadata for each position in that image.
As far as I know, there's no standard, but we should be able to read from JSON output of popular image packers (TexturePacker, ShoeBox, Spritesheet.js ...)

Example

// Will preload the json and the meta texture
const sheet = new SpriteSheet("sheet.json");

// Return all corresponding data
const array = sheet.get(globPattern);
// Create the component
const sprite = new Sprite(position, array, {
	loop: true, // default, should the animation start over when done
	speed: 1, // default, number of animation frame per scene frame
});
const sheet = new SpriteSheet("sheet.json");

// Define states
const object = {
	state1: sheet.get(globPattern1),
	state2: sheet.get(globPattern2),
};
const sprite = new Sprite(position, object);
// Change the sprite state (default to the first)
sprite.setState("state1");
const sheet = new SpriteSheet("sheet.json");

const sprite = new Sprite(position, sheet.get(globPattern1), {
	loop: false,
});
// Set of event
sprite.on("animation-start", () => sprite.show());
sprite.on("animation-frame", () => {});
sprite.on("animation-end", () => sprite.hide());
// Set of playback methods
sprite.play();
sprite.pause();
sprite.setFrame(0);

Added by 4982d79 but without the state management. Might come with another update if needed be.