melonjs 10.6.1 → 10.8.0

package/src/video/canvas/canvas_renderer.js

@@ -54,6 +54,18 @@ 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);
+        }, false );
     }
 
     /**
@@ -84,7 +96,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 +104,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 +116,7 @@ class CanvasRenderer extends Renderer {
                 break;
 
             case "lighter" :
+            case "additive" :
                 context.globalCompositeOperation = "lighter";
                 break;
 
@@ -176,7 +189,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} height The rectangle's height.
      */
     clearRect(x, y, width, height) {
-        this.backBufferContext2D.clearRect(x, y, width, height);
+        this.getContext().clearRect(x, y, width, height);
     }
 
     /**
@@ -195,7 +208,7 @@ class CanvasRenderer extends Renderer {
      * var basic      = renderer.createPattern(image, "no-repeat");
      */
     createPattern(image, repeat) {
-        return this.backBufferContext2D.createPattern(image, repeat);
+        return this.getContext().createPattern(image, repeat);
     }
 
     /**
@@ -221,10 +234,11 @@ class CanvasRenderer extends Renderer {
      * renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
      */
     drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
-        if (this.backBufferContext2D.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
+        var context = this.getContext();
 
         if (typeof sw === "undefined") {
             sw = dw = image.width;
@@ -258,7 +272,7 @@ class CanvasRenderer extends Renderer {
             // get a tinted version of this image from the texture cache
             source = this.cache.tint(image, this.currentTint.toRGB());
         }
-        this.backBufferContext2D.drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh);
+        context.drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh);
     }
 
     /**
@@ -274,14 +288,15 @@ class CanvasRenderer extends Renderer {
      * @see CanvasRenderer#createPattern
      */
     drawPattern(pattern, x, y, width, height) {
-        if (this.backBufferContext2D.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
-        var fillStyle = this.backBufferContext2D.fillStyle;
-        this.backBufferContext2D.fillStyle = pattern;
-        this.backBufferContext2D.fillRect(x, y, width, height);
-        this.backBufferContext2D.fillStyle = fillStyle;
+        var context = this.getContext();
+        var fillStyle = context.fillStyle;
+        context.fillStyle = pattern;
+        context.fillRect(x, y, width, height);
+        context.fillStyle = fillStyle;
     }
 
     /**
@@ -298,12 +313,12 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeArc(x, y, radius, start, end, antiClockwise, fill = false) {
-        var context = this.backBufferContext2D;
-
-        if (context.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
+        var context = this.getContext();
+
         context.translate(x, y);
         context.beginPath();
         context.arc(0, 0, radius, start, end, antiClockwise || false);
@@ -339,12 +354,11 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeEllipse(x, y, w, h, fill = false) {
-        var context = this.backBufferContext2D;
-
-        if (context.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
+        var context = this.getContext();
 
         var hw = w,
             hh = h,
@@ -395,9 +409,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} endY the end y coordinate
      */
     strokeLine(startX, startY, endX, endY) {
-        var context = this.backBufferContext2D;
-
-        if (context < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
@@ -431,12 +443,11 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokePolygon(poly, fill = false) {
-        var context = this.backBufferContext2D;
-
-        if (context.globalAlpha < 1 / 255) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
+        var context = this.getContext();
 
         this.translate(poly.pos.x, poly.pos.y);
         context.beginPath();
@@ -475,15 +486,13 @@ class CanvasRenderer extends Renderer {
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeRect(x, y, width, height, fill = false) {
-        if (fill === true ) {
-            this.fillRect(x, y, width, height);
-        } else {
-            if (this.backBufferContext2D.globalAlpha < 1 / 255) {
-                // Fast path: don't draw fully transparent
-                return;
-            }
-            this.backBufferContext2D.strokeRect(x, y, width, height);
+        if (this.getGlobalAlpha() < 1 / 255) {
+            // Fast path: don't draw fully transparent
+            return;
         }
+        var context = this.getContext();
+
+        context[fill === true ? "fillRect" : "strokeRect"](x, y, width, height);
     }
 
     /**
@@ -497,11 +506,59 @@ class CanvasRenderer extends Renderer {
      * @param {number} height
      */
     fillRect(x, y, width, height) {
-        if (this.backBufferContext2D.globalAlpha < 1 / 255) {
+        this.strokeRect(x, y, width, height, true);
+    }
+
+    /**
+     * Stroke a rounded rectangle at the specified coordinates
+     * @name strokeRoundRect
+     * @memberof CanvasRenderer.prototype
+     * @function
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {number} radius
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
+     */
+    strokeRoundRect(x, y, width, height, radius, fill = false) {
+        if (this.getGlobalAlpha() < 1 / 255) {
             // Fast path: don't draw fully transparent
             return;
         }
-        this.backBufferContext2D.fillRect(x, y, width, height);
+        var context = this.getContext();
+
+        context.beginPath();
+        if (typeof context.roundRect === "function") {
+            //https://developer.chrome.com/blog/canvas2d/#round-rect
+            context.roundRect(x, y, width, height, radius);
+        } else {
+            context.moveTo(x + radius, y);
+            context.lineTo(x + width - radius, y);
+            context.arcTo(x + width, y, x + width, y + radius, radius);
+            context.lineTo(x + width, y + height - radius);
+            context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+            context.lineTo(x + radius, y + height);
+            context.arcTo(x, y + height, x, y + height - radius, radius);
+            context.lineTo(x, y + radius);
+            context.arcTo(x, y, x + radius, y, radius);
+        }
+        context[fill === true ? "fill" : "stroke"]();
+    }
+
+    /**
+     * Draw a rounded filled rectangle at the specified coordinates
+     * @name fillRoundRect
+     * @memberof CanvasRenderer.prototype
+     * @function
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {number} radius
+     */
+    fillRoundRect(x, y, width, height, radius) {
+        this.strokeRoundRect(x, y, width, height, radius, true);
     }
 
 
@@ -543,7 +600,7 @@ class CanvasRenderer extends Renderer {
      */
     restore() {
         this.backBufferContext2D.restore();
-        this.currentColor.glArray[3] = this.backBufferContext2D.globalAlpha;
+        this.currentColor.glArray[3] = this.getGlobalAlpha();
         this.currentScissor[0] = 0;
         this.currentScissor[1] = 0;
         this.currentScissor[2] = this.backBufferCanvas.width;
@@ -591,7 +648,7 @@ class CanvasRenderer extends Renderer {
     }
 
     /**
-     * Set the global alpha on the canvas context
+     * Set the global alpha
      * @name setGlobalAlpha
      * @memberof CanvasRenderer.prototype
      * @function
@@ -601,6 +658,17 @@ class CanvasRenderer extends Renderer {
         this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] = alpha;
     }
 
+    /**
+     * Return the global alpha
+     * @name getGlobalAlpha
+     * @memberof CanvasRenderer.prototype
+     * @function
+     * @returns {number} global alpha value
+     */
+    getGlobalAlpha() {
+        return this.backBufferContext2D.globalAlpha;
+    }
+
     /**
      * Set the line width on the context
      * @name setLineWidth
@@ -710,7 +778,7 @@ class CanvasRenderer extends Renderer {
      * @param {Rect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
      */
     setMask(mask) {
-        var context = this.backBufferContext2D;
+        var context = this.getContext();
         var _x = mask.pos.x, _y = mask.pos.y;
 
         context.save();

package/src/video/renderer.js

@@ -5,10 +5,12 @@ import * as event from "./../system/event.js";
 import device from "./../system/device.js";
 import { setPrefixed } from "./../utils/agent.js";
 import Rect from "./../geometries/rectangle.js";
+import RoundRect from "./../geometries/roundrect.js";
 import Ellipse from "./../geometries/ellipse.js";
 import Polygon from "./../geometries/poly.js";
 import Line from "./../geometries/line.js";
 import Bounds from "./../physics/bounds.js";
+import Path2D from "./../geometries/path2d.js";
 
 /**
  * @classdesc
@@ -43,12 +45,20 @@ class Renderer {
         /**
          * true if the current rendering context is valid
          * @name isContextValid
-         * @memberof Renderer
+         * @memberof Renderer#
          * @default true
          * type {boolean}
          */
         this.isContextValid = true;
 
+        /**
+         * The Path2D instance used by the renderer to draw primitives
+         * @name path2D
+         * @type {Path2D}
+         * @memberof Renderer#
+         */
+        this.path2D = new Path2D();
+
         /**
          * @ignore
          */
@@ -63,9 +73,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 {
@@ -331,11 +341,13 @@ class Renderer {
      * @name stroke
      * @memberof Renderer.prototype
      * @function
-     * @param {Rect|Polygon|Line|Ellipse} shape a shape object to stroke
+     * @param {Rect|RoundRect|Polygon|Line|Ellipse} shape a shape object to stroke
      * @param {boolean} [fill=false] fill the shape with the current color if true
      */
     stroke(shape, fill) {
-        if (shape instanceof Rect || shape instanceof Bounds) {
+        if (shape instanceof RoundRect) {
+            this.strokeRoundRect(shape.left, shape.top, shape.width, shape.height, shape.radius, fill);
+        } else if (shape instanceof Rect || shape instanceof Bounds) {
             this.strokeRect(shape.left, shape.top, shape.width, shape.height, fill);
         } else if (shape instanceof Line || shape instanceof Polygon) {
             this.strokePolygon(shape, fill);
@@ -350,6 +362,17 @@ class Renderer {
         }
     }
 
+    /**
+     * fill the given shape
+     * @name fill
+     * @memberof Renderer.prototype
+     * @function
+     * @param {Rect|Polygon|Line|Ellipse} shape a shape object to fill
+     */
+    fill(shape) {
+        this.stroke(shape, true);
+    }
+
     /**
      * tint the given image or canvas using the given color
      * @name tint
@@ -379,17 +402,6 @@ class Renderer {
         return canvas;
     }
 
-    /**
-     * fill the given shape
-     * @name fill
-     * @memberof Renderer.prototype
-     * @function
-     * @param {Rect|Polygon|Line|Ellipse} shape a shape object to fill
-     */
-    fill(shape) {
-        this.stroke(shape, true);
-    }
-
     /**
      * A mask limits rendering elements to the shape and position of the given mask object.
      * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.

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 * as pool from "./../system/pooling.js";
+import 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
         );