melonjs 10.5.2 → 10.6.0

package/src/text/text.js

@@ -1,11 +1,12 @@
 import Color from "./../math/color.js";
 import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
-import { renderer, createCanvas } from "./../video/video.js";
-import * as stringUtil from "./../utils/string.js";
-import pool from "./../system/pooling.js";
+import { renderer as globalRenderer, createCanvas } from "./../video/video.js";
+import { trimRight } from "./../utils/string.js";
+import * as pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import { nextPowerOfTwo } from "./../math/math.js";
-
+import setContextStyle from "./textstyle.js";
+import TextMetrics from "./textmetrics.js";
 
 /*
 * ASCII Table
@@ -19,19 +20,13 @@ import { nextPowerOfTwo } from "./../math/math.js";
 var runits = ["ex", "em", "pt", "px"];
 var toPX = [12, 24, 0.75, 1];
 
-/**
- * apply the current font style to the given context
- * @ignore
- */
-var setContextStyle = function(context, font, stroke = false) {
-    context.font = font.font;
-    context.fillStyle = font.fillStyle.toRGBA();
-    if (stroke === true) {
-        context.strokeStyle = font.strokeStyle.toRGBA();
-        context.lineWidth = font.lineWidth;
+// return a valid 2d context for Text rendering/styling
+var getContext2d = function (renderer, text) {
+    if (text.offScreenCanvas === true) {
+        return text.context;
+    } else {
+        return renderer.getFontContext();
     }
-    context.textAlign = font.textAlign;
-    context.textBaseline = font.textBaseline;
 };
 
 /**
@@ -54,6 +49,7 @@ class Text extends Renderable {
      * @param {number} [settings.lineHeight=1.0] line spacing height
      * @param {Vector2d} [settings.anchorPoint={x:0.0, y:0.0}] anchor point to draw the text at
      * @param {boolean} [settings.offScreenCanvas=false] whether to draw the font to an individual "cache" texture first
+     * @param {number} [settings.wordWrapWidth] the maximum length in CSS pixel for a single segment of text
      * @param {(string|string[])} [settings.text=""] a string, or an array of strings
      * @example
      * var font = new me.Text(0, 0, {font: "Arial", size: 8, fillStyle: this.color});
@@ -72,7 +68,6 @@ class Text extends Renderable {
          * @public
          * @type {Color}
          * @default black
-         * @name Text#fillStyle
          */
         if (typeof settings.fillStyle !== "undefined") {
             if (settings.fillStyle instanceof Color) {
@@ -90,7 +85,6 @@ class Text extends Renderable {
          * @public
          * @type {Color}
          * @default black
-         * @name Text#strokeStyle
          */
          if (typeof settings.strokeStyle !== "undefined") {
              if (settings.strokeStyle instanceof Color) {
@@ -108,7 +102,6 @@ class Text extends Renderable {
          * @public
          * @type {number}
          * @default 1
-         * @name Text#lineWidth
          */
         this.lineWidth = settings.lineWidth || 1;
 
@@ -118,7 +111,6 @@ class Text extends Renderable {
          * @public
          * @type {string}
          * @default "left"
-         * @name Text#textAlign
          */
         this.textAlign = settings.textAlign || "left";
 
@@ -128,7 +120,6 @@ class Text extends Renderable {
          * @public
          * @type {string}
          * @default "top"
-         * @name Text#textBaseline
          */
         this.textBaseline = settings.textBaseline || "top";
 
@@ -138,7 +129,6 @@ class Text extends Renderable {
          * @public
          * @type {number}
          * @default 1.0
-         * @name Text#lineHeight
          */
         this.lineHeight = settings.lineHeight || 1.0;
 
@@ -149,10 +139,18 @@ class Text extends Renderable {
          * @public
          * @type {boolean}
          * @default false
-         * @name Text#offScreenCanvas
          */
         this.offScreenCanvas = false;
 
+        /**
+         * the maximum length in CSS pixel for a single segment of text.
+         * (use -1 to disable word wrapping)
+         * @public
+         * @type {number}
+         * @default -1
+         */
+        this.wordWrapWidth = settings.wordWrapWidth || -1;
+
         /**
          * the text to be displayed
          * @private
@@ -163,9 +161,7 @@ class Text extends Renderable {
          * the font size (in px)
          * @public
          * @type {number}
-         * @name fontSize
          * @default 10
-         * @memberof Text
          */
         this.fontSize = 10;
 
@@ -198,19 +194,19 @@ class Text extends Renderable {
             this.context = this.canvas.getContext("2d");
         }
 
+        // instance to text metrics functions
+        this.metrics = new TextMetrics(this);
+
         // set the text
         this.setText(settings.text);
-
-        // force update bounds on object creation
-        this.update(0);
     }
 
     /** @ignore */
     onDeactivateEvent() {
         // free the canvas and potential corresponding texture when deactivated
         if (this.offScreenCanvas === true) {
-            renderer.currentCompositor.deleteTexture2D(renderer.currentCompositor.getTexture2D(this.glTextureUnit));
-            renderer.cache.delete(this.canvas);
+            globalRenderer.currentCompositor.deleteTexture2D(globalRenderer.currentCompositor.getTexture2D(this.glTextureUnit));
+            globalRenderer.cache.delete(this.canvas);
             this.canvas.width = this.canvas.height = 0;
             this.context = undefined;
             this.canvas = undefined;
@@ -220,9 +216,6 @@ class Text extends Renderable {
 
     /**
      * make the font bold
-     * @name bold
-     * @memberof Text.prototype
-     * @function
      * @returns {Text} this object for chaining
      */
     bold() {
@@ -233,9 +226,6 @@ class Text extends Renderable {
 
     /**
      * make the font italic
-     * @name italic
-     * @memberof Text.prototype
-     * @function
      * @returns {Text} this object for chaining
      */
     italic() {
@@ -246,9 +236,6 @@ class Text extends Renderable {
 
     /**
      * set the font family and size
-     * @name setFont
-     * @memberof Text.prototype
-     * @function
      * @param {string} font a CSS font name
      * @param {number|string} [size=10] size in px, or size + suffix (px, em, pt)
      * @returns {Text} this object for chaining
@@ -256,7 +243,7 @@ class Text extends Renderable {
      * font.setFont("Arial", 20);
      * font.setFont("Arial", "1.5em");
      */
-    setFont(font, size) {
+    setFont(font, size = 10) {
         // font name and type
         var font_names = font.split(",").map(function (value) {
             value = value.trim();
@@ -290,119 +277,75 @@ class Text extends Renderable {
 
     /**
      * change the text to be displayed
-     * @name setText
-     * @memberof Text.prototype
-     * @function
      * @param {number|string|string[]} value a string, or an array of strings
      * @returns {Text} this object for chaining
      */
     setText(value = "") {
+        var bounds = this.getBounds();
+
+        // set the next text
         if (this._text.toString() !== value.toString()) {
             if (!Array.isArray(value)) {
                 this._text = ("" + value).split("\n");
             } else {
                 this._text = value;
             }
-            this.isDirty = true;
         }
 
-        return this;
-    }
+        // word wrap if necessary
+        if (this._text.length > 0 && this.wordWrapWidth > 0) {
+            this._text = this.metrics.wordWrap(this._text, this.wordWrapWidth, getContext2d(globalRenderer, this));
+        }
 
-    /**
-     * measure the given text size in pixels
-     * @name measureText
-     * @memberof Text.prototype
-     * @function
-     * @param {CanvasRenderer|WebGLRenderer} [renderer] reference to the active renderer
-     * @param {string} [text] the text to be measured
-     * @param {Rect|Bounds} [ret] a object in which to store the text metrics
-     * @returns {TextMetrics} a TextMetrics object with two properties: `width` and `height`, defining the output dimensions
-     */
-    measureText(renderer, text, ret) {
-        var context;
-        var textMetrics = ret || this.getBounds();
-        var lineHeight = this.fontSize * this.lineHeight;
-        var strings = typeof text !== "undefined" ? ("" + (text)).split("\n") : this._text;
+        // calculcate the text size and update the bounds accordingly
+        bounds.addBounds(this.metrics.measureText(this._text, getContext2d(globalRenderer, this)), true);
 
+        // update the offScreenCanvas texture if required
         if (this.offScreenCanvas === true) {
-            context = this.context;
-        } else {
-            context = renderer.getFontContext();
-        }
+            var width = Math.ceil(this.metrics.width),
+                height = Math.ceil(this.metrics.height);
+
+            if (globalRenderer instanceof WebGLRenderer) {
+                // invalidate the previous corresponding texture so that it can reuploaded once changed
+                this.glTextureUnit = globalRenderer.cache.getUnit(globalRenderer.cache.get(this.canvas));
+                globalRenderer.currentCompositor.unbindTexture2D(null, this.glTextureUnit);
+
+                if (globalRenderer.WebGLVersion === 1) {
+                    // round size to next Pow2
+                    width = nextPowerOfTwo(this.metrics.width);
+                    height = nextPowerOfTwo(this.metrics.height);
+                }
+            }
 
-        // save the previous context
-        context.save();
+            // resize the cache canvas if necessary
+            if (this.canvas.width < width || this.canvas.height < height) {
+                this.canvas.width = width;
+                this.canvas.height = height;
+                // resizing the canvas will automatically clear its content
+            } else {
+                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            }
+            this._drawFont(this.context, this._text,  this.pos.x - this.metrics.x, this.pos.y - this.metrics.y, false);
+        }
 
-        // apply the style font
-        setContextStyle(context, this);
+        this.isDirty = true;
 
-        // compute the bounding box size
-        this.height = this.width = 0;
-        for (var i = 0; i < strings.length; i++) {
-            this.width = Math.max(context.measureText(stringUtil.trimRight(""+strings[i])).width, this.width);
-            this.height += lineHeight;
-        }
-        textMetrics.width = Math.ceil(this.width);
-        textMetrics.height = Math.ceil(this.height);
-
-        // compute the bounding box position
-        textMetrics.x = Math.floor((this.textAlign === "right" ? this.pos.x - this.width : (
-            this.textAlign === "center" ? this.pos.x - (this.width / 2) : this.pos.x
-        )));
-        textMetrics.y = Math.floor((this.textBaseline.search(/^(top|hanging)$/) === 0) ? this.pos.y : (
-            this.textBaseline === "middle" ? this.pos.y - (textMetrics.height / 2) : this.pos.y - textMetrics.height
-        ));
-
-        // restore the context
-        context.restore();
-
-        // returns the Font bounds me.Rect by default
-        return textMetrics;
+        return this;
     }
 
     /**
-     * @ignore
+     * measure the given text size in pixels
+     * @param {CanvasRenderer|WebGLRenderer} [renderer] reference to the active renderer
+     * @param {string} [text] the text to be measured
+     * @returns {TextMetrics} a TextMetrics object defining the dimensions of the given piece of text
      */
-    update(/* dt */) {
-        if (this.isDirty === true) {
-            var bounds = this.measureText(renderer);
-            if (this.offScreenCanvas === true) {
-                var width = Math.round(bounds.width),
-                    height = Math.round(bounds.height);
-
-                if (renderer instanceof WebGLRenderer) {
-                    // invalidate the previous corresponding texture so that it can reuploaded once changed
-                    this.glTextureUnit = renderer.cache.getUnit(renderer.cache.get(this.canvas));
-                    renderer.currentCompositor.unbindTexture2D(null, this.glTextureUnit);
-
-                    if (renderer.WebGLVersion === 1) {
-                        // round size to next Pow2
-                        width = nextPowerOfTwo(bounds.width);
-                        height = nextPowerOfTwo(bounds.height);
-                    }
-                }
-
-                // resize the cache canvas if necessary
-                if (this.canvas.width < width || this.canvas.height < height) {
-                    this.canvas.width = width;
-                    this.canvas.height = height;
-                    // resizing the canvas will automatically clear its content
-                } else {
-                    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-                }
-                this._drawFont(this.context, this._text,  this.pos.x - bounds.x, this.pos.y - bounds.y, false);
-
-            }
-        }
-        return this.isDirty;
+    measureText(renderer = globalRenderer, text = this._text) {
+        return this.metrics.measureText(text, getContext2d(renderer, this));
     }
 
+
     /**
      * draw a text at the specified coord
-     * @name draw
-     * @memberof Text.prototype
-     * @function
      * @param {CanvasRenderer|WebGLRenderer} renderer Reference to the destination renderer instance
      * @param {string} [text]
      * @param {number} [x]
@@ -412,8 +355,6 @@ class Text extends Renderable {
     draw(renderer, text, x, y, stroke) {
         // "hacky patch" for backward compatibilty
         if (typeof this.ancestor === "undefined") {
-            // update text cache
-            this.setText(text);
 
             // update position if changed
             if (this.pos.x !== x || this.pos.y !== y) {
@@ -422,8 +363,11 @@ class Text extends Renderable {
                 this.isDirty = true;
             }
 
-            // force update bounds
-            this.update(0);
+            // update text cache
+            this.setText(text);
+
+            x = this.metrics.x;
+            y = this.metrics.y;
 
             // save the previous context
             renderer.save();
@@ -432,20 +376,20 @@ class Text extends Renderable {
             renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
 
         } else {
-            // added directly to an object container
+             // added directly to an object container
             x = this.pos.x;
             y = this.pos.y;
         }
 
+        // clamp to pixel grid if required
         if (renderer.settings.subPixel === false) {
-            // clamp to pixel grid if required
             x = ~~x;
             y = ~~y;
         }
 
         // draw the text
         if (this.offScreenCanvas === true) {
-            renderer.drawImage(this.canvas, this.getBounds().x, this.getBounds().y);
+            renderer.drawImage(this.canvas, x, y);
         } else {
             renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke));
         }
@@ -456,19 +400,12 @@ class Text extends Renderable {
             // restore previous context
             renderer.restore();
         }
-
-        // clear the dirty flag here for
-        // backward compatibility
-        this.isDirty = false;
     }
 
     /**
      * draw a stroke text at the specified coord, as defined <br>
      * by the `lineWidth` and `fillStroke` properties. <br>
      * Note : using drawStroke is not recommended for performance reasons
-     * @name drawStroke
-     * @memberof Text.prototype
-     * @function
      * @param {CanvasRenderer|WebGLRenderer} renderer Reference to the destination renderer instance
      * @param {string} text
      * @param {number} x
@@ -484,15 +421,14 @@ class Text extends Renderable {
     _drawFont(context, text, x, y, stroke = false) {
         setContextStyle(context, this, stroke);
 
-        var lineHeight = this.fontSize * this.lineHeight;
         for (var i = 0; i < text.length; i++) {
-            var string = stringUtil.trimRight(""+text[i]);
+            var string = trimRight(text[i]);
             // draw the string
             context[stroke ? "strokeText" : "fillText"](string, x, y);
             // add leading space
-            y += lineHeight;
+            y += this.metrics.lineHeight();
         }
-        return this.getBounds();
+        return this.metrics;
     }
 
     /**
@@ -503,6 +439,7 @@ class Text extends Renderable {
         pool.push(this.fillStyle);
         pool.push(this.strokeStyle);
         this.fillStyle = this.strokeStyle = undefined;
+        this.metrics = undefined;
         this._text.length = 0;
         super.destroy();
     }

package/src/text/textmetrics.js

@@ -0,0 +1,168 @@
+import Bounds from "./../physics/bounds.js";
+import { trimRight } from "./../utils/string.js";
+import Text from "./text.js";
+//import BitmapText from "./bitmaptext.js";
+import setContextStyle from "./textstyle.js";
+
+
+/**
+ * @classdesc
+ * a Text Metrics object that contains helper for text manipulation
+ * @augments Bounds
+ */
+class TextMetrics extends Bounds {
+
+    /**
+     * @param {Text|BitmapText} ancestor the parent object that contains this TextMetrics object
+     */
+    constructor(ancestor) {
+
+        // parent constructor
+        super();
+
+        /**
+         * a reference to the parent object that contains this TextMetrics object
+         * @public
+         * @type {Renderable}
+         * @default undefined
+         */
+        this.ancestor = ancestor;
+
+        this.setMinMax(0, 0, 0, 0);
+    }
+
+    /**
+     * Returns the height of a segment of inline text in CSS pixels.
+     * @returns {number} the height of a segment of inline text in CSS pixels.
+     */
+    lineHeight() {
+        if (this.ancestor instanceof Text) {
+            return this.ancestor.fontSize * this.ancestor.lineHeight;
+        } else { // it's a BitmapText
+            return this.ancestor.fontData.capHeight * this.ancestor.lineHeight * this.ancestor.fontScale.y;
+        }
+    }
+
+    /**
+     * Returns the width of the given segment of inline text in CSS pixels.
+     * @param {string} text the text to be measured
+     * @param {CanvasRenderingContext2D} [context] reference to an active 2d context for canvas rendering
+     * @returns {number} the width of the given segment of inline text in CSS pixels.
+     */
+    lineWidth(text, context) {
+        if (this.ancestor instanceof Text) {
+            return context.measureText(text).width;
+        } else { // it's a BitmapText
+            var characters = text.split("");
+            var width = 0;
+            var lastGlyph = null;
+            for (var i = 0; i < characters.length; i++) {
+                var ch = characters[i].charCodeAt(0);
+                var glyph = this.ancestor.fontData.glyphs[ch];
+                var kerning = (lastGlyph && lastGlyph.kerning) ? lastGlyph.getKerning(ch) : 0;
+                width += (glyph.xadvance + kerning) * this.ancestor.fontScale.x;
+                lastGlyph = glyph;
+            }
+            return width;
+        }
+    }
+
+    /**
+     * measure the given text size in CSS pixels
+     * @param {string} text the text to be measured
+     * @param {CanvasRenderingContext2D} [context] reference to an active 2d context for canvas rendering
+     * @returns {TextMetrics} this
+     */
+    measureText(text, context) {
+        var strings;
+
+        if (!Array.isArray(text)) {
+            strings = ("" + text).split("\n");
+        } else {
+            strings = text;
+        }
+
+        if (typeof context !== "undefined") {
+            // save the previous context
+            context.save();
+
+            // apply the style font
+            setContextStyle(context, this.ancestor);
+        }
+
+        // compute the bounding box size
+        this.width = this.height = 0;
+
+        for (var i = 0; i < strings.length; i++) {
+            this.width = Math.max(this.lineWidth(trimRight(strings[i]), context), this.width);
+            this.height += this.lineHeight();
+        }
+        this.width = Math.ceil(this.width);
+        this.height = Math.ceil(this.height);
+
+        // compute the bounding box position
+        this.x = Math.floor((this.ancestor.textAlign === "right" ? this.ancestor.pos.x - this.width : (
+            this.ancestor.textAlign === "center" ? this.ancestor.pos.x - (this.width / 2) : this.ancestor.pos.x
+        )));
+        this.y = Math.floor((this.ancestor.textBaseline.search(/^(top|hanging)$/) === 0) ? this.ancestor.pos.y : (
+            this.ancestor.textBaseline === "middle" ? this.ancestor.pos.y - (this.lineHeight() / 2) : this.ancestor.pos.y - this.lineHeight()
+        ));
+
+        if (typeof context !== "undefined") {
+            // restore the context
+            context.restore();
+        }
+
+        return this;
+    }
+
+    /**
+     * wrap the given text based on the given width
+     * @param {string|string[]} text the text to be wrapped
+     * @param {number} width maximum width of one segment of text in css pixel
+     * @param {CanvasRenderingContext2D} [context] reference to an active 2d context for canvas rendering
+     * @returns {string[]} an array of string representing wrapped text
+     */
+    wordWrap(text, width, context) {
+        var words;
+        var currentLine = "";
+        var output = [];
+
+        if (Array.isArray(text)) {
+            // join into a single string
+            text = text.join(" ");
+        }
+        // word splitting to be improved as it replaces \n by space if present
+        words = text.replace(/[\r\n]+/g, " ").split(" ");
+
+        if (typeof context !== "undefined") {
+            // save the previous context
+            context.save();
+
+            // apply the style font
+            setContextStyle(context, this.ancestor);
+        }
+
+        for (let i = 0; i < words.length; i++) {
+            var word = words[i];
+            var lineWidth = this.lineWidth(currentLine + word + " ", context);
+            if (lineWidth < width) {
+                // add the word to the current line
+                currentLine += word + " ";
+            } else {
+                output.push(currentLine + "\n");
+                currentLine = word + " ";
+            }
+        }
+        // last line
+        output.push(currentLine);
+
+        if (typeof context !== "undefined") {
+            // restore the context
+            context.restore();
+        }
+
+        return output;
+    }
+}
+export default TextMetrics;

package/src/text/textstyle.js

@@ -0,0 +1,14 @@
+/**
+ * apply the current text style to the given context
+ * @ignore
+ */
+export default function setContextStyle(context, style, stroke = false) {
+    context.font = style.font;
+    context.fillStyle = style.fillStyle.toRGBA();
+    if (stroke === true) {
+        context.strokeStyle = style.strokeStyle.toRGBA();
+        context.lineWidth = style.lineWidth;
+    }
+    context.textAlign = style.textAlign;
+    context.textBaseline = style.textBaseline;
+};

package/src/video/canvas/canvas_renderer.js

@@ -54,8 +54,6 @@ class CanvasRenderer extends Renderer {
             // enable the tile texture seam fix with the canvas renderer
             this.uvOffset = 1;
         }
-
-        return this;
     }
 
     /**
@@ -80,17 +78,35 @@ class CanvasRenderer extends Renderer {
     }
 
     /**
-     * Set a blend mode for the given context
+     * set a blend mode for the given context. <br>
+     * Supported blend mode between Canvas and WebGL remderer : <br>
+     * - "normal" : this is the default mode and draws new content on top of the existing content <br>
+     * <img src="images/normal-blendmode.png" width="510"/> <br>
+     * - "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result. <br>
+     * <img src="images/multiply-blendmode.png" width="510"/> <br>
+     * - "lighter" : where both content overlap the color is determined by adding color values. <br>
+     * <img src="images/lighter-blendmode.png" width="510"/> <br>
+     * - "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) <br>
+     * <img src="images/screen-blendmode.png" width="510"/> <br>
      * @name setBlendMode
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
      * @memberof CanvasRenderer.prototype
      * @function
-     * @param {string} [mode="normal"] blend mode : "normal", "multiply"
+     * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter, "screen"
      * @param {CanvasRenderingContext2D} [context]
      */
-    setBlendMode(mode, context) {
+    setBlendMode(mode = "normal", context) {
         context = context || this.getContext();
         this.currentBlendMode = mode;
         switch (mode) {
+            case "screen" :
+                context.globalCompositeOperation = "screen";
+                break;
+
+            case "lighter" :
+                context.globalCompositeOperation = "lighter";
+                break;
+
             case "multiply" :
                 context.globalCompositeOperation = "multiply";
                 break;

package/src/video/renderer.js

@@ -57,7 +57,7 @@ class Renderer {
         /**
          * @ignore
          */
-        this.currentBlendMode = "normal";
+        this.currentBlendMode = "none";
 
         // create the main screen canvas
         if (device.ejecta === true) {
@@ -92,8 +92,6 @@ class Renderer {
         event.on(event.GAME_RESET, () => {
             renderer.reset();
         });
-
-        return this;
     }
 
     /**