#

API Docs for: 1.4.3
Show: Inherited Protected Private Deprecated

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

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

    /**
     * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n'
     * 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);

        this.setText(text);
        this.setStyle(style);
        this.updateText();
        this.dirty = false;
    };

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

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

    /**
     * Set the style of the text
     *
     * @method setStyle
     * @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.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;
    };

    /**
     * Renders text
     *
     * @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[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);
        }

        for(i = 0; i < chars.length; i++)
        {
            var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode);
            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;
            this.addChild(c);
        }

        this.width = maxLineWidth * scale;
        this.height = (pos.y + data.lineHeight) * scale;
    };

    /**
     * Updates the transform of this object
     *
     * @method updateTransform
     * @private
     */
    PIXI.BitmapText.prototype.updateTransform = function()
    {
        if(this.dirty)
        {
            while(this.children.length > 0)
            {
                this.removeChild(this.getChildAt(0));
            }
            this.updateText();

            this.dirty = false;
        }

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

    PIXI.BitmapText.fonts = {};