How To

Create Animated Particles

Creating Animated Particles

Starting from Babylon.js v3.1 the particle system will allow animated particles using a sprite animation map as its texture.

To enable animated particles you pass a fifth Boolean parameter in the ParticleSystem constructor with the value true. The default value for this parameter is false. You then need to assign a sprite animation map as the particleTexture with the parameters as shown below and set some further properties of the particleSystem.

var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene, null, true);
particleSystem.particleTexture = new BABYLON.Texture("textures/player.png", scene, true, false, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);

particleSystem.spriteCellHeight = 64;
particleSystem.spriteCellWidth = 64;
particleSystem.startSpriteCellID = 0;
particleSystem.endSpriteCellID = 44;
particleSystem.spriteCellLoop = true;
particleSystem.spriteCellChangeSpeed = 4; // default is zero

The spriteCellHeight and spriteCellWidth are are the cell width and height for each sprite in the animation sheet.

Cell Dimensions

The startSpriteCellID and endSpriteCellID are set based on the cell positions of the sprites on the animation sheet, the top most, left most sprite is in cell 0 and you count from left to right from the top row downwards.


When spriteCellLoop has the value true the system will loop the animation sheet from startSpriteCellID till endSpriteCellID then loop again till the particle dies. When spriteCellLoop is false then once the sheet reaches endSpriteCellID the particle will use this cell till it dies.

Setting the value of spriteCellChangeSpeed to 0 allows the particleSystem to match the animation to life time of a particle. The particle will be emitted with the sprite at startSpriteCellID and will die displaying the sprite at endSpriteCellID.

Giving spriteCellChangeSpeed a value of 1 or above will control the speed of the animation for a particle. The larger the number the slower the animation. Although the particle will be emitted with the sprite at startSpriteCellID the sprite on display when the particle dies will depend on the value of the speed and the life time of the particle and may vary.

Further Reading

Basic - L1

Particles Overview

Particles 101

How to Use Sub Emitters

Solid Particle System

Intermediate - L2

How to Customize the Particle System