melonjs 10.6.0 → 10.7.1

package/src/particles/particle.js

@@ -3,101 +3,108 @@ import timer from "./../system/timer.js";
 import { randomFloat, clamp } from "./../math/math.js";
 import Renderable from "./../renderable/renderable.js";
 
-
 /**
  * @classdesc
  * Single Particle Object.
- * @class Particle
  * @augments Renderable
- * @param {ParticleEmitter} particle emitter
  */
 class Particle extends Renderable {
     /**
-     * @ignore
+     * @param {ParticleEmitter} emitter the particle emitter
      */
     constructor(emitter) {
         // Call the super constructor
         super(
             emitter.getRandomPointX(),
             emitter.getRandomPointY(),
-            emitter.image.width,
-            emitter.image.height
+            emitter.settings.image.width,
+            emitter.settings.image.height
         );
-
-        // particle velocity
-        this.vel = new Vector2d();
         this.onResetEvent(emitter, true);
     }
 
+    /**
+     * @ignore
+     */
     onResetEvent(emitter, newInstance = false) {
         if (newInstance === false) {
-            super.onResetEvent(
+            this.pos.set(
                 emitter.getRandomPointX(),
-                emitter.getRandomPointY(),
-                emitter.image.width,
-                emitter.image.height
+                emitter.getRandomPointY()
             );
+            this.resize(
+                emitter.settings.image.width,
+                emitter.settings.image.height
+            );
+        } else {
+            // particle velocity
+            this.vel = new Vector2d();
         }
 
+        this.image = emitter.settings.image;
+
         // Particle will always update
         this.alwaysUpdate = true;
 
-        // Cache the image reference
-        this.image = emitter.image;
+        if (typeof emitter.settings.tint === "string") {
+            this.tint.parseCSS(emitter.settings.tint);
+        }
+
+        if (emitter.settings.textureAdditive === true) {
+            this.blendMode = "additive";
+        }
+
+        if (emitter.settings.blendMode !== "normal") {
+            this.blendMode = emitter.settings.blendMode;
+        }
 
         // Set the start particle Angle and Speed as defined in emitter
-        var angle = emitter.angle + ((emitter.angleVariation > 0) ? (randomFloat(0, 2) - 1) * emitter.angleVariation : 0);
-        var speed = emitter.speed + ((emitter.speedVariation > 0) ? (randomFloat(0, 2) - 1) * emitter.speedVariation : 0);
+        var angle = emitter.settings.angle + ((emitter.settings.angleVariation > 0) ? (randomFloat(0, 2) - 1) * emitter.settings.angleVariation : 0);
+        var speed = emitter.settings.speed + ((emitter.settings.speedVariation > 0) ? (randomFloat(0, 2) - 1) * emitter.settings.speedVariation : 0);
 
         // Set the start particle Velocity
         this.vel.set(speed * Math.cos(angle), -speed * Math.sin(angle));
 
         // Set the start particle Time of Life as defined in emitter
-        this.life = randomFloat(emitter.minLife, emitter.maxLife);
+        this.life = randomFloat(emitter.settings.minLife, emitter.settings.maxLife);
         this.startLife = this.life;
 
         // Set the start and end particle Scale as defined in emitter
         // clamp the values as minimum and maximum scales range
         this.startScale = clamp(
-            randomFloat(emitter.minStartScale, emitter.maxStartScale),
-            emitter.minStartScale,
-            emitter.maxStartScale
+            randomFloat(emitter.settings.minStartScale, emitter.settings.maxStartScale),
+            emitter.settings.minStartScale,
+            emitter.settings.maxStartScale
         );
         this.endScale = clamp(
-            randomFloat(emitter.minEndScale, emitter.maxEndScale),
-            emitter.minEndScale,
-            emitter.maxEndScale
+            randomFloat(emitter.settings.minEndScale, emitter.settings.maxEndScale),
+            emitter.settings.minEndScale,
+            emitter.settings.maxEndScale
         );
 
         // Set the particle Gravity and Wind (horizontal gravity) as defined in emitter
-        this.gravity = emitter.gravity;
-        this.wind = emitter.wind;
+        this.gravity = emitter.settings.gravity;
+        this.wind = emitter.settings.wind;
 
         // Set if the particle update the rotation in accordance the trajectory
-        this.followTrajectory = emitter.followTrajectory;
+        this.followTrajectory = emitter.settings.followTrajectory;
 
         // Set if the particle update only in Viewport
-        this.onlyInViewport = emitter.onlyInViewport;
-
-        // Set the particle Z Order
-        this.pos.z = emitter.z;
+        this.onlyInViewport = emitter.settings.onlyInViewport;
 
         // cache inverse of the expected delta time
         this._deltaInv = timer.maxfps / 1000;
 
         // Set the start particle rotation as defined in emitter
         // if the particle not follow trajectory
-        if (!emitter.followTrajectory) {
-            this.angle = randomFloat(emitter.minRotation, emitter.maxRotation);
+        if (!emitter.settings.followTrajectory) {
+            this.angle = randomFloat(emitter.settings.minRotation, emitter.settings.maxRotation);
         }
     }
 
     /**
      * Update the Particle <br>
      * This is automatically called by the game manager {@link game}
-     * @name update
-     * @memberof Particle
-     * @function
      * @ignore
      * @param {number} dt time since the last update in milliseconds
      */
@@ -108,6 +115,11 @@ class Particle extends Renderable {
         // Decrease particle life
         this.life = this.life > dt ? this.life - dt : 0;
 
+        if (this.life <= 0) {
+            this.ancestor.removeChild(this);
+            return false;
+        }
+
         // Calculate the particle Age Ratio
         var ageRatio = this.life / this.startLife;
 
@@ -142,23 +154,10 @@ class Particle extends Renderable {
             this.pos.x, this.pos.y, 1
         ).rotate(angle);
 
-        // Return true if the particle is not dead yet
-        return (this.inViewport || !this.onlyInViewport) && (this.life > 0);
-    }
-
-    /**
-     * @ignore
-     */
-    preDraw(renderer) {
-
-        // restore is called in postDraw
-        renderer.save();
-
-        // particle alpha value
-        renderer.setGlobalAlpha(renderer.globalAlpha() * this.alpha);
+        // mark as dirty if the particle is not dead yet
+        this.isDirty = this.inViewport || !this.onlyInViewport;
 
-        // translate to the defined anchor point and scale it
-        renderer.transform(this.currentTransform);
+        return super.update(dt);
     }
 
     /**

package/src/particles/settings.js

@@ -0,0 +1,310 @@
+/**
+ * ParticleEmitterSettings contains the default settings for ParticleEmitter
+ * @see ParticleEmitter
+ * @namespace ParticleEmitterSettings
+ */
+const ParticleEmitterSettings = {
+    /**
+     * Width of the particle spawn area.
+     * @type {number}
+     * @name width
+     * @memberof ParticleEmitterSettings
+     * @default 1
+     */
+    width : 1,
+
+    /**
+     * Height of the particle spawn area
+     * @public
+     * @type {number}
+     * @name height
+     * @memberof ParticleEmitterSettings
+     * @default 1
+     */
+    height : 1,
+
+    /**
+     * image used for particles texture
+     * (by default melonJS will create an white 8x8 texture image)
+     * @public
+     * @type {HTMLCanvasElement}
+     * @name image
+     * @memberof ParticleEmitterSettings
+     * @default undefined
+     * @see ParticleEmitterSettings.textureSize
+     */
+    image : undefined,
+
+    /**
+     * default texture size used for particles if no image is specified
+     * (by default melonJS will create an white 8x8 texture image)
+     * @public
+     * @type {number}
+     * @name textureSize
+     * @memberof ParticleEmitterSettings
+     * @default 8
+     * @see ParticleEmitterSettings.image
+     */
+    textureSize : 8,
+
+    /**
+     * tint to be applied to particles
+     * @public
+     * @type {string}
+     * @name tint
+     * @memberof ParticleEmitterSettings
+     * @default "#fff"
+     */
+    tint : "#fff",
+
+    /**
+     * Total number of particles in the emitter
+     * @public
+     * @type {number}
+     * @name totalParticles
+     * @default 50
+     * @memberof ParticleEmitterSettings
+     */
+    totalParticles : 50,
+
+    /**
+     * Start angle for particle launch in Radians
+     * @public
+     * @type {number}
+     * @name angle
+     * @default Math.PI / 2
+     * @memberof ParticleEmitterSettings
+     */
+    angle : Math.PI / 2,
+
+    /**
+     * Variation in the start angle for particle launch in Radians.
+     * @public
+     * @type {number}
+     * @name angleVariation
+     * @default 0
+     * @memberof ParticleEmitterSettings
+     */
+    angleVariation : 0,
+
+    /**
+     * Minimum time each particle lives once it is emitted in ms.
+     * @public
+     * @type {number}
+     * @name minLife
+     * @default 1000
+     * @memberof ParticleEmitterSettings
+     */
+    minLife : 1000,
+
+    /**
+     * Maximum time each particle lives once it is emitted in ms.
+     * @public
+     * @type {number}
+     * @name maxLife
+     * @default 3000
+     * @memberof ParticleEmitterSettings
+     */
+    maxLife : 3000,
+
+    /**
+     * Start speed of particles.<br>
+     * @public
+     * @type {number}
+     * @name speed
+     * @default 2
+     * @memberof ParticleEmitterSettings
+     */
+    speed : 2,
+
+    /**
+     * Variation in the start speed of particles
+     * @public
+     * @type {number}
+     * @name speedVariation
+     * @default 1
+     * @memberof ParticleEmitterSettings
+     */
+    speedVariation : 1,
+
+    /**
+     * Minimum start rotation for particles sprites in Radians
+     * @public
+     * @type {number}
+     * @name minRotation
+     * @default 0
+     * @memberof ParticleEmitterSettings
+     */
+    minRotation : 0,
+
+    /**
+     * Maximum start rotation for particles sprites in Radians
+     * @public
+     * @type {number}
+     * @name maxRotation
+     * @default 0
+     * @memberof ParticleEmitterSettings
+     */
+    maxRotation : 0,
+
+    /**
+     * Minimum start scale ratio for particles (1 = no scaling)
+     * @public
+     * @type {number}
+     * @name minStartScale
+     * @default 1
+     * @memberof ParticleEmitterSettings
+     */
+    minStartScale : 1,
+
+    /**
+     * Maximum start scale ratio for particles (1 = no scaling)
+     * @public
+     * @type {number}
+     * @name maxStartScale
+     * @default 1
+     * @memberof ParticleEmitterSettings
+     */
+    maxStartScale : 1,
+
+    /**
+     * Minimum end scale ratio for particles
+     * @public
+     * @type {number}
+     * @name minEndScale
+     * @default 0
+     * @memberof ParticleEmitterSettings
+     */
+    minEndScale : 0,
+
+    /**
+     * Maximum end scale ratio for particles
+     * @public
+     * @type {number}
+     * @name maxEndScale
+     * @default 0
+     * @memberof ParticleEmitterSettings
+     */
+    maxEndScale : 0,
+
+    /**
+     * Vertical force (Gravity) for each particle
+     * @public
+     * @type {number}
+     * @name gravity
+     * @default 0
+     * @memberof ParticleEmitterSettings
+     * @see game.world.gravity
+     */
+    gravity : 0,
+
+    /**
+     * Horizontal force (like a Wind) for each particle
+     * @public
+     * @type {number}
+     * @name wind
+     * @default 0
+     * @memberof ParticleEmitterSettings
+     */
+    wind : 0,
+
+    /**
+     * Update the rotation of particle in accordance the particle trajectory.<br>
+     * The particle sprite should aim at zero angle (draw from left to right).<br>
+     * Override the particle minRotation and maxRotation.<br>
+     * @public
+     * @type {boolean}
+     * @name followTrajectory
+     * @default false
+     * @memberof ParticleEmitterSettings
+     */
+    followTrajectory : false,
+
+    /**
+     * Enable the Texture Additive by composite operation ("additive" blendMode)
+     * @public
+     * @type {boolean}
+     * @name textureAdditive
+     * @default false
+     * @memberof ParticleEmitterSettings
+     * @see ParticleEmitterSettings.blendMode
+     */
+    textureAdditive : false,
+
+    /**
+     * the blend mode to be applied when rendering particles.
+     * (note: this will superseed the `textureAdditive` setting if different than "normal")
+     * @public
+     * @type {string}
+     * @name blendMode
+     * @default normal
+     * @memberof ParticleEmitterSettings
+     * @see CanvasRenderer#setBlendMode
+     * @see WebGLRenderer#setBlendMode
+     */
+    blendMode : "normal",
+
+    /**
+     * Update particles only in the viewport, remove it when out of viewport.
+     * @public
+     * @type {boolean}
+     * @name onlyInViewport
+     * @default true
+     * @memberof ParticleEmitterSettings
+     */
+    onlyInViewport : true,
+
+    /**
+     * Render particles in screen space.
+     * @public
+     * @type {boolean}
+     * @name floating
+     * @default false
+     * @memberof ParticleEmitterSettings
+     */
+    floating : false,
+
+    /**
+     * Maximum number of particles launched each time in this emitter (used only if emitter is Stream).
+     * @public
+     * @type {number}
+     * @name maxParticles
+     * @default 10
+     * @memberof ParticleEmitterSettings
+     */
+    maxParticles : 10,
+
+    /**
+     * How often a particle is emitted in ms (used only if emitter is a Stream).
+     * @public
+     * @type {number}
+     * @name frequency
+     * @default 100
+     * @memberof ParticleEmitterSettings
+     */
+    frequency : 100,
+
+    /**
+     * Duration that the emitter releases particles in ms (used only if emitter is Stream).
+     * After this period, the emitter stop the launch of particles.
+     * @public
+     * @type {number}
+     * @name duration
+     * @default Infinity
+     * @memberof ParticleEmitterSettings
+     */
+    duration : Infinity,
+
+    /**
+     * Skip n frames after updating the particle system once.
+     * This can be used to reduce the performance impact of emitters with many particles.
+     * @public
+     * @type {number}
+     * @name framesToSkip
+     * @default 0
+     * @memberof ParticleEmitterSettings
+     */
+    framesToSkip : 0
+};
+
+export default ParticleEmitterSettings;

package/src/polyfill/console.js

@@ -1,10 +1,10 @@
-if (typeof window !== "undefined") {
-    if (typeof window.console === "undefined") {
-        window.console = {};
-        window.console.log = function() {};
-        window.console.assert = function() {};
-        window.console.warn = function() {};
-        window.console.error = function() {
+if (typeof globalThis !== "undefined") {
+    if (typeof globalThis.console === "undefined") {
+        globalThis.console = {};
+        globalThis.console.log = function() {};
+        globalThis.console.assert = function() {};
+        globalThis.console.warn = function() {};
+        globalThis.console.error = function() {
             alert(Array.prototype.slice.call(arguments).join(", "));
         };
     }

package/src/polyfill/index.js

@@ -0,0 +1,7 @@
+// https://github.com/melonjs/melonJS/issues/1092
+import "core-js/proposals/global-this";
+
+// "built-in" polyfills
+import "./console.js";
+import "./performance.js";
+import "./requestAnimationFrame.js";

package/src/polyfill/performance.js

@@ -0,0 +1,20 @@
+if ("performance" in globalThis === false) {
+    globalThis.performance = {};
+}
+
+Date.now = (Date.now || function () {  // thanks IE8
+    return new Date().getTime();
+});
+
+if ("now" in globalThis.performance === false) {
+
+    var nowOffset = Date.now();
+
+    if (performance.timing && performance.timing.navigationStart) {
+      nowOffset = performance.timing.navigationStart;
+    }
+
+    globalThis.performance.now = function now() {
+      return Date.now() - nowOffset;
+  };
+}

package/src/polyfill/requestAnimationFrame.js

@@ -6,23 +6,23 @@ var x;
 
 // standardized functions
 // https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame
-var requestAnimationFrame = window.requestAnimationFrame;
-var cancelAnimationFrame = window.cancelAnimationFrame;
+var requestAnimationFrame = globalThis.requestAnimationFrame;
+var cancelAnimationFrame = globalThis.cancelAnimationFrame;
 
 // get prefixed rAF and cAF is standard one not supported
 for (x = 0; x < vendors.length && !requestAnimationFrame; ++x) {
-    requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
+    requestAnimationFrame = globalThis[vendors[x] + "RequestAnimationFrame"];
 }
 for (x = 0; x < vendors.length && !cancelAnimationFrame; ++x) {
-    cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] ||
-                           window[vendors[x] + "CancelRequestAnimationFrame"];
+    cancelAnimationFrame = globalThis[vendors[x] + "CancelAnimationFrame"] ||
+                           globalThis[vendors[x] + "CancelRequestAnimationFrame"];
 }
 
 if (!requestAnimationFrame || !cancelAnimationFrame) {
     requestAnimationFrame = function (callback) {
-        var currTime = window.performance.now();
+        var currTime = globalThis.performance.now();
         var timeToCall = Math.max(0, (1000 / timer.maxfps) - (currTime - lastTime));
-        var id = window.setTimeout(function () {
+        var id = globalThis.setTimeout(function () {
             callback(currTime + timeToCall);
         }, timeToCall);
         lastTime = currTime + timeToCall;
@@ -30,10 +30,10 @@ if (!requestAnimationFrame || !cancelAnimationFrame) {
     };
 
     cancelAnimationFrame = function (id) {
-        window.clearTimeout(id);
+        globalThis.clearTimeout(id);
     };
 
     // put back in global namespace
-    window.requestAnimationFrame = requestAnimationFrame;
-    window.cancelAnimationFrame = cancelAnimationFrame;
+    globalThis.requestAnimationFrame = requestAnimationFrame;
+    globalThis.cancelAnimationFrame = cancelAnimationFrame;
 }

package/src/renderable/imagelayer.js

@@ -93,7 +93,7 @@ class ImageLayer extends Sprite {
         this.repeat = settings.repeat || "repeat";
 
         // on context lost, all previous textures are destroyed
-        event.on(event.WEBGL_ONCONTEXT_RESTORED, this.createPattern, this);
+        event.on(event.ONCONTEXT_RESTORED, this.createPattern, this);
     }
 
     /**
@@ -294,7 +294,7 @@ class ImageLayer extends Sprite {
     destroy() {
         pool.push(this.ratio);
         this.ratio = undefined;
-        event.off(event.WEBGL_ONCONTEXT_RESTORED, this.createPattern);
+        event.off(event.ONCONTEXT_RESTORED, this.createPattern);
         super.destroy();
     }
 

package/src/state/state.js

@@ -45,7 +45,7 @@ function _startRunLoop() {
         timer.reset();
 
         // start the main loop
-        _animFrameId = window.requestAnimationFrame(_renderFrame);
+        _animFrameId = globalThis.requestAnimationFrame(_renderFrame);
     }
 }
 
@@ -85,7 +85,7 @@ function _renderFrame(time) {
     game.draw(stage);
     // schedule the next frame update
     if (_animFrameId !== -1) {
-        _animFrameId = window.requestAnimationFrame(_renderFrame);
+        _animFrameId = globalThis.requestAnimationFrame(_renderFrame);
     }
 }
 
@@ -95,7 +95,7 @@ function _renderFrame(time) {
  */
 function _stopRunLoop() {
     // cancel any previous animationRequestFrame
-    window.cancelAnimationFrame(_animFrameId);
+    globalThis.cancelAnimationFrame(_animFrameId);
     _animFrameId = -1;
 }
 
@@ -268,7 +268,7 @@ var state = {
             }
 
             // store time when stopped
-            _pauseTime = window.performance.now();
+            _pauseTime = globalThis.performance.now();
 
             // publish the stop notification
             event.emit(event.STATE_STOP);
@@ -294,7 +294,7 @@ var state = {
             }
 
             // store time when paused
-            _pauseTime = window.performance.now();
+            _pauseTime = globalThis.performance.now();
 
             // publish the pause event
             event.emit(event.STATE_PAUSE);
@@ -319,7 +319,7 @@ var state = {
             }
 
             // calculate the elpased time
-            _pauseTime = window.performance.now() - _pauseTime;
+            _pauseTime = globalThis.performance.now() - _pauseTime;
 
             // force repaint
             game.repaint();
@@ -347,7 +347,7 @@ var state = {
             }
 
             // calculate the elpased time
-            _pauseTime = window.performance.now() - _pauseTime;
+            _pauseTime = globalThis.performance.now() - _pauseTime;
 
             // publish the resume event
             event.emit(event.STATE_RESUME, _pauseTime);