melonjs 10.9.0 → 10.10.0

package/src/video/renderer.js

@@ -64,6 +64,11 @@ class Renderer {
          */
         this.currentScissor = new Int32Array([ 0, 0, this.settings.width, this.settings.height ]);
 
+        /**
+         * @ignore
+         */
+        this.maskLevel = 0;
+
         /**
          * @ignore
          */
@@ -107,7 +112,7 @@ class Renderer {
     /**
      * prepare the framebuffer for drawing a new frame
      * @name clear
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      */
     clear() {}
@@ -115,7 +120,7 @@ class Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      */
     reset() {
@@ -128,12 +133,13 @@ class Renderer {
         this.currentScissor[1] = 0;
         this.currentScissor[2] = this.backBufferCanvas.width;
         this.currentScissor[3] = this.backBufferCanvas.height;
+        this.clearMask();
     }
 
     /**
      * return a reference to the system canvas
      * @name getCanvas
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {HTMLCanvasElement}
      */
@@ -144,7 +150,7 @@ class Renderer {
     /**
      * return a reference to the screen canvas
      * @name getScreenCanvas
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {HTMLCanvasElement}
      */
@@ -156,7 +162,7 @@ class Renderer {
      * return a reference to the screen canvas corresponding 2d Context<br>
      * (will return buffered context if double buffering is enabled, or a reference to the Screen Context)
      * @name getScreenContext
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {CanvasRenderingContext2D}
      */
@@ -167,7 +173,7 @@ class Renderer {
     /**
      * returns the current blend mode for this renderer
      * @name getBlendMode
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {string} blend mode
      */
@@ -179,7 +185,7 @@ class Renderer {
      * Returns the 2D Context object of the given Canvas<br>
      * Also configures anti-aliasing and blend modes based on constructor options.
      * @name getContext2d
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {HTMLCanvasElement} canvas
      * @param {boolean} [transparent=true] use false to disable transparency
@@ -217,7 +223,7 @@ class Renderer {
     /**
      * return the width of the system Canvas
      * @name getWidth
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {number}
      */
@@ -228,7 +234,7 @@ class Renderer {
     /**
      * return the height of the system Canvas
      * @name getHeight
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {number} height of the system Canvas
      */
@@ -239,7 +245,7 @@ class Renderer {
     /**
      * get the current fill & stroke style color.
      * @name getColor
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {Color} current global color
      */
@@ -250,7 +256,7 @@ class Renderer {
     /**
      * return the current global alpha
      * @name globalAlpha
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {number}
      */
@@ -261,7 +267,7 @@ class Renderer {
     /**
      * check if the given rect or bounds overlaps with the renderer screen coordinates
      * @name overlaps
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {Rect|Bounds} bounds
      * @returns {boolean} true if overlaps
@@ -277,7 +283,7 @@ class Renderer {
     /**
      * resizes the system canvas
      * @name resize
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {number} width new width of the canvas
      * @param {number} height new height of the canvas
@@ -298,7 +304,7 @@ class Renderer {
     /**
      * enable/disable image smoothing (scaling interpolation) for the given context
      * @name setAntiAlias
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {CanvasRenderingContext2D} context
      * @param {boolean} [enable=false]
@@ -328,7 +334,7 @@ class Renderer {
     /**
      * set/change the current projection matrix (WebGL only)
      * @name setProjection
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {Matrix3d} matrix
      */
@@ -339,12 +345,16 @@ class Renderer {
     /**
      * stroke the given shape
      * @name stroke
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @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 RoundRect) {
+            this.strokeRoundRect(shape.left, shape.top, shape.width, shape.height, shape.radius, fill);
+            return;
+        }
         if (shape instanceof Rect || shape instanceof Bounds) {
             this.strokeRect(shape.left, shape.top, shape.width, shape.height, fill);
             return;
@@ -353,10 +363,6 @@ class Renderer {
             this.strokePolygon(shape, fill);
             return;
         }
-        if (shape instanceof RoundRect) {
-            this.strokeRoundRect(shape.left, shape.top, shape.width, shape.height, shape.radius, fill);
-            return;
-        }
         if (shape instanceof Ellipse) {
             this.strokeEllipse(
                 shape.pos.x,
@@ -373,7 +379,7 @@ class Renderer {
     /**
      * fill the given shape
      * @name fill
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} shape a shape object to fill
      */
@@ -384,7 +390,7 @@ class Renderer {
     /**
      * tint the given image or canvas using the given color
      * @name tint
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src the source image to be tinted
      * @param {Color|string} color the color that will be used to tint the image
@@ -415,9 +421,10 @@ class Renderer {
      * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
      * Mask are not preserved through renderer context save and restore.
      * @name setMask
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
+     * @param {boolean} [invert=false] either the given shape should define what is visible (default) or the opposite
      */
     // eslint-disable-next-line no-unused-vars
     setMask(mask) {}
@@ -426,7 +433,7 @@ class Renderer {
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see Renderer#setMask
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      */
     clearMask() {}
@@ -434,7 +441,7 @@ class Renderer {
     /**
      * set a coloring tint for sprite based renderables
      * @name setTint
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {Color} tint the tint color
      * @param {number} [alpha] an alpha value to be applied to the tint
@@ -449,7 +456,7 @@ class Renderer {
      * clear the rendering tint set through setTint.
      * @name clearTint
      * @see Renderer#setTint
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      */
     clearTint() {

package/src/video/{texture.js → texture/atlas.js}

@@ -1,11 +1,11 @@
-import Vector2d from "./../math/vector2.js";
-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 loader from "./../loader/loader.js";
-import { ETA } from "./../math/math.js";
+import Vector2d from "./../../math/vector2.js";
+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 loader from "./../../loader/loader.js";
+import { ETA } from "./../../math/math.js";
 
 /**
  * create a simple 1 frame texture atlas based on the given parameters

package/src/video/{texture_cache.js → texture/cache.js}

@@ -1,7 +1,7 @@
-import { renderer } from "./video.js";
-import * as fileUtil from "./../utils/file.js";
-import { TextureAtlas, createAtlas } from "./texture.js";
-import { isPowerOfTwo} from "./../math/math.js";
+import { renderer } from "./../video.js";
+import * as fileUtil from "./../../utils/file.js";
+import { TextureAtlas, createAtlas } from "./atlas.js";
+import { isPowerOfTwo} from "./../../math/math.js";
 import {ArrayMultimap} from "@teppeis/multimaps";
 
 

package/src/video/texture/canvas_texture.js

@@ -0,0 +1,87 @@
+import { createCanvas } from "./../video.js";
+
+/**
+ * Creates a Canvas Texture of the given size
+ */
+class CanvasTexture {
+    /**
+     * @param {number} width the desired width of the canvas
+     * @param {number} height the desired height of the canvas
+     * @param {number} [offscreenCanvas=true] if the the canvas should be an OffscreenCanvas
+     */
+    constructor(width, height, offscreenCanvas = true) {
+        /**
+         * the canvas created for this CanvasTexture
+         * @type {HTMLCanvasElement|OffscreenCanvas}
+         */
+        this.canvas = createCanvas(width, height, offscreenCanvas);
+
+        /**
+         * the rendering context of this CanvasTexture
+         * @type {CanvasRenderingContext2D}
+         */
+        this.context = this.canvas.getContext("2d");
+    }
+
+    /**
+     * @ignore
+     */
+    onResetEvent(width, height) {
+        this.clear();
+        this.resize(width, height);
+    }
+
+    /**
+     * Clears the content of the canvas texture
+     */
+    clear() {
+        this.context.setTransform(1, 0, 0, 1, 0, 0);
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    /**
+     * Resizes the canvas texture to the given width and height.
+     * @param {number} width the desired width
+     * @param {number} height the desired height
+     */
+    resize(width, height) {
+        this.canvas.width = Math.round(width);
+        this.canvas.height = Math.round(height);
+    }
+
+    /**
+     * @ignore
+     */
+    destroy() {
+        this.context = undefined;
+        this.canvas = undefined;
+    }
+
+    /**
+     * The width of this canvas texture in pixels
+     * @public
+     * @type {number}
+     */
+    get width() {
+        return this.canvas.width;
+    }
+
+    set width(val) {
+        this.canvas.width = Math.round(val);
+    }
+
+    /**
+     * The height of this canvas texture in pixels
+     * @public
+     * @type {number}
+     */
+    get height() {
+        return this.canvas.height;
+    }
+
+    set height(val) {
+        this.canvas.height = Math.round(val);
+    }
+}
+
+export default CanvasTexture;