Add sprite manager
GMartigny opened this issue · 1 comments
GMartigny commented
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);