melonjs 10.5.2 → 10.7.0

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/physics/body.js

@@ -67,7 +67,7 @@ class Body {
          * @see collision.types
          * @example
          * // set the body collision type
-         * myEntity.body.collisionType = me.collision.types.PLAYER_OBJECT;
+         * body.collisionType = me.collision.types.PLAYER_OBJECT;
          */
         this.collisionType = collision.types.ENEMY_OBJECT;
 
@@ -404,17 +404,17 @@ class Body {
     }
 
     /**
-     * By default all entities are able to collide with all other entities, <br>
+     * By default all physic bodies are able to collide with all other bodies, <br>
      * but it's also possible to specify 'collision filters' to provide a finer <br>
-     * control over which entities can collide with each other.
+     * control over which body can collide with each other.
      * @see collision.types
      * @param {number} [bitmask = collision.types.ALL_OBJECT] the collision mask
      * @example
      * // filter collision detection with collision shapes, enemies and collectables
-     * myEntity.body.setCollisionMask(me.collision.types.WORLD_SHAPE | me.collision.types.ENEMY_OBJECT | me.collision.types.COLLECTABLE_OBJECT);
+     * body.setCollisionMask(me.collision.types.WORLD_SHAPE | me.collision.types.ENEMY_OBJECT | me.collision.types.COLLECTABLE_OBJECT);
      * ...
      * // disable collision detection with all other objects
-     * myEntity.body.setCollisionMask(me.collision.types.NO_OBJECT);
+     * body.setCollisionMask(me.collision.types.NO_OBJECT);
      */
     setCollisionMask(bitmask = collision.types.ALL_OBJECT) {
         this.collisionMask = bitmask;
@@ -426,7 +426,7 @@ class Body {
      * @param {number} type the collision type
      * @example
      * // set the body collision type
-     * myEntity.body.collisionType = me.collision.types.PLAYER_OBJECT;
+     * body.collisionType = me.collision.types.PLAYER_OBJECT;
      */
     setCollisionType(type) {
         if (typeof type !== "undefined") {
@@ -657,7 +657,7 @@ class Body {
      * Updates the parent's position as well as computes the new body's velocity based
      * on the values of force/friction/gravity.  Velocity chages are proportional to the
      * me.timer.tick value (which can be used to scale velocities).  The approach to moving the
-     * parent Entity is to compute new values of the Body.vel property then add them to
+     * parent renderable is to compute new values of the Body.vel property then add them to
      * the parent.pos value thus changing the postion the amount of Body.vel each time the
      * update call is made. <br>
      * Updates to Body.vel are bounded by maxVel (which defaults to viewport size if not set) <br>

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/colorlayer.js

@@ -1,4 +1,4 @@
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import { viewport } from "./../game.js";
 import Renderable from "./renderable.js";
 

package/src/renderable/container.js

@@ -1,7 +1,7 @@
 import utils from "./../utils/utils.js";
 import * as game from "./../game.js";
 import * as event from "./../system/event.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import state from "./../state/state.js";
 import Renderable from "./renderable.js";
 import Body from "./../physics/body.js";
@@ -369,6 +369,8 @@ class Container extends Renderable {
             // swap the positions..
             this.getChildren()[index] = child2;
             this.getChildren()[index2] = child;
+            // mark the container as dirty
+            this.isDirty = true;
         }
         else {
             throw new Error(child + " Both the supplied childs must be a child of the caller " + this);
@@ -748,6 +750,8 @@ class Container extends Renderable {
         if (childIndex - 1 >= 0) {
             // note : we use an inverted loop
             this.swapChildren(child, this.getChildAt(childIndex - 1));
+            // mark the container as dirty
+            this.isDirty = true;
         }
     }
 
@@ -763,6 +767,8 @@ class Container extends Renderable {
         if (childIndex >= 0 && (childIndex + 1) < this.getChildren().length) {
             // note : we use an inverted loop
             this.swapChildren(child, this.getChildAt(childIndex + 1));
+            // mark the container as dirty
+            this.isDirty = true;
         }
     }
 
@@ -781,6 +787,8 @@ class Container extends Renderable {
             children.splice(0, 0, children.splice(childIndex, 1)[0]);
             // increment our child z value based on the previous child depth
             child.pos.z = children[1].pos.z + 1;
+            // mark the container as dirty
+            this.isDirty = true;
         }
     }
 
@@ -799,6 +807,8 @@ class Container extends Renderable {
             children.splice((children.length - 1), 0, children.splice(childIndex, 1)[0]);
             // increment our child z value based on the next child depth
             child.pos.z = children[(children.length - 2)].pos.z - 1;
+            // mark the container as dirty
+            this.isDirty = true;
         }
     }