melonjs 10.7.1 → 10.10.0

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,17 +45,30 @@ 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
          */
         this.currentScissor = new Int32Array([ 0, 0, this.settings.width, this.settings.height ]);
 
+        /**
+         * @ignore
+         */
+        this.maskLevel = 0;
+
         /**
          * @ignore
          */
@@ -97,7 +112,7 @@ class Renderer {
     /**
      * prepare the framebuffer for drawing a new frame
      * @name clear
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      */
     clear() {}
@@ -105,7 +120,7 @@ class Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      */
     reset() {
@@ -118,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}
      */
@@ -134,7 +150,7 @@ class Renderer {
     /**
      * return a reference to the screen canvas
      * @name getScreenCanvas
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {HTMLCanvasElement}
      */
@@ -146,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}
      */
@@ -157,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
      */
@@ -169,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
@@ -207,7 +223,7 @@ class Renderer {
     /**
      * return the width of the system Canvas
      * @name getWidth
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {number}
      */
@@ -218,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
      */
@@ -229,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
      */
@@ -240,7 +256,7 @@ class Renderer {
     /**
      * return the current global alpha
      * @name globalAlpha
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @returns {number}
      */
@@ -251,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
@@ -267,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
@@ -288,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]
@@ -318,7 +334,7 @@ class Renderer {
     /**
      * set/change the current projection matrix (WebGL only)
      * @name setProjection
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
      * @param {Matrix3d} matrix
      */
@@ -329,17 +345,25 @@ class Renderer {
     /**
      * stroke the given shape
      * @name stroke
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @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 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);
-        } else if (shape instanceof Line || shape instanceof Polygon) {
+            return;
+        }
+        if (shape instanceof Line || shape instanceof Polygon) {
             this.strokePolygon(shape, fill);
-        } else if (shape instanceof Ellipse) {
+            return;
+        }
+        if (shape instanceof Ellipse) {
             this.strokeEllipse(
                 shape.pos.x,
                 shape.pos.y,
@@ -347,13 +371,26 @@ class Renderer {
                 shape.radiusV.y,
                 fill
             );
+            return;
         }
+        throw new Error("Invalid geometry for fill/stroke");
+    }
+
+    /**
+     * fill the given shape
+     * @name fill
+     * @memberof Renderer
+     * @function
+     * @param {Rect|RoundRect|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
-     * @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
@@ -379,25 +416,15 @@ 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.
      * Mask are not preserved through renderer context save and restore.
      * @name setMask
-     * @memberof Renderer.prototype
+     * @memberof Renderer
      * @function
-     * @param {Rect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
+     * @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) {}
@@ -406,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() {}
@@ -414,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
@@ -429,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 * as 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;

package/src/video/webgl/glshader.js

@@ -1,198 +1,10 @@
 import * as event from "./../../system/event.js";
 import device from "./../../system/device.js";
-
-/**
- * @ignore
- */
-function extractUniforms(gl, shader) {
-    var uniforms = {},
-        uniRx = /uniform\s+(\w+)\s+(\w+)/g,
-        uniformsData = {},
-        descriptor = {},
-        locations = {},
-        match;
-
-    // Detect all uniform names and types
-    [ shader.vertex, shader.fragment ].forEach(function (shader) {
-        while ((match = uniRx.exec(shader))) {
-            uniformsData[match[2]] = match[1];
-        }
-    });
-
-    // Get uniform references
-    Object.keys(uniformsData).forEach(function (name) {
-        var type = uniformsData[name];
-        locations[name] = gl.getUniformLocation(shader.program, name);
-
-        descriptor[name] = {
-            "get" : (function (name) {
-                /**
-                 * A getter for the uniform location
-                 * @ignore
-                 */
-                return function () {
-                    return locations[name];
-                };
-            })(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;
-                        if (val.length && fn.substr(-1) !== "v") {
-                            fnv += "v";
-                        }
-                        gl[fnv](locations[name], val);
-                    };
-                }
-            })(name, type, "uniform" + fnHash[type])
-        };
-    });
-    Object.defineProperties(uniforms, descriptor);
-
-    return uniforms;
-};
-
-/**
- * @ignore
- */
-function extractAttributes(gl, shader) {
-    var attributes = {},
-        attrRx = /attribute\s+\w+\s+(\w+)/g,
-        match,
-        i = 0;
-
-    // Detect all attribute names
-    while ((match = attrRx.exec(shader.vertex))) {
-        attributes[match[1]] = i++;
-    }
-
-    return attributes;
-};
-
-/**
- * @ignore
- */
-function compileShader(gl, type, source) {
-    var shader = gl.createShader(type);
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        throw new Error(gl.getShaderInfoLog(shader));
-    }
-
-    return shader;
-};
-
-/**
- * Compile GLSL into a shader object
- * @ignore
- */
-function compileProgram(gl, vertex, fragment, attributes) {
-    var vertShader = compileShader(gl, gl.VERTEX_SHADER, vertex);
-    var fragShader = compileShader(gl, gl.FRAGMENT_SHADER, fragment);
-
-    var program = gl.createProgram();
-
-    gl.attachShader(program, vertShader);
-    gl.attachShader(program, fragShader);
-
-
-    // force vertex attributes to use location 0 as starting location to prevent
-    // browser to do complicated emulation when running on desktop OpenGL (e.g. on macOS)
-    for (var location in attributes) {
-        gl.bindAttribLocation(program, attributes[location], location);
-    }
-
-    gl.linkProgram(program);
-
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        var error_msg =
-            "Error initializing Shader " + this + "\n" +
-            "gl.VALIDATE_STATUS: " + gl.getProgramParameter(program, gl.VALIDATE_STATUS) + "\n" +
-            "gl.getError()" + gl.getError() + "\n" +
-            "gl.getProgramInfoLog()" + gl.getProgramInfoLog(program);
-        // house cleaning
-        gl.deleteProgram(program);
-        program = null;
-        // throw the exception
-        throw new Error(error_msg);
-    }
-
-    gl.useProgram(program);
-
-    // clean-up
-    gl.deleteShader(vertShader);
-    gl.deleteShader(fragShader);
-
-    return program;
-};
-
-
-/**
- * Hash map of GLSL data types to WebGL Uniform methods
- * @ignore
- */
-var fnHash = {
-    "bool"      : "1i",
-    "int"       : "1i",
-    "float"     : "1f",
-    "vec2"      : "2fv",
-    "vec3"      : "3fv",
-    "vec4"      : "4fv",
-    "bvec2"     : "2iv",
-    "bvec3"     : "3iv",
-    "bvec4"     : "4iv",
-    "ivec2"     : "2iv",
-    "ivec3"     : "3iv",
-    "ivec4"     : "4iv",
-    "mat2"      : "Matrix2fv",
-    "mat3"      : "Matrix3fv",
-    "mat4"      : "Matrix4fv",
-    "sampler2D" : "1i"
-};
-
-/**
- * set precision for the fiven shader source
- * won't do anything if the precision is already specified
- * @ignore
- */
-function setPrecision(src, precision) {
-    if (src.substring(0, 9) !== "precision") {
-        return "precision " + precision + " float;" + src;
-    }
-    return src;
-};
-
-/**
- * clean the given source from space, comments, etc...
- * @ignore
- */
-function minify(src) {
-    // remove comments
-    src = src.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, "$1");
-    // Remove leading and trailing whitespace from lines
-    src = src.replace(/(\\n\s+)|(\s+\\n)/g, "");
-    // Remove line breaks
-    src = src.replace(/(\\r|\\n)+/g, "");
-    // Remove unnecessary whitespace
-    src = src.replace(/\s*([;,[\](){}\\\/\-+*|^&!=<>?~%])\s*/g, "$1");
-
-    return src;
-};
+import { extractUniforms } from "./utils/uniforms.js";
+import { extractAttributes } from "./utils/attributes.js";
+import { compileProgram } from "./utils/program.js";
+import { setPrecision } from "./utils/precision.js";
+import { minify } from "./utils/string.js";
 
 /**
  * @classdesc
@@ -337,6 +149,30 @@ 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
+     */
+    setVertexAttributes(gl, attributes, vertexByteSize) {
+        // set the vertex attributes
+        for (var index = 0; index < attributes.length; ++index) {
+            var element = attributes[index];
+            var location = this.getAttribLocation(element.name);
+
+            if (location !== -1) {
+                gl.enableVertexAttribArray(location);
+                gl.vertexAttribPointer(location, element.size, element.type, element.normalized, vertexByteSize, element.offset);
+            } else {
+                gl.disableVertexAttribArray(index);
+            }
+        }
+    }
+
     /**
      * destroy this shader objects resources (program, attributes, uniforms)
      * @name destroy

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

@@ -0,0 +1,16 @@
+/**
+ * @ignore
+ */
+export function extractAttributes(gl, shader) {
+    var attributes = {},
+        attrRx = /attribute\s+\w+\s+(\w+)/g,
+        match,
+        i = 0;
+
+    // Detect all attribute names
+    while ((match = attrRx.exec(shader.vertex))) {
+        attributes[match[1]] = i++;
+    }
+
+    return attributes;
+};

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

@@ -0,0 +1,11 @@
+/**
+ * set precision for the fiven shader source
+ * won't do anything if the precision is already specified
+ * @ignore
+ */
+export function setPrecision(src, precision) {
+    if (src.substring(0, 9) !== "precision") {
+        return "precision " + precision + " float;" + src;
+    }
+    return src;
+};