From 78fc4636222bcebb51071bf7c1dbc0410312fd64 Mon Sep 17 00:00:00 2001 From: johnHackworth Date: Sun, 2 Mar 2014 19:20:15 +0100 Subject: [PATCH] Fix particles when viewport scaled In the current version particles do not consider the current viewport zoom when drawing themselve to the canvas. This PR fixes that and also adds an option to specify an offset from the base entity it is attached to. original contribution in pr #743 by @johnHacksworth . additional documentation & misc added by me. --- src/graphics/particles.js | 66 +++++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 31 deletions(-) diff --git a/src/graphics/particles.js b/src/graphics/particles.js index 39d44cbc2..9a9107de8 100644 --- a/src/graphics/particles.js +++ b/src/graphics/particles.js @@ -25,34 +25,36 @@ Crafty.c("Particles", { * @example * ~~~ * var options = { - * maxParticles: 150, - * size: 18, - * sizeRandom: 4, - * speed: 1, - * speedRandom: 1.2, - * // Lifespan in frames - * lifeSpan: 29, - * lifeSpanRandom: 7, - * // Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc. - * angle: 65, - * angleRandom: 34, - * startColour: [255, 131, 0, 1], - * startColourRandom: [48, 50, 45, 0], - * endColour: [245, 35, 0, 0], - * endColourRandom: [60, 60, 60, 0], - * // Only applies when fastMode is off, specifies how sharp the gradients are drawn - * sharpness: 20, - * sharpnessRandom: 10, - * // Random spread from origin - * spread: 10, - * // How many frames should this last - * duration: -1, - * // Will draw squares instead of circle gradients - * fastMode: false, - * gravity: { x: 0, y: 0.1 }, - * // sensible values are 0-3 - * jitter: 0 - * } + * maxParticles: 150, + * size: 18, + * sizeRandom: 4, + * speed: 1, + * speedRandom: 1.2, + * // Lifespan in frames + * lifeSpan: 29, + * lifeSpanRandom: 7, + * // Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc. + * angle: 65, + * angleRandom: 34, + * startColour: [255, 131, 0, 1], + * startColourRandom: [48, 50, 45, 0], + * endColour: [245, 35, 0, 0], + * endColourRandom: [60, 60, 60, 0], + * // Only applies when fastMode is off, specifies how sharp the gradients are drawn + * sharpness: 20, + * sharpnessRandom: 10, + * // Random spread from origin + * spread: 10, + * // How many frames should this last + * duration: -1, + * // Will draw squares instead of circle gradients + * fastMode: false, + * gravity: { x: 0, y: 0.1 }, + * // sensible values are 0-3 + * jitter: 0, + * // Offset for the origin of the particles + * originOffset: {x: 0, y: 0} + * }; * * Crafty.e("2D,Canvas,Particles").particles(options); * ~~~ @@ -160,6 +162,8 @@ Crafty.c("Particles", { }, // sensible values are 0-3 jitter: 0, + // offset of particles from origin + originOffset: {x: 0, y: 0}, //Don't modify the following particles: [], @@ -204,15 +208,15 @@ Crafty.c("Particles", { return Math.random() * 2 - 1; }, initParticle: function (particle) { - particle.position.x = this.position.x + this.positionRandom.x * this.RANDM1TO1(); - particle.position.y = this.position.y + this.positionRandom.y * this.RANDM1TO1(); + particle.position.x = Crafty.viewport._scale * (this.position.x + this.originOffset.x + this.positionRandom.x * this.RANDM1TO1()); + particle.position.y = Crafty.viewport._scale * (this.position.y + this.originOffset.y + this.positionRandom.y * this.RANDM1TO1()); var newAngle = (this.angle + this.angleRandom * this.RANDM1TO1()) * (Math.PI / 180); // convert to radians var vector = this.vectorHelpers.create(Math.sin(newAngle), -Math.cos(newAngle)); // Could move to lookup for speed var vectorSpeed = this.speed + this.speedRandom * this.RANDM1TO1(); particle.direction = this.vectorHelpers.multiply(vector, vectorSpeed); - particle.size = this.size + this.sizeRandom * this.RANDM1TO1(); + particle.size = Crafty.viewport._scale * (this.size + this.sizeRandom * this.RANDM1TO1()); particle.size = particle.size < 0 ? 0 : ~~particle.size; particle.timeToLive = this.lifeSpan + this.lifeSpanRandom * this.RANDM1TO1();