melonjs 15.3.0 → 15.4.1

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

@@ -0,0 +1,421 @@
+/*!
+ * melonJS Game Engine - v15.4.1
+ * 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 pool from '../../system/pooling.js';
+import { getImage, getBinary } from '../../loader/loader.js';
+import Renderable from '../renderable.js';
+import TextMetrics from './textmetrics.js';
+
+/**
+ * @classdesc
+ * a bitmap font object
+ * @augments Renderable
+ */
+class BitmapText 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|Image} settings.font - a font name to identify the corresponing source image
+     * @param {string} [settings.fontData=settings.font] - the bitmap font data corresponding name, or the bitmap font data itself
+     * @param {number} [settings.size] - size a scaling ratio
+     * @param {Color|string} [settings.fillStyle] - a CSS color value used to tint the bitmapText (@see BitmapText.tint)
+     * @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 {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
+     * // Use me.loader.preload or me.loader.load to load assets
+     * me.loader.preload([
+     *     { name: "arial", type: "binary" src: "data/font/arial.fnt" },
+     *     { name: "arial", type: "image" src: "data/font/arial.png" },
+     * ])
+     * // Then create an instance of your bitmap font:
+     * let myFont = new me.BitmapText(x, y, {font:"arial", text:"Hello"});
+     * // two possibilities for using "myFont"
+     * // either call the draw function from your Renderable draw function
+     * myFont.draw(renderer, "Hello!", 0, 0);
+     * // or just add it to the word container
+     * me.game.world.addChild(myFont);
+     */
+    constructor(x, y, settings) {
+        // call the parent constructor
+        super(x, y, settings.width || 0, settings.height || 0);
+
+        /**
+         * Set the default text alignment (or justification),<br>
+         * possible values are "left", "right", and "center".
+         * @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 = [];
+
+        /**
+         * scaled font size
+         * @private
+         */
+        this.fontScale = pool.pull("Vector2d", 1.0, 1.0);
+
+        /**
+         * font image
+         * @private
+         */
+        this.fontImage = (typeof settings.font === "object") ? settings.font : getImage(settings.font);
+
+        if (typeof settings.fontData !== "string") {
+            /**
+             * font data
+             * @private
+             */
+            // use settings.font to retreive the data from the loader
+            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 : getBinary(settings.fontData)
+            );
+        }
+
+        // if floating was specified through settings
+        if (typeof settings.floating !== "undefined") {
+            this.floating = !!settings.floating;
+        }
+
+        // apply given fillstyle
+        if (typeof settings.fillStyle !== "undefined") {
+            this.fillStyle = settings.fillStyle;
+        }
+
+        // update anchorPoint if provided
+        if (typeof settings.anchorPoint !== "undefined") {
+            this.anchorPoint.set(settings.anchorPoint.x, settings.anchorPoint.y);
+        } else {
+            this.anchorPoint.set(0, 0);
+        }
+
+        // instance to text metrics functions
+        this.metrics = new TextMetrics(this);
+
+        // resize if necessary
+        if (typeof settings.size === "number" && settings.size !== 1.0) {
+            this.resize(settings.size);
+        }
+
+        // set the text
+        this.setText(settings.text);
+    }
+
+    /**
+     * change the font settings
+     * @param {string} textAlign - ("left", "center", "right")
+     * @param {number} [scale]
+     * @returns {BitmapText} this object for chaining
+     */
+    set(textAlign, scale) {
+        this.textAlign = textAlign;
+        // updated scaled Size
+        if (scale) {
+            this.resize(scale);
+        }
+        this.isDirty = true;
+
+        return this;
+    }
+
+    /**
+     * change the text to be displayed
+     * @param {number|string|string[]} value - a string, or an array of strings
+     * @returns {BitmapText} this object for chaining
+     */
+    setText(value = "") {
+        if (this._text.toString() !== value.toString()) {
+            if (!Array.isArray(value)) {
+                this._text = ("" + value).split("\n");
+            } else {
+                this._text = value;
+            }
+            this.isDirty = true;
+        }
+
+        if (this._text.length > 0 && this.wordWrapWidth > 0) {
+            this._text = this.metrics.wordWrap(this._text, this.wordWrapWidth);
+        }
+
+        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) {
+        let bounds = this.getBounds();
+
+        bounds.clear();
+
+        if (typeof this.metrics !== "undefined") {
+            let 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.getAbsolutePosition === "function" && this.floating !== true) {
+                bounds.translate(this.ancestor.getAbsolutePosition());
+            }
+        }
+
+        return bounds;
+    }
+
+    /**
+     * defines the color used to tint the bitmap text
+     * @public
+     * @type {Color}
+     * @see Renderable#tint
+     */
+    get fillStyle() {
+        return this.tint;
+    }
+    set fillStyle(value) {
+        if (value instanceof Color) {
+            this.tint.copy(value);
+        } else {
+            // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+            this.tint.parseCSS(value);
+        }
+    }
+
+    /**
+     * change the font display size
+     * @param {number} scale - ratio
+     * @returns {BitmapText} this object for chaining
+     */
+    resize(scale) {
+        this.fontScale.set(scale, scale);
+
+        this.updateBounds();
+
+        this.isDirty = true;
+
+        return this;
+    }
+
+    /**
+     * measure the given text size in pixels
+     * @param {string} [text]
+     * @returns {TextMetrics} a TextMetrics object with two properties: `width` and `height`, defining the output dimensions
+     */
+    measureText(text = this._text) {
+        return this.metrics.measureText(text);
+    }
+
+    /**
+     * draw the bitmap font
+     * @param {CanvasRenderer|WebGLRenderer} renderer - Reference to the destination renderer instance
+     * @param {string} [text]
+     * @param {number} [x]
+     * @param {number} [y]
+     */
+    draw(renderer, text, x, y) {
+        // save the previous global alpha value
+        let _alpha = renderer.globalAlpha();
+
+        // allows to provide backward compatibility when
+        // adding Bitmap Font to an object container
+        if (typeof this.ancestor === "undefined") {
+            // update cache
+            this.setText(text);
+            renderer.setGlobalAlpha(_alpha * this.getOpacity());
+        } else {
+            // added directly to an object container
+            x = this.pos.x;
+            y = this.pos.y;
+        }
+
+        let lX = x;
+        let stringHeight = this.metrics.lineHeight();
+        let maxWidth = 0;
+
+        for (let i = 0; i < this._text.length; i++) {
+            x = lX;
+            const string = this._text[i].trimEnd();
+            // adjust x pos based on alignment value
+            let stringWidth = this.metrics.lineWidth(string);
+            switch (this.textAlign) {
+                case "right":
+                    x -= stringWidth;
+                    break;
+
+                case "center":
+                    x -= stringWidth * 0.5;
+                    break;
+            }
+
+            // adjust y pos based on alignment value
+            switch (this.textBaseline) {
+                case "middle":
+                    y -= stringHeight * 0.5;
+                    break;
+
+                case "ideographic":
+                case "alphabetic":
+                case "bottom":
+                    y -= stringHeight;
+                    break;
+            }
+
+            // update initial position if required
+            if (this.isDirty === true && typeof this.ancestor === "undefined") {
+                if (i === 0) {
+                    this.pos.y = y;
+                }
+                if (maxWidth < stringWidth) {
+                    maxWidth = stringWidth;
+                    this.pos.x = x;
+                }
+            }
+
+            // draw the string
+            let lastGlyph = null;
+            for (let c = 0, len = string.length; c < len; c++) {
+                // calculate the char index
+                let ch = string.charCodeAt(c);
+                let glyph = this.fontData.glyphs[ch];
+
+                if (typeof glyph !== "undefined") {
+                    let glyphWidth = glyph.width;
+                    let glyphHeight = glyph.height;
+                    let kerning = (lastGlyph && lastGlyph.kerning) ? lastGlyph.getKerning(ch) : 0;
+                    let scaleX = this.fontScale.x;
+                    let scaleY = this.fontScale.y;
+
+                    // draw it
+                    if (glyphWidth !== 0 && glyphHeight !== 0) {
+                        // some browser throw an exception when drawing a 0 width or height image
+                        renderer.drawImage(this.fontImage,
+                            glyph.x, glyph.y,
+                            glyphWidth, glyphHeight,
+                            x + glyph.xoffset * scaleX,
+                            y + glyph.yoffset * scaleY,
+                            glyphWidth * scaleX, glyphHeight * scaleY
+                        );
+                    }
+
+                    // increment position
+                    x += (glyph.xadvance + kerning) * scaleX;
+                    lastGlyph = glyph;
+                } else {
+                    console.warn("BitmapText: no defined Glyph in for " + String.fromCharCode(ch));
+                }
+            }
+            // increment line
+            y += stringHeight;
+        }
+
+        if (typeof this.ancestor === "undefined") {
+            // restore the previous global alpha value
+            renderer.setGlobalAlpha(_alpha);
+        }
+
+        // clear the dirty flag here for
+        // backward compatibility
+        this.isDirty = false;
+    }
+
+    /**
+     * Destroy function
+     * @ignore
+     */
+    destroy() {
+        pool.push(this.fontScale);
+        this.fontScale = undefined;
+        pool.push(this.fontData);
+        this.fontData = undefined;
+        this._text.length = 0;
+        this.metrics = undefined;
+        super.destroy();
+    }
+
+}
+
+export { BitmapText as default };

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

@@ -0,0 +1,195 @@
+/*!
+ * melonJS Game Engine - v15.4.1
+ * 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 Glyph from './glyph.js';
+
+// bitmap constants
+const capChars = ["M", "N", "B", "D", "C", "E", "F", "K", "A", "G", "H", "I", "J", "L", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
+
+/**
+ * Gets the value from a string of pairs.
+ * @ignore
+ */
+function getValueFromPair(string, pattern) {
+    let value = string.match(pattern);
+    if (!value) {
+        throw new Error("Could not find pattern " + pattern + " in string: " + string);
+    }
+
+    return value[0].split("=")[1];
+}
+
+/**
+ * Gets the first glyph in the map that is not a space character
+ * @ignore
+ * @name _getFirstGlyph
+ * @memberof BitmapTextData
+ * @param {object} glyphs - the map of glyphs, each key is a char code
+ * @returns {Glyph}
+ */
+function getFirstGlyph(glyphs) {
+    let keys = Object.keys(glyphs);
+    for (let i = 0; i < keys.length; i++) {
+        if (keys[i] > 32) {
+            return glyphs[keys[i]];
+        }
+    }
+    return null;
+}
+
+/**
+ * Creates a glyph to use for the space character
+ * @ignore
+ * @name createSpaceGlyph
+ * @memberof BitmapTextData
+ * @param {object} glyphs - the map of glyphs, each key is a char code
+ */
+function createSpaceGlyph(glyphs) {
+    let spaceCharCode = " ".charCodeAt(0);
+    let glyph = glyphs[spaceCharCode];
+    if (!glyph) {
+        glyph = new Glyph();
+        glyph.id = spaceCharCode;
+        glyph.xadvance = getFirstGlyph(glyphs).xadvance;
+        glyphs[spaceCharCode] = glyph;
+    }
+}
+
+/**
+ * Class for storing relevant data from the font file.
+ * @ignore
+ */
+class BitmapTextData {
+
+    /**
+    * @param {string} data - The bitmap font data pulled from the resource loader using me.loader.getBinary()
+    */
+    constructor(data) {
+        this.onResetEvent(data);
+    }
+
+    /**
+     * @ignore
+     */
+    onResetEvent(data) {
+        this.padTop = 0;
+        this.padRight = 0;
+        this.padBottom = 0;
+        this.padLeft = 0;
+        this.lineHeight = 0;
+        // The distance from the top of most uppercase characters to the baseline. Since the drawing position is the cap height of
+        // the first line, the cap height can be used to get the location of the baseline.
+        this.capHeight = 1;
+        // The distance from the bottom of the glyph that extends the lowest to the baseline. This number is negative.
+        this.descent = 0;
+
+        /**
+         * The map of glyphs, each key is a char code.
+         * @name glyphs
+         * @type {object}
+         * @memberof BitmapTextData
+         */
+        this.glyphs = {};
+
+        // parse the data
+        this.parse(data);
+    }
+
+    /**
+     * This parses the font data text and builds a map of glyphs containing the data for each character
+     * @name parse
+     * @memberof BitmapTextData
+     * @param {string} fontData
+     */
+    parse(fontData) {
+        if (!fontData) {
+            throw new Error("File containing font data was empty, cannot load the bitmap font.");
+        }
+        let lines = fontData.split(/\r\n|\n/);
+        let padding = fontData.match(/padding\=\d+,\d+,\d+,\d+/g);
+        if (!padding) {
+            throw new Error("Padding not found in first line");
+        }
+        let paddingValues = padding[0].split("=")[1].split(",");
+        this.padTop = parseFloat(paddingValues[0]);
+        this.padLeft = parseFloat(paddingValues[1]);
+        this.padBottom = parseFloat(paddingValues[2]);
+        this.padRight = parseFloat(paddingValues[3]);
+
+        this.lineHeight = parseFloat(getValueFromPair(lines[1], /lineHeight\=\d+/g));
+
+        let baseLine = parseFloat(getValueFromPair(lines[1], /base\=\d+/g));
+        let padY = this.padTop + this.padBottom;
+        let glyph = null;
+
+
+        for (let i = 4; i < lines.length; i++) {
+            let line = lines[i];
+            let characterValues = line.split(/=|\s+/);
+            if (!line || /^kernings/.test(line)) {
+                continue;
+            }
+            if (/^kerning\s/.test(line)) {
+                let first = parseFloat(characterValues[2]);
+                let second = parseFloat(characterValues[4]);
+                let amount = parseFloat(characterValues[6]);
+
+                glyph = this.glyphs[first];
+                if (glyph !== null && typeof glyph !== "undefined") {
+                    glyph.setKerning(second, amount);
+                }
+            } else {
+                glyph = new Glyph();
+
+                let ch = parseFloat(characterValues[2]);
+                glyph.id = ch;
+                glyph.x = parseFloat(characterValues[4]);
+                glyph.y = parseFloat(characterValues[6]);
+                glyph.width = parseFloat(characterValues[8]);
+                glyph.height = parseFloat(characterValues[10]);
+                glyph.xoffset = parseFloat(characterValues[12]);
+                glyph.yoffset = parseFloat(characterValues[14]);
+                glyph.xadvance = parseFloat(characterValues[16]);
+
+                if (glyph.width > 0 && glyph.height > 0) {
+                    this.descent = Math.min(baseLine + glyph.yoffset, this.descent);
+                }
+
+                this.glyphs[ch] = glyph;
+            }
+        }
+
+        this.descent += this.padBottom;
+
+        createSpaceGlyph(this.glyphs);
+
+        let capGlyph = null;
+        for (let i = 0; i < capChars.length; i++) {
+            let capChar = capChars[i];
+            capGlyph = this.glyphs[capChar.charCodeAt(0)];
+            if (capGlyph) {
+                break;
+            }
+        }
+        if (!capGlyph) {
+            for (let charCode in this.glyphs) {
+                if (this.glyphs.hasOwnProperty(charCode)) {
+                    glyph = this.glyphs[charCode];
+                    if (glyph.height === 0 || glyph.width === 0) {
+                        continue;
+                    }
+                    this.capHeight = Math.max(this.capHeight, glyph.height);
+                }
+            }
+        } else {
+            this.capHeight = capGlyph.height;
+        }
+        this.capHeight -= padY;
+    }
+}
+
+export { BitmapTextData as default };

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

@@ -0,0 +1,65 @@
+/*!
+ * melonJS Game Engine - v15.4.1
+ * 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)
+ */
+// bitmap constants
+const LOG2_PAGE_SIZE = 9;
+const PAGE_SIZE = 1 << LOG2_PAGE_SIZE;
+
+/**
+ * a glyph representing a single character in a font
+ * @ignore
+ */
+class Glyph {
+    /**
+     * @ignore
+     */
+    constructor() {
+        this.id = 0;
+        this.x = 0;
+        this.y = 0;
+        this.width = 0;
+        this.height = 0;
+        this.u = 0;
+        this.v = 0;
+        this.u2 = 0;
+        this.v2 = 0;
+        this.xoffset = 0;
+        this.yoffset = 0;
+        this.xadvance = 0;
+        this.fixedWidth = false;
+    }
+
+    /**
+     * @ignore
+     */
+    getKerning(ch) {
+        if (this.kerning) {
+            let page = this.kerning[ch >>> LOG2_PAGE_SIZE];
+            if (page) {
+                return page[ch & PAGE_SIZE - 1] || 0;
+            }
+        }
+        return 0;
+    }
+
+    /**
+     * @ignore
+     */
+    setKerning(ch, value) {
+        if (!this.kerning) {
+            this.kerning = {};
+        }
+        let page = this.kerning[ch >>> LOG2_PAGE_SIZE];
+        if (typeof page === "undefined") {
+            this.kerning[ch >>> LOG2_PAGE_SIZE] = {};
+            page = this.kerning[ch >>> LOG2_PAGE_SIZE];
+        }
+        page[ch & PAGE_SIZE - 1] = value;
+    }
+}
+
+export { Glyph as default };