var core = require('../core'); /** * 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 * @extends DisplayObjectContainer * @namespace PIXI * @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 */ function BitmapText(text, style) { core.DisplayObjectContainer.call(this); /** * The width of the overall text, different from fontSize, * which is defined in the style object * * @member {number} * @readOnly */ this.textWidth = 0; /** * The height of the overall text, different from fontSize, * which is defined in the style object * * @member {number} * @readOnly */ this.textHeight = 0; /** * @member {Array} * @private */ this._pool = []; this.setText(text); this.setStyle(style); this.updateText(); /** * The dirty state of this object. * @member {boolean} */ this.dirty = false; } // constructor BitmapText.prototype = Object.create(core.DisplayObjectContainer.prototype); BitmapText.prototype.constructor = BitmapText; module.exports = BitmapText; /** * Set the text string to be rendered. * * @param text {string} The text that you would like displayed */ 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 * * @param style {object} The style parameters, contained as properties of an object */ 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) : BitmapText.fonts[this.fontName].size; this.dirty = true; this.tint = style.tint; }; /** * Renders text and updates it when needed * * @private */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; var pos = new core.math.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 core.math.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 core.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 * * @private */ BitmapText.prototype.updateTransform = function () { if (this.dirty) { this.updateText(); this.dirty = false; } this.displayObjectContainerUpdateTransform(); }; BitmapText.fonts = {};