Particle system customisation

[Hersir]

Hi,

I created particle system to add some particles in the game but couldn't find a way to blend particles in (now they just appear immediately and than start to blend and move). Is there any why to to it that I have missed  ? As I checked code, looks like there is no direct way  to do it as all methods are privet and colour is set on birth. 

[Dad72]

It will be easier to help with a sample code you use on the PG

[Wingnut]

Hi guys.  I'll take care of the testing playground... https://www.babylonjs-playground.com/#1PQT7P#9

Generally speaking, there are 3 easily-customizable funcs in a standard BJS particleSystem.  1.  particle starting position,  2. particle starting direction, and 3. particle mid-flight update.  You can see all 3 of MY custom funcs in lines 18-58, and a little helper func in lines 60-66.

In the above playground, lines 91-93 "install" all three custom functions.  The 3 funcs have been modified in the #9 playground, but the #1 playground shows all three funcs in their "default" state.  In other words, in the #1 playground, my custom funcs are exact copies of the normal/default framework funcs.

Particle colors are Color4, meaning that the .alpha is the 4th parameter.  SO, my idea... was to start all particles at color4(value, value, value, 0)... and then... as the particle.age increased (as the particle gets older)... slowly increase the 4th parameter... the .alpha.

Well, that didn't work... probably a Wingnut mistake or maybe an issue with the way particle transparency/depth-rendering is done.

What DID work... was starting all the particles with NO COLOR (see lines 124-126), and then slowly add color... as the particle.age increased.  Particle min/max lifetimes (lines 108/109) determine the allowed particle.age range.

Keeping in mind that my_updateFunction runs continuously, look at lines 52-55.  Easy to see what's happening, there.  If particle.age > 2, then add a little color to this particle every time this particle is updated.  This is the reason why the particles are invisible when they first fall from the ebar emitter.  After falling for a while, they get colored (fade-in).  Change the '2' in line 52... to a '1', and the particles will fade-in earlier... closer to the emit bar.

I currently have the particleSystem.direction1 and 2 set to straight down (lines 128-129), and the emitbox (lines 130-131) is set to emit over the entire length of the 10-length ebar (notice the +5 and -5 in there).  The .1 settings there... are set for another project, so they might need adjusting.  Not important, here.

Emitbox settings are actually "position upon the emitter".  They can be set SO STRANGELY... that the emission area is not even upon the emitter anymore.  [link].  Also keep in mind that a particleSystem.emitter can be JUST a Vector3 in space, and need not be a mesh at all.  Super versatile.

Ok, this should get you started.  There may be better ways.  Perhaps somebody can teach us WHY we can't simply increase the particle.color.a inside the updater func.

All in all, a particle system's (custom) updateFunction... is a very powerful and handy way... to make particles do exactly what you want them to do.  Remember that the update function runs very fast, and you want to avoid things that take a LONG time.  That line 39 FOR-loop... iterates thru every spawned particle... so it needs to remain FAST FAST FAST.  No smoke breaks, lunch breaks, coffee breaks, or napping... while inside that for-loop.     Hope this helps.  Stay tuned for other/smarter comments.

[Hersir]

@Wingnut yes color was first I tried  Problem with custom update function is that all props in it are private, so you cant use them in TS

[MackeyK24]

On 9/12/2017 at 10:50 PM, Hersir said:

@Wingnut yes color was first I tried  Problem with custom update function is that all props in it are private, so you cant use them in TS

Thats no problem... Take a look at my new class I am making for the toolkit to give Shrunken Style Particle System With Update Over Time Features...

 

Just Re-Expose those properties you need in client code:

 

public getParticles(): Array<Particle> {
    return (<any>this).particles;
}

public get stockParticles(): Array<Particle> {
    return (<any>this)._stockParticles;
}

public get scaledUpdateSpeed(): number {
    return (<any>this)._scaledUpdateSpeed;
}

public get scaledDirection(): Vector3 {
    return (<any>this)._scaledDirection;
}

public get scaledColorStep(): Color4 {
    return (<any>this)._scaledColorStep;
}

public get scaledGravity(): Vector3 {
    return (<any>this)._scaledGravity;
}

public recycleParticle(particle: Particle): void {
    if (this._updateModules != null) {
        // TODO: With Shuriken Module Support
    }
    super.recycleParticle(particle);
}

/* Shuriken Particle System Default Update Over Time Functions */

public defaultStartDirectionFunctionHandler(emitPower: number, worldMatrix: BABYLON.Matrix, directionToUpdate: BABYLON.Vector3, particle: BABYLON.Particle): void {
    if (this._updateModules != null) {
        // TODO: With Shuriken Module Support
    }
    var randX = BABYLON.Scalar.RandomRange(this.direction1.x, this.direction2.x);
    var randY = BABYLON.Scalar.RandomRange(this.direction1.y, this.direction2.y);
    var randZ = BABYLON.Scalar.RandomRange(this.direction1.z, this.direction2.z);
    Vector3.TransformNormalFromFloatsToRef(randX * emitPower, randY * emitPower, randZ * emitPower, worldMatrix, directionToUpdate);
}

public defaultStartPositionFunctionHandler(worldMatrix: BABYLON.Matrix, positionToUpdate: BABYLON.Vector3, particle: BABYLON.Particle): void {
    if (this._updateModules != null) {
        // TODO: With Shuriken Module Support
    }
    var randX = BABYLON.Scalar.RandomRange(this.minEmitBox.x, this.maxEmitBox.x);
    var randY = BABYLON.Scalar.RandomRange(this.minEmitBox.y, this.maxEmitBox.y);
    var randZ = BABYLON.Scalar.RandomRange(this.minEmitBox.z, this.maxEmitBox.z);
    Vector3.TransformCoordinatesFromFloatsToRef(randX, randY, randZ, worldMatrix, positionToUpdate);
}

public defaultUpdateOverTimeFunctionHandler(particles: BABYLON.Particle[]): void {
    if (this._updateModules != null) {
        // TODO: With Shuriken Module Support
    }
    for (var index = 0; index < particles.length; index++) {
        var particle = particles[index];
        particle.age += this.scaledUpdateSpeed;

        if (particle.age >= particle.lifeTime) { // Recycle by swapping with last particle
            this.recycleParticle(particle);
            index--;
            continue;
        }
        else {
            particle.colorStep.scaleToRef(this.scaledUpdateSpeed, this.scaledColorStep);
            particle.color.addInPlace(this.scaledColorStep);

            if (particle.color.a < 0)
                particle.color.a = 0;

            particle.angle += particle.angularSpeed * this.scaledUpdateSpeed;

            particle.direction.scaleToRef(this.scaledUpdateSpeed, this.scaledDirection);
            particle.position.addInPlace(this.scaledDirection);

            this.gravity.scaleToRef(this.scaledUpdateSpeed, this.scaledGravity);
            particle.direction.addInPlace(this.scaledGravity);
        }
    }
}

 

Here is Whole class so far.... Still working on the Update Over Time features:

I was going to ping @Deltakosh on some specifics I need to know about how I plan to implement the update over time features 

but  here is what I got so far ... as far as a customized Particle system...

I will go over my Whole Universal Particle System feature in toolkit... As well as a Particle Generator that takes An existing Unity Shuriken particle system... In game scene for directly from prefab... And Parse all the particles off the Unity Shuriken particle System component rich onto the BabylonJS Universal Particle System (which use the new babylon.shurikenParticleSyste.ts) listed below:

babylon.shurikenParticleSystem.ts

Take a look

 

 

[Hersir]

@MackeyK24 Thx I will take a look