melonjs 10.9.0 → 10.12.0

package/src/video/renderer.js

@@ -38,7 +38,7 @@ class Renderer {
          * @public
          * @name settings
          * @memberof Renderer#
-         * @enum {object}
+         * @type {object}
          */
         this.settings = options;
 
@@ -64,6 +64,11 @@ class Renderer {
          */
         this.currentScissor = new Int32Array([ 0, 0, this.settings.width, this.settings.height ]);
 
+        /**
+         * @ignore
+         */
+        this.maskLevel = 0;
+
         /**
          * @ignore
          */
@@ -107,16 +112,14 @@ class Renderer {
     /**
      * prepare the framebuffer for drawing a new frame
      * @name clear
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      */
     clear() {}
 
     /**
      * Reset context state
      * @name reset
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      */
     reset() {
         this.resetTransform();
@@ -128,13 +131,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
-     * @function
+     * @memberof Renderer
      * @returns {HTMLCanvasElement}
      */
     getCanvas() {
@@ -144,8 +147,7 @@ class Renderer {
     /**
      * return a reference to the screen canvas
      * @name getScreenCanvas
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @returns {HTMLCanvasElement}
      */
     getScreenCanvas() {
@@ -156,8 +158,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
-     * @function
+     * @memberof Renderer
      * @returns {CanvasRenderingContext2D}
      */
     getScreenContext() {
@@ -167,8 +168,7 @@ class Renderer {
     /**
      * returns the current blend mode for this renderer
      * @name getBlendMode
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @returns {string} blend mode
      */
     getBlendMode() {
@@ -179,8 +179,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
-     * @function
+     * @memberof Renderer
      * @param {HTMLCanvasElement} canvas
      * @param {boolean} [transparent=true] use false to disable transparency
      * @returns {CanvasRenderingContext2D}
@@ -217,8 +216,7 @@ class Renderer {
     /**
      * return the width of the system Canvas
      * @name getWidth
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @returns {number}
      */
     getWidth() {
@@ -228,8 +226,7 @@ class Renderer {
     /**
      * return the height of the system Canvas
      * @name getHeight
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @returns {number} height of the system Canvas
      */
     getHeight() {
@@ -239,8 +236,7 @@ class Renderer {
     /**
      * get the current fill & stroke style color.
      * @name getColor
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @returns {Color} current global color
      */
     getColor() {
@@ -250,8 +246,7 @@ class Renderer {
     /**
      * return the current global alpha
      * @name globalAlpha
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @returns {number}
      */
     globalAlpha() {
@@ -261,8 +256,7 @@ class Renderer {
     /**
      * check if the given rect or bounds overlaps with the renderer screen coordinates
      * @name overlaps
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @param {Rect|Bounds} bounds
      * @returns {boolean} true if overlaps
      */
@@ -277,8 +271,7 @@ class Renderer {
     /**
      * resizes the system canvas
      * @name resize
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @param {number} width new width of the canvas
      * @param {number} height new height of the canvas
      */
@@ -298,8 +291,7 @@ class Renderer {
     /**
      * enable/disable image smoothing (scaling interpolation) for the given context
      * @name setAntiAlias
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @param {CanvasRenderingContext2D} context
      * @param {boolean} [enable=false]
      */
@@ -328,8 +320,7 @@ class Renderer {
     /**
      * set/change the current projection matrix (WebGL only)
      * @name setProjection
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -339,12 +330,15 @@ class Renderer {
     /**
      * stroke the given shape
      * @name stroke
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @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 +347,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,8 +363,7 @@ class Renderer {
     /**
      * fill the given shape
      * @name fill
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} shape a shape object to fill
      */
     fill(shape) {
@@ -384,8 +373,7 @@ class Renderer {
     /**
      * tint the given image or canvas using the given color
      * @name tint
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @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
      * @param {string} [mode="multiply"] the composition mode used to tint the image
@@ -415,9 +403,9 @@ 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
-     * @function
+     * @memberof Renderer
      * @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,16 +414,14 @@ class Renderer {
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see Renderer#setMask
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      */
     clearMask() {}
 
     /**
      * set a coloring tint for sprite based renderables
      * @name setTint
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      * @param {Color} tint the tint color
      * @param {number} [alpha] an alpha value to be applied to the tint
      */
@@ -449,8 +435,7 @@ class Renderer {
      * clear the rendering tint set through setTint.
      * @name clearTint
      * @see Renderer#setTint
-     * @memberof Renderer.prototype
-     * @function
+     * @memberof Renderer
      */
     clearTint() {
         // reset to default

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
@@ -381,6 +381,8 @@ export class TextureAtlas {
      * add uvs mapping for the given region
      * @param {object} atlas the atlas dictionnary where the region is define
      * @param {object} name region (or frame) name
+     * @param {number} w the width of the region
+     * @param {number} h the height of the region
      * @returns {Float32Array} the created region UVs
      */
     addUVs(atlas, name, w, h) {

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

@@ -1,10 +1,9 @@
-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";
 
-
 /**
  * a basic texture cache object
  * @ignore

package/src/video/texture/canvas_texture.js

@@ -0,0 +1,99 @@
+import { createCanvas } from "./../video.js";
+
+// default video settings
+var defaultAttributes = {
+    offscreenCanvas : false,
+    willReadFrequently : false
+};
+
+/**
+ * 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 {object} attributes The attributes to create both the canvas and 2d context
+     * @param {boolean} [attributes.offscreenCanvas=false] will create an offscreenCanvas if true instead of a standard canvas
+     * @param {boolean} [attributes.willReadFrequently=false] Indicates whether or not a lot of read-back operations are planned
+     */
+    constructor(width, height, attributes = defaultAttributes) {
+
+        // clean up the given attributes
+        attributes = Object.assign(defaultAttributes, attributes || {});
+
+        /**
+         * the canvas created for this CanvasTexture
+         * @type {HTMLCanvasElement|OffscreenCanvas}
+         */
+        this.canvas = createCanvas(width, height, attributes.offscreenCanvas);
+
+        /**
+         * the rendering context of this CanvasTexture
+         * @type {CanvasRenderingContext2D}
+         */
+        this.context = this.canvas.getContext("2d", { willReadFrequently: attributes.willReadFrequently });
+    }
+
+    /**
+     * @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;

package/src/video/video.js

@@ -382,17 +382,17 @@ export function init(width, height, options) {
  * @function video.createCanvas
  * @param {number} width width
  * @param {number} height height
- * @param {boolean} [offscreen=false] will returns an OffscreenCanvas if supported
+ * @param {boolean} [offscreenCanvas=false] will return an OffscreenCanvas if supported
  * @returns {HTMLCanvasElement|OffscreenCanvas}
  */
-export function createCanvas(width, height, offscreen = false) {
+export function createCanvas(width, height, offscreenCanvas = false) {
     var _canvas;
 
     if (width === 0 || height === 0) {
         throw new Error("width or height was zero, Canvas could not be initialized !");
     }
 
-    if (device.OffscreenCanvas === true && offscreen === true) {
+    if (device.OffscreenCanvas === true && offscreenCanvas === true) {
         _canvas = new OffscreenCanvas(0, 0);
         // stubbing style for compatibility,
         // as OffscreenCanvas is detached from the DOM

package/src/video/webgl/glshader.js

@@ -103,7 +103,6 @@ class GLShader {
      * Installs this shader program as part of current rendering state
      * @name bind
      * @memberof GLShader
-     * @function
      */
     bind() {
         this.gl.useProgram(this.program);
@@ -113,7 +112,6 @@ class GLShader {
      * returns the location of an attribute variable in this shader program
      * @name getAttribLocation
      * @memberof GLShader
-     * @function
      * @param {string} name the name of the attribute variable whose location to get.
      * @returns {GLint} number indicating the location of the variable name if found. Returns -1 otherwise
      */
@@ -130,7 +128,6 @@ class GLShader {
      * Set the uniform to the given value
      * @name setUniform
      * @memberof GLShader
-     * @function
      * @param {string} name the uniform name
      * @param {object|Float32Array} value the value to assign to that uniform
      * @example
@@ -153,7 +150,6 @@ class GLShader {
      * activate the given vertex attribute for this shader
      * @name setVertexAttributes
      * @memberof GLShader
-     * @function
      * @param {WebGLRenderingContext} gl the current WebGL rendering context
      * @param {object[]} attributes an array of vertex attributes
      * @param {number} vertexByteSize the size of a single vertex in bytes
@@ -177,7 +173,6 @@ class GLShader {
      * destroy this shader objects resources (program, attributes, uniforms)
      * @name destroy
      * @memberof GLShader
-     * @function
      */
     destroy() {
         this.uniforms = null;

package/src/video/webgl/utils/uniforms.js

@@ -47,9 +47,8 @@ export function extractUniforms(gl, shader) {
 
         descriptor[name] = {
             "get" : (function (name) {
-                /**
+                /*
                  * A getter for the uniform location
-                 * @ignore
                  */
                 return function () {
                     return locations[name];
@@ -57,18 +56,16 @@ export function extractUniforms(gl, shader) {
             })(name),
             "set" : (function (name, type, fn) {
                 if (type.indexOf("mat") === 0) {
-                    /**
+                    /*
                      * A generic setter for uniform matrices
-                     * @ignore
                      */
                     return function (val) {
                         gl[fn](locations[name], false, val);
                     };
                 }
                 else {
-                    /**
+                    /*
                      * A generic setter for uniform vectors
-                     * @ignore
                      */
                     return function (val) {
                         var fnv = fn;

package/src/video/webgl/webgl_compositor.js

@@ -156,7 +156,6 @@ class WebGLCompositor {
      * add vertex attribute property definition to the compositor
      * @name addAttribute
      * @memberof WebGLCompositor
-     * @function
      * @param {string} name name of the attribute in the vertex shader
      * @param {number} size number of components per vertex attribute. Must be 1, 2, 3, or 4.
      * @param {GLenum} type data type of each component in the array
@@ -204,7 +203,6 @@ class WebGLCompositor {
      * Sets the viewport
      * @name setViewport
      * @memberof WebGLCompositor
-     * @function
      * @param {number} x x position of viewport
      * @param {number} y y position of viewport
      * @param {number} w width of viewport
@@ -218,7 +216,6 @@ class WebGLCompositor {
      * Create a WebGL texture from an image
      * @name createTexture2D
      * @memberof WebGLCompositor
-     * @function
      * @param {number} unit Destination texture unit
      * @param {Image|HTMLCanvasElement|ImageData|Uint8Array[]|Float32Array[]} image Source image
      * @param {number} filter gl.LINEAR or gl.NEAREST
@@ -263,7 +260,6 @@ class WebGLCompositor {
      * delete the given WebGL texture
      * @name bindTexture2D
      * @memberof WebGLCompositor
-     * @function
      * @param {WebGLTexture} [texture] a WebGL texture to delete
      * @param {number} [unit] Texture unit to delete
      */
@@ -276,7 +272,6 @@ class WebGLCompositor {
      * returns the WebGL texture associated to the given texture unit
      * @name bindTexture2D
      * @memberof WebGLCompositor
-     * @function
      * @param {number} unit Texture unit to which a texture is bound
      * @returns {WebGLTexture} texture a WebGL texture
      */
@@ -288,7 +283,6 @@ class WebGLCompositor {
      * assign the given WebGL texture to the current batch
      * @name bindTexture2D
      * @memberof WebGLCompositor
-     * @function
      * @param {WebGLTexture} texture a WebGL texture
      * @param {number} unit Texture unit to which the given texture is bound
      */
@@ -316,7 +310,6 @@ class WebGLCompositor {
      * unbind the given WebGL texture, forcing it to be reuploaded
      * @name unbindTexture2D
      * @memberof WebGLCompositor
-     * @function
      * @param {WebGLTexture} [texture] a WebGL texture
      * @param {number} [unit] a WebGL texture
      * @returns {number} unit the unit number that was associated with the given texture
@@ -363,7 +356,6 @@ class WebGLCompositor {
      * set/change the current projection matrix
      * @name setProjection
      * @memberof WebGLCompositor
-     * @function
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -375,7 +367,6 @@ class WebGLCompositor {
      * @name useShader
      * @see GLShader
      * @memberof WebGLCompositor
-     * @function
      * @param {GLShader} shader a reference to a GLShader instance
      */
     useShader(shader) {
@@ -392,7 +383,6 @@ class WebGLCompositor {
      * Add a textured quad
      * @name addQuad
      * @memberof WebGLCompositor
-     * @function
      * @param {TextureAtlas} texture Source texture atlas
      * @param {number} x Destination x-coordinate
      * @param {number} y Destination y-coordinate
@@ -449,7 +439,6 @@ class WebGLCompositor {
      * Flush batched texture operations to the GPU
      * @param {number} [mode=gl.TRIANGLES] the GL drawing mode
      * @memberof WebGLCompositor
-     * @function
      */
     flush(mode = this.mode) {
         var vertex = this.vertexBuffer;
@@ -477,7 +466,6 @@ class WebGLCompositor {
      * Draw an array of vertices
      * @name drawVertices
      * @memberof WebGLCompositor
-     * @function
      * @param {GLenum} mode primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
      * @param {Vector2d[]} verts vertices
      * @param {number} [vertexCount=verts.length] amount of points defined in the points array
@@ -507,7 +495,6 @@ class WebGLCompositor {
      * Specify the color values used when clearing color buffers. The values are clamped between 0 and 1.
      * @name clearColor
      * @memberof WebGLCompositor
-     * @function
      * @param {number} [r=0] - the red color value used when the color buffers are cleared
      * @param {number} [g=0] - the green color value used when the color buffers are cleared
      * @param {number} [b=0] - the blue color value used when the color buffers are cleared
@@ -521,7 +508,6 @@ class WebGLCompositor {
      * Clear the frame buffer
      * @name clear
      * @memberof WebGLCompositor
-     * @function
      */
     clear() {
         this.gl.clear(this.gl.COLOR_BUFFER_BIT);