Particle Renderer + Basic Particle Movement

Author: bitnenfer

v3/src/gameobjects/emitter/Particle.js

@@ -4,14 +4,32 @@ var Particle = new Class({
 
     initialize: 
 
-    function Particle ()
+    function Particle (x, y)
     {
-        this.x = 0.0;
-        this.y = 0.0;
-        this.gravityX = 0.0;        
-        this.gravityY = 0.0;
+        this.index = 0;
+        this.x = x;
+        this.y = y;
         this.velocityX = 0.0;
         this.velocityY = 0.0;
+        this.angularVelocity = 0.0;
+        this.rotation = 0.0;
+        this.scaleX = 1.0;
+        this.scaleY = 1.0;
+        this.life = 1.0;
+    },
+
+    reset: function (x, y)
+    {
+        this.index = 0;
+        this.x = x;
+        this.y = y;
+        this.velocityX = 0.0;
+        this.velocityY = 0.0;
+        this.rotation = 0.0;
+        this.scaleX = 1.0;
+        this.scaleY = 1.0;
+        this.life = 1.0;
+        return this;
     }
 
 });

v3/src/gameobjects/emitter/ParticleEmitter.js

@@ -4,6 +4,8 @@ var Components = require('../components');
 var GameObject = require('../GameObject');
 var Render = require('./ParticleEmitterRender');
 var Particle = require('./Particle');
+var Between = require('../../math/Between');
+var StableSort = require('../../utils/array/StableSort');
 
 var ParticleEmitter = new Class({
 
@@ -12,7 +14,6 @@ var ParticleEmitter = new Class({
     Mixins: [
         Components.Alpha,
         Components.BlendMode,
-        Components.Origin,
         Components.RenderTarget,
         Components.ScrollFactor,
         Components.Texture,
@@ -30,19 +31,41 @@ var ParticleEmitter = new Class({
 
         this.dead = [];
         this.alive = [];
-        this.deadQueue = [];
+        this.minSpeed = 0;
+        this.maxSpeed = 0;
+        this.minAngle = 0;
+        this.maxAngle = 0;
+        this.gravityX = 0;
+        this.gravityY = 0;
+        this.life = 1.0;
         this.setTexture(texture, frame);
         this.setPosition(x, y);
-        this.setSizeToFrame();
-        this.setOrigin();
+    },
+
+    setSpeed: function (min, max)
+    {
+        this.minSpeed = min;
+        this.maxSpeed = max;
+    },
+
+    setAngle: function (min, max)
+    {
+        this.minAngle = min;
+        this.maxAngle = max;
+    },
+
+    setGravity: function (x, y)
+    {
+        this.gravityX = x;
+        this.gravityY = y;
     },
 
     reserve: function (particleCount)
     {
         var dead = this.dead;
-        for (var count = 0; particleCount; ++count)
+        for (var count = 0; count < particleCount; ++count)
         {
-            dead.push(new Particle());
+            dead.push(new Particle(this.x, this.y));
         }
     },
 
@@ -94,9 +117,69 @@ var ParticleEmitter = new Class({
         }
     },
 
-    update: function (delta)
+    emitParticle: function()
     {
+        var particle = null;
+        var rad = Between(this.minAngle, this.maxAngle) * Math.PI / 180;
+        var vx = Math.cos(rad) * Between(this.minSpeed, this.maxSpeed);
+        var vy = Math.sin(rad) * Between(this.minSpeed, this.maxSpeed);
+        
+        if (this.dead.length > 0)
+        {
+            particle = this.dead.pop();
+            particle.reset(this.x, this.y);
+        }
+        else
+        {
+            particle = new Particle(this.x, this.y);
+        }
+
+        particle.velocityX = vx;
+        particle.velocityY = vy;
+        particle.life = this.life;
+        particle.index = this.alive.length;
+                
+        this.alive.push(particle);
+    },
+
+    preUpdate: function (time, delta)
+    {
+        var dead = this.dead;
+        var particles = this.alive;
+        var length = particles.length;
+        var step = delta / 1000;
+        var gravityX = this.gravityX * step;
+        var gravityY = this.gravityY * step;
+
         /* Simulation */
+        for (var index = 0; index < length; ++index)
+        {
+            var particle = particles[index];
+
+            particle.velocityX += gravityX;
+            particle.velocityY += gravityY;
+            particle.x += particle.velocityX * step;
+            particle.y += particle.velocityY * step;
+            particle.rotation += particle.angularVelocity * step;
+            particle.life -= step;
+
+            if (particle.life <= 0)
+            {
+                let last = particles[length - 1];
+                particles[length - 1] = particle;
+                particles[index] = last;
+                index -= 1;
+                length -= 1;
+            }
+        }
+
+        /* Cleanup */
+        var deadLength = particles.length - length;
+        if (deadLength > 0)
+        {
+            dead.push.apply(dead, particles.splice(particles.length - deadLength, deadLength));
+            StableSort(particles, function (a, b) { return a.index - b.index; });
+        }
     }
 
 });

v3/src/gameobjects/emitter/ParticleEmitterFactory.js

@@ -11,5 +11,10 @@ var GameObjectFactory = require('../../scene/plugins/GameObjectFactory');
 
 GameObjectFactory.register('emitter', function (x, y, key, frame)
 {
-    return this.displayList.add(new ParticleEmitter(this.scene, x, y, key, frame));
+    var emitter = new ParticleEmitter(this.scene, x, y, key, frame);
+    
+    this.displayList.add(emitter);
+    this.updateList.add(emitter);
+    
+    return emitter;
 });

v3/src/gameobjects/emitter/ParticleEmitterWebGLRenderer.js

@@ -1,6 +1,15 @@
+var GameObject = require('../GameObject');
+
 var ParticleEmitterWebGLRenderer = function (renderer, emitter, interpolationPercentage, camera)
 {
+    if (GameObject.RENDER_MASK !== emitter.renderFlags || 
+        (emitter.cameraFilter > 0 && 
+        (emitter.cameraFilter & camera._id)))
+    {
+        return;
+    }
 
+    renderer.particleRenderer.renderEmitter(emitter, camera);
 };
 
 module.exports = ParticleEmitterWebGLRenderer;

v3/src/renderer/webgl/WebGLRenderer.js

@@ -12,6 +12,7 @@ var CONST = require('../../const');
 var EffectRenderer = require('./renderers/effectrenderer/EffectRenderer');
 var IsSizePowerOfTwo = require('../../math/pow2/IsSizePowerOfTwo');
 var QuadBatch = require('./renderers/quadbatch/QuadBatch');
+var ParticleRenderer = require('./renderers/particlerenderer/ParticleRenderer');
 var ResourceManager = require('./ResourceManager');
 var Resources = require('./resources');
 var ScaleModes = require('../ScaleModes');
@@ -167,6 +168,7 @@ var WebGLRenderer = new Class({
         this.effectRenderer = this.addRenderer(new EffectRenderer(this.game, gl, this));
         this.tileBatch = this.addRenderer(new TileBatch(this.game, gl, this));
         this.tilemapRenderer = this.addRenderer(new TilemapRenderer(this.game, gl, this));
+        this.particleRenderer = this.addRenderer(new ParticleRenderer(this.game, gl, this));
         this.currentRenderer = this.spriteBatch;
         this.currentVertexBuffer = null;
         this.setBlendMode(0);