melonjs 10.7.1 → 10.8.0

package/src/video/canvas/canvas_renderer.js

@@ -189,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);
     }
 
     /**
@@ -208,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);
     }
 
     /**
@@ -234,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;
@@ -271,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);
     }
 
     /**
@@ -287,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;
     }
 
     /**
@@ -311,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);
@@ -352,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,
@@ -408,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;
         }
@@ -444,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();
@@ -488,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);
     }
 
     /**
@@ -510,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);
     }
 
 
@@ -556,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;
@@ -604,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
@@ -614,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
@@ -723,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
          */
@@ -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/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;
+};

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

@@ -0,0 +1,58 @@
+/**
+ * @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
+ */
+export 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;
+};

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

@@ -0,0 +1,16 @@
+/**
+ * clean the given source from space, comments, etc...
+ * @ignore
+ */
+export 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;
+};