asepriter
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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

  • [x] load the json and the image file
    • [x] parse the json data
    • [x] get frames and create separated images
    • [x] load tags into animations
  • [x] draw a sprite
    • [x] get a specific sprite
  • [x] 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
  • [x] clone an Asepriter instance.
  • [x] share sprite images among animations that have the same data
  • [x] emit 'done' event when an animation has ended
  • [x] build script
  • [ ] Documentation

Package Sidebar

Install

npm i asepriter

Weekly Downloads

3

Version

1.0.2

License

MIT

Unpacked Size

817 kB

Total Files

27

Last publish

Collaborators

  • lazygyu