The editor provides support for using Sprite managers in your scenes. Sprite managers allow to efficiently render a large number of sprites in the scene using a single texture. More information about sprite managers here

To create a new sprite manager, just right-click somewhere in the graph and select Sprite Manager. The sprite manager will be created with default parameters and no asset assigned to it.

Once created, the sprite manager can be configured using the inspector by selecting it in the graph. A sprite manager can use either a single texture or a pair of JSON atlas with a texture.

When using a single texture for the sprite manager, simply drag'n'drop the desired image asset in the Texture property of the inspector. The image will be used as the texture for all sprites created with this manager. Once the texture is assigned, you'll be able to create sprites using this manager.

By default, the sprite dimensions are set to 64x64. This can be customized by setting the Cell Width and Cell Height properties in the inspector to the desired values. When dimensions changed the grid of all instantiable sprites will be updated accordingly.

To add a new sprite in the scene, simply drag'n'drop the desired sprite from the grid to the scene. The sprite will be created at the dropped position.

When using an atlas JSON file, both the JSON file and the associated texture must be assigned to the sprite manager. To do so, select the Packed mode and simply drag'n'drop the JSON file in the Atlas JSON property of the inspector. The editor will automatically search for the associated texture in the assets and assign it to theTexture property.

Compared to using a single texture, using an atlas JSON allows to have sprites of varying sizes and not constrained to a fixed grid. In other words, no need to configure Cell Width and Cell Height. Once the atlas JSON is assigned, you'll be able to create sprites by drag'n'dropping them from the grid to the scene.

Scripts can be assigned to individual sprites created from a sprite manager. When assigning a script to a sprite, the sprite instance can be accessed in the script using the Sprite type from the @babylonjs/core package:

Sprite managers support animations. Animations can be created per sprite.

To add a new animation, click the "+" button. A new animation will be created with default parameters. You can then customize the animation by setting the Name, From, To and Delay properties in the inspector. To play the selected animation just click the "Play" button or "Stop" button to stop it.

To remove an animation, select it in the list and click the "-" button.

To play an animation from a script, you can use the playSpriteAnimationFromName function from the babylonjs-editor-tools package. This function allows to play an animation by its name:

Alternatively, you can use the animationFromSprite decorator from the babylonjs-editor-tools package to easily retrieve an animation by its name and play it:

Sprite managers are represented as nodes in the editor. A special type exists for them in the babylonjs-editor-tools package: SpriteManagerNode. When assigning a script to a Sprite Manager node, the node instance can be accessed in the script using the SpriteManagerNode type.

To access the SpriteManager instance of Babylon.js, use the .spriteManager property of the node: