#

API Docs for: 2.0.0
Show: Inherited Protected Private Deprecated

# File: src/pixi/text/BitmapText.js

    /**
     * @author Mat Groves http://matgroves.com/ @Doormat23
     */

    /**
     * A BitmapText object will create a line or multiple lines of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' in your string.
     * You can generate the fnt files using
     * http://www.angelcode.com/products/bmfont/ for windows or
     * http://www.bmglyph.com/ for mac.
     *
     * @class BitmapText
     * @extends DisplayObjectContainer
     * @constructor
     * @param text {String} The copy that you would like the text to display
     * @param style {Object} The style parameters
     * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
     * @param [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
     */
    PIXI.BitmapText = function(text, style)
    {
        PIXI.DisplayObjectContainer.call(this);

        /**
         * [read-only] The width of the overall text, different from fontSize,
         * which is defined in the style object
         *
         * @property textWidth
         * @type Number
         * @readOnly
         */
        this.textWidth = 0;

        /**
         * [read-only] The height of the overall text, different from fontSize,
         * which is defined in the style object
         *
         * @property textHeight
         * @type Number
         * @readOnly
         */
        this.textHeight = 0;

        /**
         * @property _pool
         * @type Array
         * @private
         */
        this._pool = [];

        this.setText(text);
        this.setStyle(style);
        this.updateText();

        /**
         * The dirty state of this object.
         * @property dirty
         * @type Boolean
         */
        this.dirty = false;
    };

    // constructor
    PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
    PIXI.BitmapText.prototype.constructor = PIXI.BitmapText;

    /**
     * Set the text string to be rendered.
     *
     * @method setText
     * @param text {String} The text that you would like displayed
     */
    PIXI.BitmapText.prototype.setText = function(text)
    {
        this.text = text || ' ';
        this.dirty = true;
    };

    /**
     * Set the style of the text
     * style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
     * [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single lines of text
     *
     * @method setStyle
     * @param style {Object} The style parameters, contained as properties of an object
     */
    PIXI.BitmapText.prototype.setStyle = function(style)
    {
        style = style || {};
        style.align = style.align || 'left';
        this.style = style;

        var font = style.font.split(' ');
        this.fontName = font[font.length - 1];
        this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;

        this.dirty = true;
        this.tint = style.tint;
    };

    /**
     * Renders text and updates it when needed
     *
     * @method updateText
     * @private
     */
    PIXI.BitmapText.prototype.updateText = function()
    {
        var data = PIXI.BitmapText.fonts[this.fontName];
        var pos = new PIXI.Point();
        var prevCharCode = null;
        var chars = [];
        var maxLineWidth = 0;
        var lineWidths = [];
        var line = 0;
        var scale = this.fontSize / data.size;

        for(var i = 0; i < this.text.length; i++)
        {
            var charCode = this.text.charCodeAt(i);

            if(/(?:\r\n|\r|\n)/.test(this.text.charAt(i)))
            {
                lineWidths.push(pos.x);
                maxLineWidth = Math.max(maxLineWidth, pos.x);
                line++;

                pos.x = 0;
                pos.y += data.lineHeight;
                prevCharCode = null;
                continue;
            }

            var charData = data.chars[charCode];

            if(!charData) continue;

            if(prevCharCode && charData.kerning[prevCharCode])
            {
                pos.x += charData.kerning[prevCharCode];
            }

            chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
            pos.x += charData.xAdvance;

            prevCharCode = charCode;
        }

        lineWidths.push(pos.x);
        maxLineWidth = Math.max(maxLineWidth, pos.x);

        var lineAlignOffsets = [];

        for(i = 0; i <= line; i++)
        {
            var alignOffset = 0;
            if(this.style.align === 'right')
            {
                alignOffset = maxLineWidth - lineWidths[i];
            }
            else if(this.style.align === 'center')
            {
                alignOffset = (maxLineWidth - lineWidths[i]) / 2;
            }
            lineAlignOffsets.push(alignOffset);
        }

        var lenChildren = this.children.length;
        var lenChars = chars.length;
        var tint = this.tint || 0xFFFFFF;

        for(i = 0; i < lenChars; i++)
        {
            var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool.

            if (c) c.setTexture(chars[i].texture); // check if got one before.
            else c = new PIXI.Sprite(chars[i].texture); // if no create new one.

            c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
            c.position.y = chars[i].position.y * scale;
            c.scale.x = c.scale.y = scale;
            c.tint = tint;
            if (!c.parent) this.addChild(c);
        }

        // remove unnecessary children.
        // and put their into the pool.
        while(this.children.length > lenChars)
        {
            var child = this.getChildAt(this.children.length - 1);
            this._pool.push(child);
            this.removeChild(child);
        }

        this.textWidth = maxLineWidth * scale;
        this.textHeight = (pos.y + data.lineHeight) * scale;
    };

    /**
     * Updates the transform of this object
     *
     * @method updateTransform
     * @private
     */
    PIXI.BitmapText.prototype.updateTransform = function()
    {
        if(this.dirty)
        {
            this.updateText();
            this.dirty = false;
        }

        PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
    };

    PIXI.BitmapText.fonts = {};