Fix #5049

src/Particles/babylon.IParticleSystem.ts

@@ -172,6 +172,10 @@ module BABYLON {
          * If using a spritesheet (isAnimationSheetEnabled), defines the sprite cell height to use
          */
         spriteCellHeight: number;           
+        /**
+         * This allows the system to random pick the start cell ID between startSpriteCellID and endSpriteCellID
+         */
+        spriteRandomStartCell: boolean;            
 
         /** Gets or sets a Vector2 used to move the pivot (by default (0,0)) */
         translationPivot: Vector2;

src/Particles/babylon.baseParticleSystem.ts

@@ -208,6 +208,10 @@ module BABYLON {
          * If using a spritesheet (isAnimationSheetEnabled), defines the sprite cell height to use
          */
         public spriteCellHeight = 0;
+        /**
+         * This allows the system to random pick the start cell ID between startSpriteCellID and endSpriteCellID
+         */
+        public spriteRandomStartCell = false;   
 
         /** Gets or sets a Vector2 used to move the pivot (by default (0,0)) */
         public translationPivot = new Vector2(0, 0);        

src/Particles/babylon.particle.ts

@@ -60,6 +60,8 @@
          */
         public cellIndex: number = 0;  
 
+        public _randomCellOffset?: number;
+
         /** @hidden */
         public _initialDirection: Nullable<Vector3>;
 
@@ -115,7 +117,7 @@
          */
         constructor(
             /**
-             * particleSystem the particle system the particle belongs to.
+             * The particle system the particle belongs to.
              */
             public particleSystem: ParticleSystem) {
             if (!this.particleSystem.isAnimationSheetEnabled) {
@@ -133,12 +135,34 @@
          * Defines how the sprite cell index is updated for the particle
          */
         public updateCellIndex(): void {
+            let offsetAge = this.age;
+
+            if (this.particleSystem.spriteRandomStartCell) {
+                if (this._randomCellOffset === undefined) {         
+                    this._randomCellOffset = Math.random() * this.lifeTime;
+                }
+                offsetAge += this._randomCellOffset;
+            }
+
             let dist = (this._initialEndSpriteCellID - this._initialStartSpriteCellID);
-            let ratio = Scalar.Clamp(((this.age * this.particleSystem.spriteCellChangeSpeed) % this.lifeTime) / this.lifeTime);
+            let ratio = Scalar.Clamp(((offsetAge * this.particleSystem.spriteCellChangeSpeed) % this.lifeTime) / this.lifeTime);
 
             this.cellIndex = this._initialStartSpriteCellID + (ratio * dist) | 0;
         }
 
+        /** @hidden */
+        public _reset() {
+            this.age = 0;
+            this._currentColorGradient = null;
+            this._currentSizeGradient = null;
+            this._currentAngularSpeedGradient = null;
+            this._currentVelocityGradient = null;
+            this._currentLimitVelocityGradient = null;
+            this._currentDragGradient = null;
+            this.cellIndex = this.particleSystem.startSpriteCellID;
+            this._randomCellOffset = undefined;
+        }
+
         /**
          * Copy the properties of particle to another one.
          * @param other the particle to copy the information to.
@@ -159,6 +183,7 @@
             other.colorStep.copyFrom(this.colorStep);
             other.lifeTime = this.lifeTime;
             other.age = this.age;
+            other._randomCellOffset = undefined;
             other.size = this.size;
             other.scale.copyFrom(this.scale);
             other.angle = this.angle;

src/Particles/babylon.particleSystem.ts

@@ -886,9 +886,7 @@
             var particle: Particle;
             if (this._stockParticles.length !== 0) {
                 particle = <Particle>this._stockParticles.pop();
-                particle.age = 0;
-                particle._currentColorGradient = null;
-                particle.cellIndex = this.startSpriteCellID;
+                particle._reset();
             } else {
                 particle = new Particle(this);
             }