Loader.bitmapFont now has 2 extra parameters: xSpacing and ySpacing. These allow you to add extra spacing to each letter or line of the font.

Author: photonstorm

README.md

@@ -85,6 +85,7 @@ Significant API changes:
 * Stage.canvas has been moved to Game.canvas (which used to be a reference to Stage.canvas, but is now the actual object).
 * BitmapData.addTo removed and enhanced BitmapData.add so it can accept either a single Sprite/Image or an Array of them.
 * BitmapData has had all of the EaselJS functions removed. It was just taking up space and you can do it all via BitmapData.context directly.
+* BitmapText has had a bit of an overhaul - the signature for adding a BitmapText has changed to: x, y, font, text, size. See the docs and examples for details.
 
 
 New features:
@@ -105,9 +106,9 @@ New features:
 * TileSprite can now use a frame from a texture atlas or a sprite sheet.
 * TileSprites can now be animated. See new example :)
 * TileSprites have a new method: autoScroll(x, y) which sets an automatic scroll running (until stopped with TileSprite.stopScroll).
-
-
-New Examples:
+* BitmapText now uses the new XML parser which should work under CocoonJS without clashes.
+* BitmapText signature changed so you can support fonts with spaces in their names.
+* Loader.bitmapFont now has 2 extra parameters: xSpacing and ySpacing. These allow you to add extra spacing to each letter or line of the font.
 
 
 Updates:

examples/wip/bitmaptext1.js

@@ -3,8 +3,8 @@ var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: p
 
 function preload() {
 
-    game.load.bitmapFont('desyrel', 'assets/fonts/desyrel.png', 'assets/fonts/desyrel.xml');
-    game.load.bitmapFont('carrier', 'assets/fonts/carrier_command.png', 'assets/fonts/carrier_command.xml');
+    game.load.bitmapFont('desyrel', 'assets/fonts/desyrel.png', 'assets/fonts/desyrel.xml', null, 0, -32);
+    game.load.bitmapFont('carrier', 'assets/fonts/carrier_command.png', 'assets/fonts/carrier_command.xml', null, 0, 24);
 
 }
 
@@ -13,17 +13,19 @@ var text2;
 
 function create() {
 
-    text = game.add.bitmapText(200, 100, 'carrier', 'Phaser & Pixi\nrocking!', 32);
-    text2 = game.add.bitmapText(200, 300, 'desyrel', 'Phaser & Pixi\nrocking!', 32);
+    text = game.add.bitmapText(100, 100, 'carrier', 'Phaser and Pixi\nrocking!', 32);
+
+    text2 = game.add.bitmapText(100, 300, 'desyrel', 'Phaser & Pixi\nrocking!', 64);
 
-    // text.tint = Math.random() * 0xFFFFFF;
     game.input.onDown.add(change, this);
 
 }
 
 function change() {
 
-	text.fontSize++;
+	text.align = 'center';
+
+    text2.tint = Math.random() * 0xFFFFFF;
 
 }
 

src/gameobjects/BitmapText.js

@@ -20,8 +20,8 @@
 * @param {number} x - X position of the new bitmapText object.
 * @param {number} y - Y position of the new bitmapText object.
 * @param {string} font - The key of the BitmapFont as stored in Game.Cache.
-* @param {string} [text] - The actual text that will be rendered. Can be set later via BitmapText.text.
-* @param {number} [size] - The size the font will be rendered in, in pixels.
+* @param {string} [text=''] - The actual text that will be rendered. Can be set later via BitmapText.text.
+* @param {number} [size=32] - The size the font will be rendered in, in pixels.
 */
 Phaser.BitmapText = function (game, x, y, font, text, size) {
 
@@ -85,10 +85,16 @@ Phaser.BitmapText = function (game, x, y, font, text, size) {
     this._fontSize = size;
 
     /**
-    * @property {number} lineSpacing - Additional spacing (in pixels) between each line of text if multi-line.
+    * @property {string} _align - Internal cache var.
     * @private
     */
-    this._lineSpacing = 0;
+    this._align = 'left';
+
+    /**
+    * @property {number} _tint - Internal cache var.
+    * @private
+    */
+    this._tint = 0xFFFFFF;
 
     /**
     * @property {Phaser.Events} events - The Events you can subscribe to that are dispatched when certain things happen on this Sprite or its components.
@@ -119,19 +125,10 @@ Phaser.BitmapText.prototype.constructor = Phaser.BitmapText;
  */
 Phaser.BitmapText.prototype.setStyle = function() {
 
-    // style = style || {};
-    // style.align = style.align || 'left';
-    this.style = { align: 'left' };
-
+    this.style = { align: this._align };
     this.fontName = this._font;
     this.fontSize = this._fontSize;
-
-    // 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;
 
 };
 
@@ -182,16 +179,6 @@ Phaser.BitmapText.prototype.postUpdate = function () {
 */
 Phaser.BitmapText.prototype.destroy = function() {
 
-    if (this.canvas && this.canvas.parentNode)
-    {
-        this.canvas.parentNode.removeChild(this.canvas);
-    }
-    else
-    {
-        this.canvas = null;
-        this.context = null;
-    }
-
     if (this.filters)
     {
         this.filters = null;
@@ -202,23 +189,20 @@ Phaser.BitmapText.prototype.destroy = function() {
         this.parent.remove(this);
     }
 
-    this.texture.destroy();
-
-    if (this.canvas.parentNode)
-    {
-        this.canvas.parentNode.removeChild(this.canvas);
-    }
-    else
-    {
-        this.canvas = null;
-        this.context = null;
-    }
-
     this.exists = false;
     this.visible = false;
 
     this.game = null;
 
+    if (this.children.length > 0)
+    {
+        do
+        {
+            this.removeChild(this.children[0]);
+        }
+        while (this.children.length > 0);
+    }
+
 }
 
 /**
@@ -228,21 +212,42 @@ Phaser.BitmapText.prototype.destroy = function() {
 Object.defineProperty(Phaser.BitmapText.prototype, 'align', {
 
     get: function() {
-        return this.style.align;
+        return this._align;
     },
 
     set: function(value) {
 
-        if (value !== this.style.align)
+        if (value !== this._align)
         {
-            this.style.align = value;
+            this._align = value;
             this.dirty = true;
         }
 
     }
 
 });
 
+/**
+* @name Phaser.BitmapText#tint
+* @property {number} tint - The tint applied to the BitmapText. This is a hex value. Set to white to disable (0xFFFFFF)
+*/
+Object.defineProperty(Phaser.BitmapText.prototype, 'tint', {
+
+    get: function() {
+        return this._tint;
+    },
+
+    set: function(value) {
+
+        if (value !== this._tint)
+        {
+            this._tint = value;
+            this.dirty = true;
+        }
+
+    }
+
+});
 
 /**
 * Indicates the rotation of the Text, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation.

src/loader/Cache.js

@@ -212,17 +212,18 @@ Phaser.Cache.prototype = {
     * @param {string} key - The unique key by which you will reference this object.
     * @param {string} url - URL of this font xml file.
     * @param {object} data - Extra font data.
-    * @param xmlData {object} Texture atlas frames data.
+    * @param {object} xmlData - Texture atlas frames data.
+    * @param {number} [xSpacing=0] - If you'd like to add additional horizontal spacing between the characters then set the pixel value here.
+    * @param {number} [ySpacing=0] - If you'd like to add additional vertical spacing between the lines then set the pixel value here.
     */
-    addBitmapFont: function (key, url, data, xmlData) {
+    addBitmapFont: function (key, url, data, xmlData, xSpacing, ySpacing) {
 
         this._images[key] = { url: url, data: data, spriteSheet: true };
 
         PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data);
         PIXI.TextureCache[key] = new PIXI.Texture(PIXI.BaseTextureCache[key]);
 
-        Phaser.LoaderParser.bitmapFont(this.game, xmlData, key);
-        // this._images[key].frameData = Phaser.AnimationParser.XMLData(this.game, xmlData, key);
+        Phaser.LoaderParser.bitmapFont(this.game, xmlData, key, xSpacing, ySpacing);
 
     },
 

src/loader/Loader.js

@@ -497,17 +497,21 @@ Phaser.Loader.prototype = {
     * @param {string} textureURL - The url of the font image file.
     * @param {string} [xmlURL] - The url of the font data file (xml/fnt)
     * @param {object} [xmlData] - An optional XML data object.
+    * @param {number} [xSpacing=0] - If you'd like to add additional horizontal spacing between the characters then set the pixel value here.
+    * @param {number} [ySpacing=0] - If you'd like to add additional vertical spacing between the lines then set the pixel value here.
     * @return {Phaser.Loader} This Loader instance.
     */
-    bitmapFont: function (key, textureURL, xmlURL, xmlData) {
+    bitmapFont: function (key, textureURL, xmlURL, xmlData, xSpacing, ySpacing) {
 
         if (typeof xmlURL === "undefined") { xmlURL = null; }
         if (typeof xmlData === "undefined") { xmlData = null; }
+        if (typeof xSpacing === "undefined") { xSpacing = 0; }
+        if (typeof ySpacing === "undefined") { ySpacing = 0; }
 
         //  A URL to a json/xml file has been given
         if (xmlURL)
         {
-            this.addToFileList('bitmapfont', key, textureURL, { xmlURL: xmlURL });
+            this.addToFileList('bitmapfont', key, textureURL, { xmlURL: xmlURL, xSpacing: xSpacing, ySpacing: ySpacing });
         }
         else
         {
@@ -540,7 +544,7 @@ Phaser.Loader.prototype = {
                 }
                 else
                 {
-                    this.addToFileList('bitmapfont', key, textureURL, { xmlURL: null, xmlData: xml });
+                    this.addToFileList('bitmapfont', key, textureURL, { xmlURL: null, xmlData: xml, xSpacing: xSpacing, ySpacing: ySpacing });
                 }
             }
         }
@@ -1005,7 +1009,7 @@ Phaser.Loader.prototype = {
 
                 if (file.xmlURL == null)
                 {
-                    this.game.cache.addBitmapFont(file.key, file.url, file.data, file.xmlData);
+                    this.game.cache.addBitmapFont(file.key, file.url, file.data, file.xmlData, file.xSpacing, file.ySpacing);
                 }
                 else
                 {
@@ -1208,7 +1212,7 @@ Phaser.Loader.prototype = {
 
         if (file.type == 'bitmapfont')
         {
-            this.game.cache.addBitmapFont(file.key, file.url, file.data, xml);
+            this.game.cache.addBitmapFont(file.key, file.url, file.data, xml, file.xSpacing, file.ySpacing);
         }
         else if (file.type == 'textureatlas')
         {

src/loader/LoaderParser.js

@@ -10,15 +10,15 @@
 * @class Phaser.LoaderParser
 */
 Phaser.LoaderParser = {
-    
+
     /**
-    * Parse frame data from an XML file.
+    * Parse a Bitmap Font from an XML file.
     * @method Phaser.LoaderParser.bitmapFont
     * @param {Phaser.Game} game - A reference to the current game.
     * @param {object} xml - XML data you want to parse.
     * @param {string} cacheKey - The key of the texture this font uses in the cache.
     */
-    bitmapFont: function (game, xml, cacheKey) {
+    bitmapFont: function (game, xml, cacheKey, xSpacing, ySpacing) {
 
         if (!xml || /MSIE 9/i.test(navigator.userAgent) || navigator.isCocoonJS)
         {
@@ -41,7 +41,7 @@ Phaser.LoaderParser = {
 
         data.font = info.getAttribute('face');
         data.size = parseInt(info.getAttribute('size'), 10);
-        data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
+        data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) + ySpacing;
         data.chars = {};
 
         var letters = xml.getElementsByTagName('char');
@@ -61,7 +61,7 @@ Phaser.LoaderParser = {
             data.chars[charCode] = {
                 xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
                 yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
-                xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
+                xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10) + xSpacing,
                 kerning: {},
                 texture: PIXI.TextureCache[cacheKey] = new PIXI.Texture(texture, textureRect)
             };