melonjs 10.6.1 → 10.7.0

package/src/video/canvas/canvas_renderer.js

@@ -54,6 +54,19 @@ class CanvasRenderer extends Renderer {
             // enable the tile texture seam fix with the canvas renderer
             this.uvOffset = 1;
         }
+
+        // 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 );
     }
 
     /**
@@ -84,7 +97,7 @@ class CanvasRenderer extends Renderer {
      * <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>
-     * - "lighter" : where both content overlap the color is determined by adding color values. <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>
@@ -92,7 +105,7 @@ class CanvasRenderer extends Renderer {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
      * @memberof CanvasRenderer.prototype
      * @function
-     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter, "screen"
+     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter, "additive", "screen"
      * @param {CanvasRenderingContext2D} [context]
      */
     setBlendMode(mode = "normal", context) {
@@ -104,6 +117,7 @@ class CanvasRenderer extends Renderer {
                 break;
 
             case "lighter" :
+            case "additive" :
                 context.globalCompositeOperation = "lighter";
                 break;
 

package/src/video/renderer.js

@@ -63,9 +63,9 @@ class Renderer {
         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 {

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

@@ -284,7 +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);
+        event.on(event.ONCONTEXT_LOST, this.destroy, this);
     }
 
     /**

package/src/video/webgl/webgl_renderer.js

@@ -163,19 +163,19 @@ 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 );
     }
 
@@ -570,7 +570,7 @@ class WebGLRenderer extends Renderer {
      * <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>
-     * - "lighter" : where both content overlap the color is determined by adding color values. <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>
@@ -578,7 +578,7 @@ class WebGLRenderer extends Renderer {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
      * @memberof WebGLRenderer.prototype
      * @function
-     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter", "screen"
+     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter", "additive", "screen"
      * @param {WebGLRenderingContext} [gl]
      */
     setBlendMode(mode = "normal", gl = this.gl) {
@@ -594,6 +594,7 @@ class WebGLRenderer extends Renderer {
                     break;
 
                 case "lighter" :
+                case "additive" :
                     gl.blendFunc(gl.ONE, gl.ONE);
                     break;
 

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;