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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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!

Image for post
Image for post

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:

Image for post
Image for post

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 :

Image for post
Image for post

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

Image for post
Image for post

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.

Written by

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store