melonjs 17.4.0 → 18.0.0

package/src/renderable/text/bitmaptext.js

@@ -1,418 +0,0 @@
-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
- */
-export default 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 = 0; //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 = 0; //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;
-
-                default :
-                    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;
-
-                default :
-                    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();
-    }
-
-}

package/src/renderable/text/bitmaptextdata.js

@@ -1,186 +0,0 @@
-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
- */
-export default 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;
-    }
-}

package/src/renderable/text/glyph.js

@@ -1,57 +0,0 @@
-
-// bitmap constants
-const LOG2_PAGE_SIZE = 9;
-const PAGE_SIZE = 1 << LOG2_PAGE_SIZE;
-
-/**
- * a glyph representing a single character in a font
- * @ignore
- */
-export default 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;
-    }
-}