melonjs 14.4.0 → 14.5.0

package/src/text/bitmaptext.js

@@ -1,6 +1,6 @@
 import Color from "./../math/color.js";
 import pool from "./../system/pooling.js";
-import loader from "./../loader/loader.js";
+import { getImage, getBinary } from "./../loader/loader.js";
 import Renderable from "./../renderable/renderable.js";
 import TextMetrics from "./textmetrics.js";
 
@@ -95,7 +95,7 @@ import TextMetrics from "./textmetrics.js";
          * font image
          * @private
          */
-        this.fontImage = (typeof settings.font === "object") ? settings.font : loader.getImage(settings.font);
+        this.fontImage = (typeof settings.font === "object") ? settings.font : getImage(settings.font);
 
         if (typeof settings.fontData !== "string") {
             /**
@@ -103,11 +103,11 @@ import TextMetrics from "./textmetrics.js";
              * @private
              */
             // use settings.font to retreive the data from the loader
-            this.fontData = pool.pull("BitmapTextData", loader.getBinary(settings.font));
+            this.fontData = pool.pull("BitmapTextData", getBinary(settings.font));
         } else {
             this.fontData = pool.pull("BitmapTextData",
                 // if starting/includes "info face" the whole data string was passed as parameter
-                (settings.fontData.includes("info face")) ? settings.fontData : loader.getBinary(settings.fontData)
+                (settings.fontData.includes("info face")) ? settings.fontData : getBinary(settings.fontData)
             );
         }
 
@@ -176,11 +176,70 @@ import TextMetrics from "./textmetrics.js";
             this._text = this.metrics.wordWrap(this._text, this.wordWrapWidth);
         }
 
-        this.getBounds().addBounds(this.metrics.measureText(this._text), true);
+        this.updateBounds();
 
         return this;
     }
 
+    /**
+     * update the bounding box for this Bitmap Text.
+     * @param {boolean} [absolute=true] - update the bounds size and position in (world) absolute coordinates
+     * @returns {Bounds} this Bitmap Text bounding box Rectangle object
+     */
+    updateBounds(absolute = true) {
+        var bounds = this.getBounds();
+
+        bounds.clear();
+
+        if (typeof this.metrics !== "undefined") {
+            var ax, ay;
+
+            bounds.addBounds(this.metrics.measureText(this._text));
+
+            switch (this.textAlign) {
+                case "right":
+                    ax = this.metrics.width * 1.0;
+                    break;
+
+                case "center":
+                    ax = this.metrics.width * 0.5;
+                    break;
+
+                default :
+                    ax = this.metrics.width * 0.0;
+                    break;
+            }
+
+             // adjust y pos based on alignment value
+             switch (this.textBaseline) {
+                case "middle":
+                    ay = this.metrics.height * 0.5;
+                    break;
+
+                case "ideographic":
+                case "alphabetic":
+                case "bottom":
+                    ay = this.metrics.height * 1.0;
+                    break;
+
+                default :
+                    ay = this.metrics.height * 0.0;
+                    break;
+            }
+
+            // translate the bounds accordingly
+            bounds.translate(ax, ay);
+        }
+
+        if (absolute === true) {
+            if (typeof this.ancestor !== "undefined" && typeof this.ancestor.addChild === "function" && this.floating !== true) {
+                 bounds.translate(this.ancestor.getAbsolutePosition());
+            }
+        }
+
+        return bounds;
+    }
+
     /**
      * defines the color used to tint the bitmap text
      * @public
@@ -207,9 +266,8 @@ import TextMetrics from "./textmetrics.js";
     resize(scale) {
         this.fontScale.set(scale, scale);
 
-        this.getBounds().addBounds(this.metrics.measureText(this._text), true);
+        this.updateBounds();
 
-        // clear the cache text to recalculate bounds
         this.isDirty = true;
 
         return this;

package/src/utils/string.js

@@ -27,7 +27,7 @@ export function isNumeric(str) {
     if (typeof str === "string") {
         str = str.trim();
     }
-    return !isNaN(str) && /[+-]?([0-9]*[.])?[0-9]+/.test(str);
+    return !isNaN(str) && /^[+-]?(\d+(\.\d+)?|\.\d+)$/.test(str);
 }
 
 /**

package/src/utils/utils.js

@@ -99,9 +99,7 @@ var utils = {
         }
 
         // parse the url
-        url.slice(1).split("&").filter((value) => {
-            return (value !== "");
-        }).forEach((value) => {
+        url.slice(1).split("&").filter((value) => value !== "").forEach((value) => {
             var kv = value.split("=");
             var k = kv.shift();
             var v = kv.join("=");

package/src/video/texture/atlas.js

@@ -4,7 +4,7 @@ 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 { getImage } from "./../../loader/loader.js";
 import { ETA } from "./../../math/math.js";
 
 /**
@@ -98,7 +98,7 @@ export class TextureAtlas {
                         // set the texture
                         if (typeof(src) === "undefined") {
                             // get the texture name from the atlas meta data
-                            var image = loader.getImage(atlas.meta.image);
+                            var image = getImage(atlas.meta.image);
                             if (!image) {
                                 throw new Error(
                                     "Atlas texture '" + image + "' not found"
@@ -106,7 +106,7 @@ export class TextureAtlas {
                             }
                             this.sources.set(atlas.meta.image, image);
                         } else {
-                            this.sources.set(atlas.meta.image || "default", typeof src === "string" ? loader.getImage(src) : src);
+                            this.sources.set(atlas.meta.image || "default", typeof src === "string" ? getImage(src) : src);
                         }
                         this.repeat = "no-repeat";
                     }
@@ -120,13 +120,13 @@ export class TextureAtlas {
                         }
                         this.format = "ShoeBox";
                         this.repeat = "no-repeat";
-                        this.sources.set("default", typeof src === "string" ? loader.getImage(src) : src);
+                        this.sources.set("default", typeof src === "string" ? getImage(src) : src);
                     }
                     // Internal texture atlas
                     else if (atlas.meta.app.includes("melonJS")) {
                         this.format = "melonJS";
                         this.repeat = atlas.meta.repeat || "no-repeat";
-                        this.sources.set("default", typeof src === "string" ? loader.getImage(src) : src);
+                        this.sources.set("default", typeof src === "string" ? getImage(src) : src);
                     }
                     // initialize the atlas
                     this.atlases.set(atlas.meta.image || "default", this.parse(atlas));
@@ -140,7 +140,7 @@ export class TextureAtlas {
 
                         if (typeof(src) !== "undefined") {
                             // overwrite if specified
-                            atlas.image = typeof src === "string" ? loader.getImage(src) : src;
+                            atlas.image = typeof src === "string" ? getImage(src) : src;
                         }
                         // initialize the atlas
                         this.atlases.set("default", this.parseFromSpriteSheet(atlas));
@@ -346,12 +346,13 @@ export class TextureAtlas {
             region = this.getAtlas(atlas)[name];
         } else {
             // look for the given region in each existing atlas
-            this.atlases.forEach((atlas) => {
+            for (let atlas of this.atlases.values()) {
                 if (typeof atlas[name] !== "undefined") {
                     // there should be only one
                     region = atlas[name];
+                    break;
                 }
-            });
+            }
         }
         return region;
     }

package/src/video/texture/cache.js

@@ -56,8 +56,8 @@ class TextureCache {
         } else {
             // manage cases where a specific atlas is specified
             this.cache.forEach((value, key) => {
-                var _atlas = value.getAtlas();
-                if (key === image && _atlas[0].width === atlas.framewidth && _atlas[0].height === atlas.frameheight) {
+                var _atlas = value.getAtlas()[0];
+                if (key === image && _atlas.width === atlas.framewidth && _atlas.height === atlas.frameheight) {
                     entry = value;
                 }
             });

package/src/video/video.js

@@ -87,7 +87,7 @@ export function init(width, height, options) {
          // initialize the default game Application with the given options
         game.init(width, height, options);
     } catch (e) {
-        console(e.message);
+        console.log(e.message);
         // me.video.init() historically returns false if failing at creating/using a HTML5 canvas
         return false;
     }

package/src/video/webgl/compositors/compositor.js

@@ -0,0 +1,227 @@
+import * as event from "../../../system/event.js";
+
+
+/**
+ * @classdesc
+ * A base Compositor object.
+ */
+ export default class Compositor {
+    /**
+     * @param {WebGLRenderer} renderer - the current WebGL renderer session
+     */
+    constructor (renderer) {
+        this.init(renderer);
+    }
+
+    /**
+     * Initialize the compositor
+     * @ignore
+     */
+    init (renderer) {
+        // local reference
+        var gl = renderer.gl;
+
+        // the associated renderer
+        this.renderer = renderer;
+
+        // WebGL context
+        this.gl = renderer.gl;
+
+        // Global fill color
+        this.color = renderer.currentColor;
+
+        // Global transformation matrix
+        this.viewMatrix = renderer.currentTransform;
+
+        /**
+         * a reference to the active WebGL shader
+         * @type {GLShader}
+         */
+        this.activeShader = null;
+
+        /**
+         * primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
+         * @type {number}
+         * @default gl.TRIANGLES
+         */
+        this.mode = gl.TRIANGLES;
+
+        /**
+         * an array of vertex attribute properties
+         * @see WebGLCompositor.addAttribute
+         * @type {Array}
+         */
+        this.attributes = [];
+
+        /**
+         * the size of a single vertex in bytes
+         * (will automatically be calculated as attributes definitions are added)
+         * @see WebGLCompositor.addAttribute
+         * @type {number}
+         */
+        this.vertexByteSize = 0;
+
+        /**
+         * the size of a single vertex in floats
+         * (will automatically be calculated as attributes definitions are added)
+         * @see WebGLCompositor.addAttribute
+         * @type {number}
+         */
+        this.vertexSize = 0;
+
+        // register to the CANVAS resize channel
+        event.on(event.CANVAS_ONRESIZE, (width, height) => {
+            this.flush();
+            this.setViewport(0, 0, width, height);
+        });
+    }
+
+    /**
+     * Reset compositor internal state
+     * @ignore
+     */
+    reset() {
+        // WebGL context
+        this.gl = this.renderer.gl;
+
+        this.flush();
+
+        // initial viewport size
+        this.setViewport(
+            0, 0,
+            this.renderer.getCanvas().width,
+            this.renderer.getCanvas().height
+        );
+
+        // Initialize clear color
+        this.clearColor(0.0, 0.0, 0.0, 0.0);
+    }
+
+    /**
+     * add vertex attribute property definition to the compositor
+     * @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
+     * @param {boolean} normalized - whether integer data values should be normalized into a certain range when being cast to a float
+     * @param {number} offset - offset in bytes of the first component in the vertex attribute array
+     */
+    addAttribute(name, size, type, normalized, offset) {
+        this.attributes.push({
+            name: name,
+            size: size,
+            type: type,
+            normalized: normalized,
+            offset: offset
+        });
+
+        switch (type) {
+            case this.gl.BYTE:
+                this.vertexByteSize += size * Int8Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_BYTE:
+                this.vertexByteSize += size * Uint8Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.SHORT:
+                this.vertexByteSize += size * Int16Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_SHORT:
+                this.vertexByteSize += size * Uint16Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.INT:
+                this.vertexByteSize += size * Int32Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_INT:
+                this.vertexByteSize += size * Uint32Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.FLOAT:
+                this.vertexByteSize += size * Float32Array.BYTES_PER_ELEMENT;
+                break;
+            default:
+                throw new Error("Invalid GL Attribute type");
+        }
+        this.vertexSize = this.vertexByteSize / Float32Array.BYTES_PER_ELEMENT;
+    }
+
+    /**
+     * Sets the viewport
+     * @param {number} x - x position of viewport
+     * @param {number} y - y position of viewport
+     * @param {number} w - width of viewport
+     * @param {number} h - height of viewport
+     */
+    setViewport(x, y, w, h) {
+        this.gl.viewport(x, y, w, h);
+    }
+
+    /**
+     * set/change the current projection matrix
+     * @param {Matrix3d} matrix
+     */
+    setProjection(matrix) {
+        this.activeShader.setUniform("uProjectionMatrix", matrix);
+    }
+
+    /**
+     * Select the shader to use for compositing
+     * @see GLShader
+     * @param {GLShader} shader - a reference to a GLShader instance
+     */
+    useShader(shader) {
+        if (this.activeShader !== shader) {
+            this.flush();
+            this.activeShader = shader;
+            this.activeShader.bind();
+            this.activeShader.setUniform("uProjectionMatrix", this.renderer.projectionMatrix);
+            this.activeShader.setVertexAttributes(this.gl, this.attributes, this.vertexByteSize);
+        }
+    }
+
+    /**
+     * Flush batched texture operations to the GPU
+     * @param {number} [mode=gl.TRIANGLES] - the GL drawing mode
+     */
+    flush(mode = this.mode) {
+        var vertex = this.vertexBuffer;
+        var vertexCount = vertex.vertexCount;
+
+        if (vertexCount > 0) {
+            var gl = this.gl;
+            var vertexSize = vertex.vertexSize;
+
+            // Copy data into stream buffer
+            if (this.renderer.WebGLVersion > 1) {
+                gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(), gl.STREAM_DRAW, 0, vertexCount * vertexSize);
+            } else {
+                gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(0, vertexCount * vertexSize), gl.STREAM_DRAW);
+            }
+
+            gl.drawArrays(mode, 0, vertexCount);
+
+            // clear the vertex buffer
+            vertex.clear();
+        }
+    }
+
+    /**
+     * Clear the frame buffer
+     * @param {number} [alpha = 0.0] - the alpha value used when clearing the framebuffer
+     */
+    clear(alpha = 0) {
+        var gl = this.gl;
+        gl.clearColor(0, 0, 0, alpha);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+    }
+
+    /**
+     * Specify the color values used when clearing color buffers. The values are clamped between 0 and 1.
+     * @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
+     * @param {number} [a = 0] - the alpha color value used when the color buffers are cleared
+     */
+    clearColor(r = 0, g = 0, b = 0, a = 0) {
+        var gl = this.gl;
+        gl.clearColor(r, g, b, a);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+}