Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-10 23:24:41 +00:00
Code Issues Projects Releases Packages Wiki Activity

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.

Browse source
This commit is contained in:
photonstorm 2014-02-14 04:34:57 +00:00
parent 24f2e2a46d
commit b38b00c2c1
6 changed files with 75 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -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:

14
examples/wip/bitmaptext1.js
View file

@ -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;
}

83
src/gameobjects/BitmapText.js
View file

@ -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.

9
src/loader/Cache.js
View file

@ -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);
},

14
src/loader/Loader.js
View file

@ -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')
{

10
src/loader/LoaderParser.js
View file

@ -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)
};