melonjs 15.2.1 → 15.4.0

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

@@ -0,0 +1,422 @@
+/*!
+ * melonJS Game Engine - v15.4.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
+ */
+import Color from '../../math/color.js';
+import { renderer } from '../../video/video.js';
+import pool from '../../system/pooling.js';
+import Renderable from '../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];
+
+/**
+ * @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=0] - 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 {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
+     * let 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 0
+         */
+        this.lineWidth = settings.lineWidth || 0;
+
+        /**
+         * 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;
+
+        /**
+         * 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();
+        }
+
+        // the canvas Texture used to render this text
+        // XXX: offscreenCanvas is currently disabled for text rendering due to issue in WebGL mode
+        this.canvasTexture = pool.pull("CanvasTexture", 2, 2, { offscreenCanvas: false });
+
+        // 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
+        let 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
+            let 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 = "") {
+        let 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, this.canvasTexture.context);
+        }
+
+        // calculcate the text size and update the bounds accordingly
+        bounds.addBounds(this.metrics.measureText(this._text, this.canvasTexture.context), true);
+
+        // update the offScreenCanvas texture if required
+        let width = Math.ceil(this.metrics.width),
+            height = Math.ceil(this.metrics.height);
+
+        if (typeof renderer.gl !== "undefined") {
+            // make sure the right compositor is active
+            renderer.setCompositor("quad");
+            // 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);
+
+        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, this.canvasTexture.context);
+    }
+
+
+    /**
+     * 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]
+     */
+    draw(renderer, text, x = this.pos.x, y = this.pos.y) {
+        // "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);
+
+            // save the previous context
+            renderer.save();
+
+            // apply the defined alpha value
+            renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
+
+        }
+
+        // adjust x,y position based on the bounding box
+        x = this.metrics.x;
+        y = this.metrics.y;
+
+        // clamp to pixel grid if required
+        if (renderer.settings.subPixel === false) {
+            x = ~~x;
+            y = ~~y;
+        }
+
+        // draw the text
+        renderer.drawImage(this.canvasTexture.canvas, x, y);
+
+        // for backward compatibilty
+        if (typeof this.ancestor === "undefined") {
+            // restore previous context
+            renderer.restore();
+        }
+    }
+
+    /**
+     * draw a stroke text at the specified coord, as defined by the `lineWidth` and `fillStroke` properties.
+     * @deprecated since 15.0.0
+     * @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);
+    }
+
+    /**
+     * @ignore
+     */
+    _drawFont(context, text, x, y) {
+        setContextStyle(context, this);
+
+        for (let i = 0; i < text.length; i++) {
+            const string = text[i].trimEnd();
+            // draw the string
+            if (this.fillStyle.alpha > 0) {
+                context.fillText(string, x, y);
+            }
+            // stroke the text
+            if (this.lineWidth > 0 && this.strokeStyle.alpha > 0) {
+                context.strokeText(string, x, y);
+            }
+            // add leading space
+            y += this.metrics.lineHeight();
+        }
+        return this.metrics;
+    }
+
+    /**
+     * Destroy function
+     * @ignore
+     */
+    destroy() {
+        if (typeof renderer.gl !== "undefined") {
+            // make sure the right compositor is active
+            renderer.setCompositor("quad");
+            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();
+    }
+}
+
+export { Text as default };

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

@@ -0,0 +1,175 @@
+/*!
+ * melonJS Game Engine - v15.4.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2023 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
+            let characters = text.split("");
+            let width = 0;
+            let lastGlyph = null;
+            for (let i = 0; i < characters.length; i++) {
+                let ch = characters[i].charCodeAt(0);
+                let glyph = this.ancestor.fontData.glyphs[ch];
+                if (typeof glyph !== "undefined") {
+                    let 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) {
+        let 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 (let 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) {
+        let words;
+        let currentLine = "";
+        let 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++) {
+            let word = words[i];
+            let 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 { TextMetrics as default };

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

@@ -0,0 +1,21 @@
+/*!
+ * melonJS Game Engine - v15.4.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
+ */
+/**
+ * apply the current text style to the given context
+ * @ignore
+ */
+function setContextStyle(context, style) {
+    context.font = style.font;
+    context.fillStyle = style.fillStyle.toRGBA();
+    context.strokeStyle = style.strokeStyle.toRGBA();
+    context.lineWidth = style.lineWidth;
+    context.textAlign = style.textAlign;
+    context.textBaseline = style.textBaseline;
+}
+
+export { setContextStyle as default };

package/dist/melonjs.mjs/renderable/trigger.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v15.2.1
+ * melonJS Game Engine - v15.4.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -16,7 +16,7 @@ import pool from '../system/pooling.js';
  * trigger an event when colliding with another object
  * @augments Renderable
  */
- class Trigger extends Renderable {
+class Trigger extends Renderable {
     /**
      * @param {number} x - the x coordinates of the trigger area
      * @param {number} y - the y coordinates of the trigger area
@@ -92,14 +92,14 @@ import pool from '../system/pooling.js';
     /**
      * @ignore
      */
-     getTriggerSettings() {
+    getTriggerSettings() {
         let world = this.ancestor.getRootAncestor();
-         // Lookup for the container instance
-         if (typeof(this.triggerSettings.container) === "string") {
-             this.triggerSettings.container = world.getChildByName(this.triggerSettings.container)[0];
-         }
-         return this.triggerSettings;
-     }
+        // Lookup for the container instance
+        if (typeof(this.triggerSettings.container) === "string") {
+            this.triggerSettings.container = world.getChildByName(this.triggerSettings.container)[0];
+        }
+        return this.triggerSettings;
+    }
 
     /**
      * @ignore
@@ -128,7 +128,7 @@ import pool from '../system/pooling.js';
                 if (!this.fading) {
                     this.fading = true;
                     world.app.viewport.fadeIn(this.fade, this.duration,
-                            () => this.onFadeComplete());
+                        () => this.onFadeComplete());
                 }
             } else {
                 level.load(this.gotolevel, triggerSettings);