DevLog: Building the Sprite Editor

We recently shared our vision regarding what we want Babylon.js to be (See this article about simplicity as a foundation).

As part of this philosophy, I would like to share what I’m currently working on: The Sprite Editor.

Disclaimer: This is work in progress so you may encounter bugs or worse :).

So first a bit of vocabulary: a sprite is a 2D rectangle rendered on the screen.

So why sprites in a 3D engine? That’s a good question. Thank you for asking. Actually sprites can totally belong in a 3D world and they are clearly heavily used already. Think about the trees in the background of a scene. They are too far from the viewer to deserve spending GPU time on it so it is fair to render them using a simple plane with a texture of a tree. See a live example here.

Example of a scene entirely done with sprites

To define a sprite you need to provide a texture containing the image:

Where sprites start to be really interesting is when your texture contains sprite animation:

Sprite animation texture

With this kind of texture, you can define that the sprite will only pick a portion of it (cell index) and you can even specify an animation by cycling through all cells:

In this example, the manager is defined with a cell size of 64x64 and then the sprite is animated from cell 0 to cell 40 ending with this result:

You can see the live demo here.

The main problem is that it could be a bit cumbersome to tweak all the parameters of your sprites by code and this is where the Sprite Editor enters the room!

Sprite Editor inside babylon.js inspector

The good news is that you can already try it by yourself right here.

One additional piece of good news: you can use the Babylon.js Snippet Server to load / save / share your creations, just like with the Node Material and Particle Editor!

For instance, in this Playground, you can see how I’m leveraging the server to load a pre-defined Sprite Manager:

Obviously, when you are inside the Sprite Editor and you save your updated manager, the playground will also update the reference for you (check the code in the :

This way you can keep using your code as the central repository for your scene while editing certain parts using visual tools!

That’s all folks! I truly hope you will like it. Please ping me on Twitter or on our forum with any questions / suggestions you may have.

David Catuhe