BabylonJS Tutorial - Using Sprites

In this tutorial, I want to tell you, dear Habrayuzer, about the use of sprites in the BabylonJS framework.


If you want to use sprites on your scene, then you need to initialize the “sprite manager” for optimal performance of GPU resources by grouping them (sprites) in one place. This manager is required, even if you want to place only one sprite. To initialize it, you just need to add the following line to your code:

var spriteManagerTrees = new BABYLON.SpriteManager(“treesManager”, “images/trees.png, 2000, 800, scene); 

Where:

• tressManager - the name of the initialized manager
• images / trees.png - the address of the 2D image
• 2000 - the maximum number of instances in this manager
• 800 - cell size
• scene - current scene

Let's look at the following image:

Each image of the sprite should not exceed the size of more than 64x64 pixels.

 var spriteManagerPlayer = new BABYLON.SpriteManager(“playerManager”, “images/player.png, 2, 64, scene); 

This time we indicated to the manager that there would be 2 copies with a cell size of 64.
')
Now that we have a manager, we can create instances of our sprite associated with this manager. Creating an instance is very simple:

 var player = new BABYLON.Sprite(“player”, spriteManagerPlayer); 

Wow! Our sprite is displayed!
We can manipulate it like any other object of the scene:

 player.position.y = -0.3; player.angle = Math.PI/4; player.invertU = -1; player.width = 0.3; player.height = 0.4; 

Animation

You must upload one large image file that will contain all the images of the sprite next to each other.
Your image should look like this:


If you want to start the animation, then call the playAnimation function:

 var spriteManagerPlayer = new BABYLON.SpriteManager(“playerManager”, “images/player.png, 2, 64, scene); player.playAnimation(0, 43, true, 100); 

Where:

• 0, 43 - starting and ending sprite in animation
• true - enable animation
• 100 - delay between frames

If you want to go to a specific image, then after calling the instance, insert:

 player.cellIndex = 44; 

That's all. See you!