diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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' + * 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. @@ -20,11 +20,42 @@ { 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; }; @@ -33,10 +64,10 @@ PIXI.BitmapText.prototype.constructor = PIXI.BitmapText; /** - * Set the copy for the text object + * Set the text string to be rendered. * * @method setText - * @param text {String} The copy that you would like the text to display + * @param text {String} The text that you would like displayed */ PIXI.BitmapText.prototype.setText = function(text) { @@ -47,7 +78,7 @@ /** * 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 line text + * [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 @@ -82,11 +113,11 @@ 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); @@ -100,12 +131,14 @@ } 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,7 @@ 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. @@ -156,23 +191,7 @@ this.removeChild(child); } - - /** - * [read-only] The width of the overall text, different from fontSize, - * which is defined in the style object - * - * @property textWidth - * @type Number - */ this.textWidth = maxLineWidth * scale; - - /** - * [read-only] The height of the overall text, different from fontSize, - * which is defined in the style object - * - * @property textHeight - * @type Number - */ this.textHeight = (pos.y + data.lineHeight) * scale; }; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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' + * 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. @@ -20,11 +20,42 @@ { 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; }; @@ -33,10 +64,10 @@ PIXI.BitmapText.prototype.constructor = PIXI.BitmapText; /** - * Set the copy for the text object + * Set the text string to be rendered. * * @method setText - * @param text {String} The copy that you would like the text to display + * @param text {String} The text that you would like displayed */ PIXI.BitmapText.prototype.setText = function(text) { @@ -47,7 +78,7 @@ /** * 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 line text + * [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 @@ -82,11 +113,11 @@ 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); @@ -100,12 +131,14 @@ } 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,7 @@ 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. @@ -156,23 +191,7 @@ this.removeChild(child); } - - /** - * [read-only] The width of the overall text, different from fontSize, - * which is defined in the style object - * - * @property textWidth - * @type Number - */ this.textWidth = maxLineWidth * scale; - - /** - * [read-only] The height of the overall text, different from fontSize, - * which is defined in the style object - * - * @property textHeight - * @type Number - */ this.textHeight = (pos.y + data.lineHeight) * scale; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well