melonjs 10.5.2 → 10.7.0

package/src/utils/utils.js

@@ -103,12 +103,17 @@ var utils = {
         var hash = {};
 
         if (typeof url === "undefined") {
-            var location = document.location;
-
-            if (location && location.hash) {
-                url = location.hash;
+            if (typeof globalThis.document !== "undefined") {
+                var location = globalThis.document.location;
+
+                if (location && location.hash) {
+                    url = location.hash;
+                } else {
+                    // No "document.location" exist for Wechat mini game platform.
+                    return hash;
+                }
             } else {
-                // No "document.location" exist for Wechat mini game platform.
+                // "document" undefined on node.js
                 return hash;
             }
         } else {

package/src/video/canvas/canvas_renderer.js

@@ -55,7 +55,18 @@ class CanvasRenderer extends Renderer {
             this.uvOffset = 1;
         }
 
-        return this;
+        // context lost & restore event for canvas
+        this.getScreenCanvas().addEventListener("contextlost", (e) => {
+            e.preventDefault();
+            this.isContextValid = false;
+            event.emit(event.ONCONTEXT_LOST, this);
+        }, false );
+        // ctx.restoreContext()
+        this.getScreenCanvas().addEventListener("contextrestored", () => {
+            this.isContextValid = true;
+            event.emit(event.ONCONTEXT_RESTORED, this);
+            me.game.repaint();
+        }, false );
     }
 
     /**
@@ -80,17 +91,36 @@ class CanvasRenderer extends Renderer {
     }
 
     /**
-     * Set a blend mode for the given context
+     * set a blend mode for the given context. <br>
+     * Supported blend mode between Canvas and WebGL remderer : <br>
+     * - "normal" : this is the default mode and draws new content on top of the existing content <br>
+     * <img src="images/normal-blendmode.png" width="510"/> <br>
+     * - "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result. <br>
+     * <img src="images/multiply-blendmode.png" width="510"/> <br>
+     * - "additive or lighter" : where both content overlap the color is determined by adding color values. <br>
+     * <img src="images/lighter-blendmode.png" width="510"/> <br>
+     * - "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) <br>
+     * <img src="images/screen-blendmode.png" width="510"/> <br>
      * @name setBlendMode
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
      * @memberof CanvasRenderer.prototype
      * @function
-     * @param {string} [mode="normal"] blend mode : "normal", "multiply"
+     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter, "additive", "screen"
      * @param {CanvasRenderingContext2D} [context]
      */
-    setBlendMode(mode, context) {
+    setBlendMode(mode = "normal", context) {
         context = context || this.getContext();
         this.currentBlendMode = mode;
         switch (mode) {
+            case "screen" :
+                context.globalCompositeOperation = "screen";
+                break;
+
+            case "lighter" :
+            case "additive" :
+                context.globalCompositeOperation = "lighter";
+                break;
+
             case "multiply" :
                 context.globalCompositeOperation = "multiply";
                 break;

package/src/video/renderer.js

@@ -57,15 +57,15 @@ class Renderer {
         /**
          * @ignore
          */
-        this.currentBlendMode = "normal";
+        this.currentBlendMode = "none";
 
         // create the main screen canvas
         if (device.ejecta === true) {
             // a main canvas is already automatically created by Ejecta
             this.canvas = document.getElementById("canvas");
-        } else if (typeof window.canvas !== "undefined") {
+        } else if (typeof globalThis.canvas !== "undefined") {
             // a global canvas is available, e.g. webapp adapter for wechat
-            this.canvas = window.canvas;
+            this.canvas = globalThis.canvas;
         } else if (typeof this.settings.canvas !== "undefined") {
             this.canvas = this.settings.canvas;
         } else {
@@ -92,8 +92,6 @@ class Renderer {
         event.on(event.GAME_RESET, () => {
             renderer.reset();
         });
-
-        return this;
     }
 
     /**

package/src/video/texture.js

@@ -3,7 +3,7 @@ import WebGLRenderer from "./webgl/webgl_renderer.js";
 import TextureCache from "./texture_cache.js";
 import Sprite from "./../renderable/sprite.js";
 import { renderer } from "./video.js";
-import pool from "./../system/pooling.js";
+import * as pool from "./../system/pooling.js";
 import loader from "./../loader/loader.js";
 import { ETA } from "./../math/math.js";
 

package/src/video/video.js

@@ -18,7 +18,7 @@ var designHeight = 0;
 
 // default video settings
 var settings = {
-    parent : document.body,
+    parent : undefined,
     renderer : 2, // AUTO
     doubleBuffering : false,
     autoScale : false,
@@ -64,8 +64,8 @@ function onresize() {
         var canvasMaxWidth = Infinity;
         var canvasMaxHeight = Infinity;
 
-        if (window.getComputedStyle) {
-            var style = window.getComputedStyle(renderer.getScreenCanvas(), null);
+        if (globalThis.getComputedStyle) {
+            var style = globalThis.getComputedStyle(renderer.getScreenCanvas(), null);
             canvasMaxWidth = parseInt(style.maxWidth, 10) || Infinity;
             canvasMaxHeight = parseInt(style.maxHeight, 10) || Infinity;
         }
@@ -276,7 +276,7 @@ export function init(width, height, options) {
     settings.zoomY = height * scaleRatio.y;
 
     //add a channel for the onresize/onorientationchange event
-    window.addEventListener(
+    globalThis.addEventListener(
         "resize",
         utils.function.throttle(
             function (e) {
@@ -286,7 +286,7 @@ export function init(width, height, options) {
     );
 
     // Screen Orientation API
-    window.addEventListener(
+    globalThis.addEventListener(
         "orientationchange",
         function (e) {
             event.emit(event.WINDOW_ONORIENTATION_CHANGE, e);
@@ -294,7 +294,7 @@ export function init(width, height, options) {
         false
     );
     // pre-fixed implementation on mozzila
-    window.addEventListener(
+    globalThis.addEventListener(
         "onmozorientationchange",
         function (e) {
             event.emit(event.WINDOW_ONORIENTATION_CHANGE, e);
@@ -303,13 +303,13 @@ export function init(width, height, options) {
     );
 
     if (device.ScreenOrientation === true) {
-        window.screen.orientation.onchange = function (e) {
+        globalThis.screen.orientation.onchange = function (e) {
             event.emit(event.WINDOW_ONORIENTATION_CHANGE, e);
         };
     }
 
     // Automatically update relative canvas position on scroll
-    window.addEventListener("scroll", utils.function.throttle(
+    globalThis.addEventListener("scroll", utils.function.throttle(
         function (e) {
             event.emit(event.WINDOW_ONSCROLL, e);
         }, 100
@@ -336,14 +336,14 @@ export function init(width, height, options) {
     }
 
     // add our canvas (default to document.body if settings.parent is undefined)
-    parent = device.getElement(settings.parent);
+    parent = device.getElement(typeof settings.parent !== "undefined" ? settings.parent : document.body);
     parent.appendChild(renderer.getScreenCanvas());
 
     // trigger an initial resize();
     onresize();
 
     // add an observer to detect when the dom tree is modified
-    if ("MutationObserver" in window) {
+    if ("MutationObserver" in globalThis) {
         // Create an observer instance linked to the callback function
         var observer = new MutationObserver(onresize.bind(this));
 
@@ -362,7 +362,7 @@ export function init(width, height, options) {
             renderType + " renderer" + gpu_renderer + " | " +
             audioType + " | " +
             "pixel ratio " + device.devicePixelRatio + " | " +
-            (device.isMobile ? "mobile" : "desktop") + " | " +
+            (device.nodeJS ? "node.js" : device.isMobile ? "mobile" : "desktop") + " | " +
             device.getScreenOrientation() + " | " +
             device.language
         );

package/src/video/webgl/buffer/vertex.js

@@ -22,9 +22,6 @@ class VertexArrayBuffer {
         // Float32 and Uint32 view of the vertex data array buffer
         this.bufferF32 = new Float32Array(this.buffer);
         this.bufferU32 = new Uint32Array(this.buffer);
-
-
-        return this;
     }
 
     /**

package/src/video/webgl/glshader.js

@@ -284,9 +284,7 @@ class GLShader {
         this.uniforms = extractUniforms(this.gl, this);
 
         // destroy the shader on context lost (will be recreated on context restore)
-        event.on(event.WEBGL_ONCONTEXT_LOST, this.destroy, this);
-
-        return this;
+        event.on(event.ONCONTEXT_LOST, this.destroy, this);
     }
 
     /**

package/src/video/webgl/webgl_renderer.js

@@ -7,7 +7,7 @@ import TextureCache from "./../texture_cache.js";
 import { TextureAtlas, createAtlas } from "./../texture.js";
 import { createCanvas, renderer } from "./../video.js";
 import * as event from "./../../system/event.js";
-import pool from "./../../system/pooling.js";
+import * as pool from "./../../system/pooling.js";
 import { isPowerOfTwo, nextPowerOfTwo, TAU } from "./../../math/math.js";
 
 
@@ -100,6 +100,11 @@ class WebGLRenderer extends Renderer {
          */
         this._scissorStack = [];
 
+        /**
+         * @ignore
+         */
+        this._blendStack = [];
+
         /**
          * @ignore
          */
@@ -158,22 +163,20 @@ class WebGLRenderer extends Renderer {
         // Create a texture cache
         this.cache = new TextureCache(this.maxTextures);
 
-        // to simulate context lost and restore :
+        // to simulate context lost and restore in WebGL:
         // var ctx = me.video.renderer.context.getExtension('WEBGL_lose_context');
         // ctx.loseContext()
         this.getScreenCanvas().addEventListener("webglcontextlost", (e) => {
             e.preventDefault();
             this.isContextValid = false;
-            event.emit(event.WEBGL_ONCONTEXT_LOST, this);
+            event.emit(event.ONCONTEXT_LOST, this);
         }, false );
         // ctx.restoreContext()
         this.getScreenCanvas().addEventListener("webglcontextrestored", () => {
             this.reset();
             this.isContextValid = true;
-            event.emit(event.WEBGL_ONCONTEXT_RESTORED, this);
+            event.emit(event.ONCONTEXT_RESTORED, this);
         }, false );
-
-        return this;
     }
 
     /**
@@ -561,28 +564,49 @@ class WebGLRenderer extends Renderer {
     }
 
     /**
-     * set a blend mode for the given context
+     * set a blend mode for the given context. <br>
+     * Supported blend mode between Canvas and WebGL remderer : <br>
+     * - "normal" : this is the default mode and draws new content on top of the existing content <br>
+     * <img src="images/normal-blendmode.png" width="510"/> <br>
+     * - "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result. <br>
+     * <img src="images/multiply-blendmode.png" width="510"/> <br>
+     * - "additive or lighter" : where both content overlap the color is determined by adding color values. <br>
+     * <img src="images/lighter-blendmode.png" width="510"/> <br>
+     * - "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) <br>
+     * <img src="images/screen-blendmode.png" width="510"/> <br>
      * @name setBlendMode
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
      * @memberof WebGLRenderer.prototype
      * @function
-     * @param {string} [mode="normal"] blend mode : "normal", "multiply"
+     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter", "additive", "screen"
      * @param {WebGLRenderingContext} [gl]
      */
-    setBlendMode(mode, gl) {
-        gl = gl || this.gl;
-
+    setBlendMode(mode = "normal", gl = this.gl) {
 
-        gl.enable(gl.BLEND);
-        switch (mode) {
-            case "multiply" :
-                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-                this.currentBlendMode = mode;
-                break;
-
-            default :
-                gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-                this.currentBlendMode = "normal";
-                break;
+        if (this.currentBlendMode !== mode) {
+            this.flush();
+            gl.enable(gl.BLEND);
+            this.currentBlendMode = mode;
+
+            switch (mode) {
+                case "screen" :
+                    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
+                    break;
+
+                case "lighter" :
+                case "additive" :
+                    gl.blendFunc(gl.ONE, gl.ONE);
+                    break;
+
+                case "multiply" :
+                    gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
+                    break;
+
+                default :
+                    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                    this.currentBlendMode = "normal";
+                    break;
+            }
         }
     }
 
@@ -616,6 +640,8 @@ class WebGLRenderer extends Renderer {
             this.currentColor.copy(color);
             this.currentTransform.copy(matrix);
 
+            this.setBlendMode(this._blendStack.pop());
+
             // recycle objects
             pool.push(color);
             pool.push(matrix);
@@ -648,6 +674,8 @@ class WebGLRenderer extends Renderer {
             // FIXME avoid slice and object realloc
             this._scissorStack.push(this.currentScissor.slice());
         }
+
+        this._blendStack.push(this.getBlendMode());
     }
 
     /**

package/src/particles/particlecontainer.js

@@ -1,95 +0,0 @@
-import Container from "./../renderable/container.js";
-import { viewport } from "./../game.js";
-
-/**
- * @classdesc
- * Particle Container Object.
- * @class ParticleContainer
- * @augments Container
- * @param {ParticleEmitter} emitter the emitter which owns this container
- */
-
-class ParticleContainer extends Container {
-
-    /**
-     * @ignore
-     */
-    constructor(emitter) {
-        // call the super constructor
-        super(
-            viewport.pos.x,
-            viewport.pos.y,
-            viewport.width,
-            viewport.height
-        );
-
-        // don't sort the particles by z-index
-        this.autoSort = false;
-
-        // count the updates
-        this._updateCount = 0;
-
-        // internally store how much time was skipped when frames are skipped
-        this._dt = 0;
-
-        // cache the emitter for later use
-        this._emitter = emitter;
-
-        this.autoTransform = false;
-
-        this.anchorPoint.set(0, 0);
-
-        this.isKinematic = true;
-    }
-
-    /**
-     * @ignore
-     */
-    update(dt) {
-        // skip frames if necessary
-        if (++this._updateCount > this._emitter.framesToSkip) {
-            this._updateCount = 0;
-        }
-        if (this._updateCount > 0) {
-            this._dt += dt;
-            return false;
-        }
-
-        // apply skipped delta time
-        dt += this._dt;
-        this._dt = 0;
-
-        // Update particles and remove them if they are dead
-        for (var i = this.children.length - 1; i >= 0; --i) {
-            var particle = this.children[i];
-            particle.inViewport = viewport.isVisible(particle, this.floating);
-            if (!particle.update(dt)) {
-                this.removeChildNow(particle);
-            }
-        }
-        return true;
-    }
-
-    /**
-     * @ignore
-     */
-    draw(renderer, rect) {
-        if (this.children.length > 0) {
-            var context = renderer.getContext(),
-                gco;
-            // Check for additive draw
-            if (this._emitter.textureAdditive) {
-                gco = context.globalCompositeOperation;
-                context.globalCompositeOperation = "lighter";
-            }
-
-            super.draw(renderer, rect);
-
-            // Restore globalCompositeOperation
-            if (this._emitter.textureAdditive) {
-                context.globalCompositeOperation = gco;
-            }
-        }
-    }
-};
-export default ParticleContainer;