melonjs 14.0.2 → 14.1.0

package/dist/melonjs.mjs/text/text.js

@@ -0,0 +1,453 @@
+/*!
+ * melonJS Game Engine - v14.1.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import Color from '../math/color.js';
+import WebGLRenderer from '../video/webgl/webgl_renderer.js';
+import { renderer } from '../video/video.js';
+import 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
+* http://www.asciitable.com/
+* [ !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz]
+*
+* -> first char " " 32d (0x20);
+*/
+
+
+const runits = ["ex", "em", "pt", "px"];
+const toPX = [12, 24, 0.75, 1];
+
+// return a valid 2d context for Text rendering/styling
+var getContext2d = function (renderer$1, text) {
+    if (text.offScreenCanvas === true) {
+        return text.canvasTexture.context;
+    } else {
+        if (typeof renderer$1 === "undefined") {
+            renderer$1 = renderer;
+        }
+        return renderer$1.getFontContext();
+    }
+};
+
+/**
+ * @classdesc
+ * a generic system font object.
+ * @augments Renderable
+ */
+class Text extends Renderable {
+    /**
+     * @param {number} x - position of the text object
+     * @param {number} y - position of the text object
+     * @param {object} settings - the text configuration
+     * @param {string} settings.font - a CSS family font name
+     * @param {number|string} settings.size - size, or size + suffix (px, em, pt)
+     * @param {Color|string} [settings.fillStyle="#000000"] - a CSS color value
+     * @param {Color|string} [settings.strokeStyle="#000000"] - a CSS color value
+     * @param {number} [settings.lineWidth=1] - line width, in pixels, when drawing stroke
+     * @param {string} [settings.textAlign="left"] - horizontal text alignment
+     * @param {string} [settings.textBaseline="top"] - the text baseline
+     * @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});
+     */
+    constructor(x, y, settings) {
+        // call the parent constructor
+        super(x, y, settings.width || 0, settings.height || 0);
+        this.onResetEvent(x, y, settings);
+    }
+
+    /** @ignore */
+    onResetEvent(x, y, settings) {
+
+        /**
+         * defines the color used to draw the font.<br>
+         * @public
+         * @member {Color}
+         * @name Text#fillStyle
+         * @default black
+         */
+        if (typeof settings.fillStyle !== "undefined") {
+            if (settings.fillStyle instanceof Color) {
+                this.fillStyle = settings.fillStyle;
+            } else {
+                // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+                this.fillStyle = pool.pull("Color").parseCSS(settings.fillStyle);
+            }
+        } else {
+            this.fillStyle = pool.pull("Color", 0, 0, 0);
+        }
+
+        /**
+         * defines the color used to draw the font stroke.<br>
+         * @public
+         * @member {Color}
+         * @name strokeStyle
+         * @default black
+         */
+         if (typeof settings.strokeStyle !== "undefined") {
+             if (settings.strokeStyle instanceof Color) {
+                 this.strokeStyle = settings.strokeStyle;
+             } else {
+                 // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+                 this.strokeStyle = pool.pull("Color").parseCSS(settings.strokeStyle);
+             }
+         } else {
+             this.strokeStyle = pool.pull("Color", 0, 0, 0);
+         }
+
+        /**
+         * sets the current line width, in pixels, when drawing stroke
+         * @public
+         * @type {number}
+         * @default 1
+         */
+        this.lineWidth = settings.lineWidth || 1;
+
+        /**
+         * Set the default text alignment (or justification),<br>
+         * possible values are "left", "right", and "center".<br>
+         * @public
+         * @type {string}
+         * @default "left"
+         */
+        this.textAlign = settings.textAlign || "left";
+
+        /**
+         * Set the text baseline (e.g. the Y-coordinate for the draw operation), <br>
+         * possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"<br>
+         * @public
+         * @type {string}
+         * @default "top"
+         */
+        this.textBaseline = settings.textBaseline || "top";
+
+        /**
+         * Set the line spacing height (when displaying multi-line strings). <br>
+         * Current font height will be multiplied with this value to set the line height.
+         * @public
+         * @type {number}
+         * @default 1.0
+         */
+        this.lineHeight = settings.lineHeight || 1.0;
+
+        /**
+         * whether to draw the font to a indidividual offscreen canvas texture first <br>
+         * Note: this will improve performances when using WebGL, but will impact
+         * memory consumption as every text element will have its own canvas texture
+         * @public
+         * @type {boolean}
+         * @default false
+         */
+        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
+         */
+        this._text = [];
+
+        /**
+         * the font size (in px)
+         * @public
+         * @type {number}
+         * @default 10
+         */
+        this.fontSize = 10;
+
+        // anchor point
+        if (typeof settings.anchorPoint !== "undefined") {
+            this.anchorPoint.setV(settings.anchorPoint);
+        } else {
+            this.anchorPoint.set(0, 0);
+        }
+
+        // if floating was specified through settings
+        if (typeof settings.floating !== "undefined") {
+            this.floating = !!settings.floating;
+        }
+
+        // font name and type
+        this.setFont(settings.font, settings.size);
+
+        // aditional
+        if (settings.bold === true) {
+            this.bold();
+        }
+        if (settings.italic === true) {
+            this.italic();
+        }
+
+        if (settings.offScreenCanvas === true) {
+            this.offScreenCanvas = true;
+            this.canvasTexture = pool.pull("CanvasTexture", 2, 2, { offscreenCanvas: true });
+        }
+
+        // instance to text metrics functions
+        this.metrics = new TextMetrics(this);
+
+        // set the text
+        this.setText(settings.text);
+    }
+
+    /**
+     * make the font bold
+     * @returns {Text} this object for chaining
+     */
+    bold() {
+        this.font = "bold " + this.font;
+        this.isDirty = true;
+        return this;
+    }
+
+    /**
+     * make the font italic
+     * @returns {Text} this object for chaining
+     */
+    italic() {
+        this.font = "italic " + this.font;
+        this.isDirty = true;
+        return this;
+    }
+
+    /**
+     * set the font family and size
+     * @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
+     * @example
+     * font.setFont("Arial", 20);
+     * font.setFont("Arial", "1.5em");
+     */
+    setFont(font, size = 10) {
+        // font name and type
+        var font_names = font.split(",").map((value) => {
+            value = value.trim();
+            return (
+                !/(^".*"$)|(^'.*'$)/.test(value)
+            ) ? "\"" + value + "\"" : value;
+        });
+
+        // font size
+        if (typeof size === "number") {
+            this.fontSize = size;
+            size += "px";
+        } else /* string */ {
+            // extract the units and convert if necessary
+            var CSSval = size.match(/([-+]?[\d.]*)(.*)/);
+            this.fontSize = parseFloat(CSSval[1]);
+            if (CSSval[2]) {
+                this.fontSize *= toPX[runits.indexOf(CSSval[2])];
+            } else {
+                // no unit define, assume px
+                size += "px";
+            }
+        }
+        this.height = this.fontSize;
+        this.font = size + " " + font_names.join(",");
+
+        this.isDirty = true;
+
+        return this;
+    }
+
+    /**
+     * change the text to be displayed
+     * @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;
+            }
+        }
+
+        // word wrap if necessary
+        if (this._text.length > 0 && this.wordWrapWidth > 0) {
+            this._text = this.metrics.wordWrap(this._text, this.wordWrapWidth, getContext2d(renderer, this));
+        }
+
+        // calculcate the text size and update the bounds accordingly
+        bounds.addBounds(this.metrics.measureText(this._text, getContext2d(renderer, this)), true);
+
+        // update the offScreenCanvas texture if required
+        if (this.offScreenCanvas === true) {
+            var width = Math.ceil(this.metrics.width),
+                height = Math.ceil(this.metrics.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.canvasTexture.canvas));
+                renderer.currentCompositor.unbindTexture2D(null, this.glTextureUnit);
+
+                if (renderer.WebGLVersion === 1) {
+                    // round size to next Pow2
+                    width = nextPowerOfTwo(this.metrics.width);
+                    height = nextPowerOfTwo(this.metrics.height);
+                }
+            }
+
+            // resize the cache canvas if necessary
+            if (this.canvasTexture.width < width || this.canvasTexture.height < height) {
+                this.canvasTexture.resize(width, height);
+            }
+
+            this.canvasTexture.clear();
+            this._drawFont(this.canvasTexture.context, this._text,  this.pos.x - this.metrics.x, this.pos.y - this.metrics.y, false);
+        }
+
+        this.isDirty = true;
+
+        return this;
+    }
+
+    /**
+     * 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
+     */
+    measureText(renderer, text = this._text) {
+        return this.metrics.measureText(text, getContext2d(renderer, this));
+    }
+
+
+    /**
+     * draw a text at the specified coord
+     * @param {CanvasRenderer|WebGLRenderer} renderer - Reference to the destination renderer instance
+     * @param {string} [text]
+     * @param {number} [x]
+     * @param {number} [y]
+     * @param {boolean} [stroke=false] - draw stroke the the text if true
+     */
+    draw(renderer, text, x = this.pos.x, y = this.pos.y, stroke = false) {
+        // "hacky patch" for backward compatibilty
+        if (typeof this.ancestor === "undefined") {
+
+            // update position if changed
+            if (this.pos.x !== x || this.pos.y !== y) {
+                this.pos.x = x;
+                this.pos.y = y;
+                this.isDirty = true;
+            }
+
+            // update text cache
+            this.setText(text);
+
+            x = this.metrics.x;
+            y = this.metrics.y;
+
+            // save the previous context
+            renderer.save();
+
+            // apply the defined alpha value
+            renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
+
+        } else {
+             // 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) {
+            x = ~~x;
+            y = ~~y;
+        }
+
+        // draw the text
+        if (this.offScreenCanvas === true) {
+            renderer.drawImage(this.canvasTexture.canvas, x, y);
+        } else {
+            renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke));
+        }
+
+
+        // for backward compatibilty
+        if (typeof this.ancestor === "undefined") {
+            // restore previous context
+            renderer.restore();
+        }
+    }
+
+    /**
+     * 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
+     * @param {CanvasRenderer|WebGLRenderer} renderer - Reference to the destination renderer instance
+     * @param {string} text
+     * @param {number} x
+     * @param {number} y
+     */
+    drawStroke(renderer, text, x, y) {
+        this.draw(renderer, text, x, y, true);
+    }
+
+    /**
+     * @ignore
+     */
+    _drawFont(context, text, x, y, stroke = false) {
+        setContextStyle(context, this, stroke);
+
+        for (var i = 0; i < text.length; i++) {
+            var string = text[i].trimEnd();
+            // draw the string
+            context[stroke ? "strokeText" : "fillText"](string, x, y);
+            // add leading space
+            y += this.metrics.lineHeight();
+        }
+        return this.metrics;
+    }
+
+    /**
+     * Destroy function
+     * @ignore
+     */
+    destroy() {
+        if (this.offScreenCanvas === true) {
+            if (renderer instanceof WebGLRenderer) {
+                renderer.currentCompositor.deleteTexture2D(renderer.currentCompositor.getTexture2D(this.glTextureUnit));
+                this.glTextureUnit = undefined;
+            }
+            renderer.cache.delete(this.canvasTexture.canvas);
+            pool.push(this.canvasTexture);
+            this.canvasTexture = undefined;
+        }
+        pool.push(this.fillStyle);
+        pool.push(this.strokeStyle);
+        this.fillStyle = this.strokeStyle = undefined;
+        this.metrics = undefined;
+        this._text.length = 0;
+        super.destroy();
+    }
+}
+var Text$1 = Text;
+
+export { Text$1 as default };

package/dist/melonjs.mjs/text/textmetrics.js

@@ -0,0 +1,176 @@
+/*!
+ * melonJS Game Engine - v14.1.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import Bounds from '../physics/bounds.js';
+import Text from './text.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];
+                if (typeof glyph !== "undefined") {
+                    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(strings[i].trimEnd(), 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;
+    }
+}
+var TextMetrics$1 = TextMetrics;
+
+export { TextMetrics$1 as default };

package/dist/melonjs.mjs/text/textstyle.js

@@ -0,0 +1,23 @@
+/*!
+ * melonJS Game Engine - v14.1.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+/**
+ * apply the current text style to the given context
+ * @ignore
+ */
+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;
+}
+
+export { setContextStyle as default };