1.0.2 • Published 2 years ago
asepriter v1.0.2
Summary
A library for loading and rendering animations exported by Aseprite.
Install
> yarn add asepriter
Usage
Simple Usage
import { Asepriter } from "asepriter";
const jsonUrl = '/assets/animation.json';
const imageUrl = '/assets/animation.png';
(async () => {
const canvas = document.querySelector('#canv') as HTMLCanvasElement;
const instance = await Asepriter.create(jsonUrl, imageUrl);
let lastTimestamp = performance.now();
let deltaTime = 0;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
const render = (timestamp: number) => {
deltaTime = timestamp - lastTimestamp;
lastTimestamp = timestamp;
const animation = instance.getAnimation(instance.animationKeys[0]);
animation.update(deltaTime);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(animation.currentFrame.image, 0, 0);
requestAnimationFrame(render);
}
instance.on('load', () => {
render(performance.now());
});
})();
Other Usage
See example/index.ts
Development
check example code
> yarn dev
Todos
- load the json and the image file x parse the json data x get frames and create separated images * x load tags into animations
- draw a sprite * x get a specific sprite
- draw an animation x get an animation by a tag name x update the frame number of the animation by time * x get the current sprite of the animation
- clone an Asepriter instance.
- share sprite images among animations that have the same data
- emit 'done' event when an animation has ended
- build script
- Documentation