/** * @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} An alignment of the multiline text ("left", "center" or "right") */ 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} An alignment of the multiline text ("left", "center" or "right") */ 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 transfor 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 = {};