From b38b00c2c11ffd0cb9c496b31dd7859071fe3500 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 14 Feb 2014 04:34:57 +0000 Subject: [PATCH] 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. --- README.md | 7 +-- examples/wip/bitmaptext1.js | 14 +++--- src/gameobjects/BitmapText.js | 83 +++++++++++++++++++---------------- src/loader/Cache.js | 9 ++-- src/loader/Loader.js | 14 +++--- src/loader/LoaderParser.js | 10 ++--- 6 files changed, 75 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index 879256bf3..acae533ca 100644 --- a/README.md +++ b/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: diff --git a/examples/wip/bitmaptext1.js b/examples/wip/bitmaptext1.js index 30b8fc4d1..46f086996 100644 --- a/examples/wip/bitmaptext1.js +++ b/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; } diff --git a/src/gameobjects/BitmapText.js b/src/gameobjects/BitmapText.js index b8e340cb2..00a83cd4c 100644 --- a/src/gameobjects/BitmapText.js +++ b/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,14 +212,14 @@ 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; } @@ -243,6 +227,27 @@ Object.defineProperty(Phaser.BitmapText.prototype, 'align', { }); +/** +* @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. diff --git a/src/loader/Cache.js b/src/loader/Cache.js index 0e4cf05f0..b5b496dcb 100644 --- a/src/loader/Cache.js +++ b/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); }, diff --git a/src/loader/Loader.js b/src/loader/Loader.js index 98b3e1059..f8489a201 100644 --- a/src/loader/Loader.js +++ b/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') { diff --git a/src/loader/LoaderParser.js b/src/loader/LoaderParser.js index 096ea8547..b50ce1af7 100644 --- a/src/loader/LoaderParser.js +++ b/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) };