I wrote a package to encode tagged, multilayer sprite sheets in a binary format and render it with three.js

I’m a huge fan of a tool called Aseprite, a popular sprite editor that supports multiple layers and named animations, and which exports to PNG + JSON texture atlases. I found that the texture atlasses were bloating my bundles, so I wrote a proto-based binary encoding format to support their feature set, tooling to convert files, and a three.js renderer for them for use in my projects.

The three.js renderer may be useful to some people here, as it features the following feature set:

  • Support for animations.
  • Support for multiple sprite layers, separated on the Z axis.
  • Layer opacity control.
  • Layer color control (multiplicative and fading).
  • Layer outlining in the shader with a custom color and opacity.
  • Forward and reverse animation playback support.

You can check out the demo here: Protosprite . Feel free to use it in your own projects or just copy the shaders.

4 Likes