From 15b83e1c88509163dcace8cdb9c2249f6a509410 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 14 Feb 2014 06:04:29 +0000 Subject: [PATCH] Added the new BitmapFont class. This is for rendering retro style fixed-width bitmap fonts into an Image object. --- Gruntfile.js | 1 + README.md | 1 + build/config.php | 1 + examples/wip/bitmaptext1.js | 1 - examples/wip/bitmaptext2.js | 41 +++ src/Phaser.js | 3 +- src/gameobjects/BitmapData.js | 27 ++ src/gameobjects/BitmapFont.js | 520 ++++++++++++++++++++++++++++++++++ src/gameobjects/BitmapText.js | 12 +- 9 files changed, 597 insertions(+), 10 deletions(-) create mode 100644 examples/wip/bitmaptext2.js create mode 100644 src/gameobjects/BitmapFont.js diff --git a/Gruntfile.js b/Gruntfile.js index a16936a57..34754257f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -96,6 +96,7 @@ module.exports = function (grunt) { 'src/gameobjects/Graphics.js', 'src/gameobjects/RenderTexture.js', 'src/gameobjects/SpriteBatch.js', + 'src/gameobjects/BitmapFont.js', 'src/system/Canvas.js', 'src/system/StageScaleMode.js', diff --git a/README.md b/README.md index acae533ca..890d5ba63 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ New features: * 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. +* Added the new BitmapFont class. This is for rendering retro style fixed-width bitmap fonts into an Image object. Updates: diff --git a/build/config.php b/build/config.php index e17e25682..47a2e7144 100644 --- a/build/config.php +++ b/build/config.php @@ -142,6 +142,7 @@ + diff --git a/examples/wip/bitmaptext1.js b/examples/wip/bitmaptext1.js index 46f086996..9589d16e7 100644 --- a/examples/wip/bitmaptext1.js +++ b/examples/wip/bitmaptext1.js @@ -24,7 +24,6 @@ function create() { function change() { text.align = 'center'; - text2.tint = Math.random() * 0xFFFFFF; } diff --git a/examples/wip/bitmaptext2.js b/examples/wip/bitmaptext2.js new file mode 100644 index 000000000..441b2010d --- /dev/null +++ b/examples/wip/bitmaptext2.js @@ -0,0 +1,41 @@ + +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); + +function preload() { + + game.load.image('font', 'assets/fonts/gold_font.png'); + +} + +var font; + +function create() { + + // text = game.add.bitmapText(100, 100, 'carrier', 'Phaser and Pixi\nrocking!', 32); + + font = new Phaser.BitmapFont(game, 'font', 16, 16, "! :() ,?." + Phaser.BitmapFont.TEXT_SET10, 20, 0, 0); + + font.text = "using bitmap fonts rocks"; + + game.world.add(font); + + // font = new FlxBitmapFont(AssetsRegistry.goldFontPNG, 16, 16, "! :() ,?." + FlxBitmapFont.TEXT_SET10, 20, 0, 0); + // font.setText("using bitmap fonts\nin flixel is", true, 0, 8, FlxBitmapFont.ALIGN_CENTER, false); + + + // game.input.onDown.add(change, this); + +} + +function change() { + + // text.align = 'center'; + // text2.tint = Math.random() * 0xFFFFFF; + +} + +function update() { + + // text.text = 'Phaser & Pixi\nrocking!\n' + Math.round(game.time.now); + +} diff --git a/src/Phaser.js b/src/Phaser.js index 14074f21f..43eeaf5cd 100644 --- a/src/Phaser.js +++ b/src/Phaser.js @@ -35,7 +35,8 @@ var Phaser = Phaser || { CANVAS_FILTER: 14, WEBGL_FILTER: 15, ELLIPSE: 16, - SPRITEBATCH: 16, + SPRITEBATCH: 17, + BITMAPFONT: 18, NONE: 0, LEFT: 1, diff --git a/src/gameobjects/BitmapData.js b/src/gameobjects/BitmapData.js index 576addcf6..149cf9b81 100644 --- a/src/gameobjects/BitmapData.js +++ b/src/gameobjects/BitmapData.js @@ -144,6 +144,27 @@ Phaser.BitmapData.prototype = { }, + /** + * Resizes the BitmapData. + * @method Phaser.BitmapData#resize + */ + resize: function (width, height) { + + if (width !== this.width || height !== this.height) + { + this.width = width; + this.height = height; + this.canvas.width = width; + this.canvas.height = height; + this.textureFrame.width = width; + this.textureFrame.height = height; + this.imageData = this.context.getImageData(0, 0, width, height); + } + + this._dirty = true; + + }, + refreshBuffer: function () { this.imageData = this.context.getImageData(0, 0, this.width, this.height); @@ -246,6 +267,12 @@ Phaser.BitmapData.prototype = { }, + copyPixels: function (source, area, destX, destY) { + + this.context.drawImage(source, area.x, area.y, area.width, area.height, destX, destY, area.width, area.height); + + }, + /** * If the game is running in WebGL this will push the texture up to the GPU if it's dirty. * This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function. diff --git a/src/gameobjects/BitmapFont.js b/src/gameobjects/BitmapFont.js new file mode 100644 index 000000000..5ea05215d --- /dev/null +++ b/src/gameobjects/BitmapFont.js @@ -0,0 +1,520 @@ +/** +* @author Richard Davey +* @copyright 2014 Photon Storm Ltd. +* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} +*/ + +/** +* @class Phaser.BitmapFont +* @constructor +* @param {Phaser.Game} game - Current game instance. +* @param {string} key - The font set graphic set as stored in the Game.Cache. +* @param {number} characterWidth - The width of each character in the font set. +* @param {number} characterHeight - The height of each character in the font set. +* @param {string} chars - The characters used in the font set, in display order. You can use the TEXT_SET consts for common font set arrangements. +* @param {number} charsPerRow - The number of characters per row in the font set. +* @param {number} [xSpacing=0] - If the characters in the font set have horizontal spacing between them set the required amount here. +* @param {number} [ySpacing=0] - If the characters in the font set have vertical spacing between them set the required amount here. +* @param {number} [xOffset=0] - If the font set doesn't start at the top left of the given image, specify the X coordinate offset here. +* @param {number} [yOffset=0] - If the font set doesn't start at the top left of the given image, specify the Y coordinate offset here. +*/ +Phaser.BitmapFont = function (game, key, characterWidth, characterHeight, chars, charsPerRow, xSpacing, ySpacing, xOffset, yOffset) { + + /** + * @property {number} characterWidth - The width of each character in the font set. + */ + this.characterWidth = characterWidth; + + /** + * @property {number} characterHeight - The height of each character in the font set. + */ + this.characterHeight = characterHeight; + + /** + * @property {number} characterSpacingX - If the characters in the font set have horizontal spacing between them set the required amount here. + */ + this.characterSpacingX = xSpacing || 0; + + /** + * @property {number} characterSpacingY - If the characters in the font set have vertical spacing between them set the required amount here. + */ + this.characterSpacingY = ySpacing || 0; + + /** + * @property {number} characterPerRow - The number of characters per row in the font set. + */ + this.characterPerRow = charsPerRow; + + /** + * @property {number} offsetX - If the font set doesn't start at the top left of the given image, specify the X coordinate offset here. + */ + this.offsetX = xOffset || 0; + + /** + * @property {number} offsetY - If the font set doesn't start at the top left of the given image, specify the Y coordinate offset here. + */ + this.offsetY = yOffset || 0; + + /** + * @property {string} align - Alignment of the text when multiLine = true or a fixedWidth is set. Set to BitmapFont.ALIGN_LEFT (default), BitmapFont.ALIGN_RIGHT or BitmapFont.ALIGN_CENTER. + */ + this.align = "left"; + + /** + * @property {boolean} multiLine - If set to true all carriage-returns in text will form new lines (see align). If false the font will only contain one single line of text (the default) + * @default + */ + this.multiLine = false; + + /** + * @property {boolean} autoUpperCase - Automatically convert any text to upper case. Lots of old bitmap fonts only contain upper-case characters, so the default is true. + * @default + */ + this.autoUpperCase = true; + + /** + * @property {number} customSpacingX - Adds horizontal spacing between each character of the font, in pixels. + * @default + */ + this.customSpacingX = 0; + + /** + * @property {number} customSpacingY - Adds vertical spacing between each line of multi-line text, set in pixels. + * @default + */ + this.customSpacingY = 0; + + /** + * If you need this BitmapFont image to have a fixed width you can set the width in this value. + * If text is wider than the width specified it will be cropped off. + * @property {number} fixedWidth + */ + this.fixedWidth = 0; + + /** + * @property {HTMLImage} fontSet - A reference to the image stored in the Game.Cache that contains the font. + */ + this.fontSet = game.cache.getImage(key); + + /** + * @property {string} _text - The text of the font image. + * @private + */ + this._text = ''; + + /** + * @property {array} grabData - An array of rects for faster character pasting. + * @private + */ + this.grabData = []; + + // Now generate our rects for faster copying later on + var currentX = this.offsetX; + var currentY = this.offsetY; + var r = 0; + + for (var c = 0; c < chars.length; c++) + { + // The rect is hooked to the ASCII value of the character + this.grabData[chars.charCodeAt(c)] = new Phaser.Rectangle(currentX, currentY, this.characterWidth, this.characterHeight); + + r++; + + if (r == this.characterPerRow) + { + r = 0; + currentX = this.offsetX; + currentY += this.characterHeight + this.characterSpacingY; + } + else + { + currentX += this.characterWidth + this.characterSpacingX; + } + } + + /** + * @property {Phaser.BitmapData} bmd - The internal BitmapData to which the font is rendered. + */ + this.bmd = new Phaser.BitmapData(game, this.characterWidth, this.characterHeight); + + Phaser.Image.call(this, game, 0, 0, this.bmd); + + /** + * @property {number} type - Base Phaser object type. + */ + this.type = Phaser.BITMAPFONT; + +}; + +Phaser.BitmapFont.prototype = Object.create(Phaser.Image.prototype); +Phaser.BitmapFont.prototype.constructor = Phaser.BitmapFont; + +/** +* Align each line of multi-line text to the left. +* @constant +* @type {string} +*/ +Phaser.BitmapFont.ALIGN_LEFT = "left"; + +/** +* Align each line of multi-line text to the right. +* @constant +* @type {string} +*/ +Phaser.BitmapFont.ALIGN_RIGHT = "right"; + +/** +* Align each line of multi-line text in the center. +* @constant +* @type {string} +*/ +Phaser.BitmapFont.ALIGN_CENTER = "center"; + +/** +* Text Set 1 = !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET1 = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~"; + +/** +* Text Set 2 = !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET2 = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + +/** +* Text Set 3 = ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET3 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 "; + +/** +* Text Set 4 = ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET4 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789"; + +/** +* Text Set 5 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() '!?-*:0123456789 +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET5 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() '!?-*:0123456789"; + +/** +* Text Set 6 = ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.' +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET6 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.' "; + +/** +* Text Set 7 = AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-'39 +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET7 = "AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-'39"; + +/** +* Text Set 8 = 0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET8 = "0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + +/** +* Text Set 9 = ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,'\"?! +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET9 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,'\"?!"; + +/** +* Text Set 10 = ABCDEFGHIJKLMNOPQRSTUVWXYZ +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET10 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + +/** +* Text Set 11 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()':;0123456789 +* @constant +* @type {string} +*/ +Phaser.BitmapFont.TEXT_SET11 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()':;0123456789"; + +/** +* If you need this FlxSprite to have a fixed width and custom alignment you can set the width here.
+* If text is wider than the width specified it will be cropped off. +* +* @method Phaser.BitmapFont#setFixedWidth +* @memberof Phaser.BitmapFont +* @param {number} width - Width in pixels of this BitmapFont. Set to zero to disable and re-enable automatic resizing. +* @param {string} [lineAlignment='left'] - Align the text within this width. Set to BitmapFont.ALIGN_LEFT (default), BitmapFont.ALIGN_RIGHT or BitmapFont.ALIGN_CENTER. +*/ +Phaser.BitmapFont.prototype.setFixedWidth = function (width, lineAlignment) { + + if (typeof lineAlignment === 'undefined') { lineAlignment = 'left'; } + + this.fixedWidth = width; + this.align = lineAlignment; + +} + +/** +* A helper function that quickly sets lots of variables at once, and then updates the text. +* +* @method Phaser.BitmapFont#setText +* @memberof Phaser.BitmapFont +* @param {string} content - The text of this sprite. +* @param {boolean} [multiLine=false] - Set to true if you want to support carriage-returns in the text and create a multi-line sprite instead of a single line. +* @param {number} [characterSpacing=0] - To add horizontal spacing between each character specify the amount in pixels. +* @param {number} [lineSpacing=0] - To add vertical spacing between each line of text, set the amount in pixels. +* @param {string} [lineAlignment='left'] - Align each line of multi-line text. Set to BitmapFont.ALIGN_LEFT, BitmapFont.ALIGN_RIGHT or BitmapFont.ALIGN_CENTER. +* @param {boolean} [allowLowerCase=false] - Lots of bitmap font sets only include upper-case characters, if yours needs to support lower case then set this to true. +*/ +Phaser.BitmapFont.prototype.setFixedWidth = function (content, multiLine, characterSpacing, lineSpacing, lineAlignment, allowLowerCase) { + + this.multiLine = multiLine || false; + this.customSpacingX = characterSpacing || 0; + this.customSpacingY = lineSpacing || 0; + this.align = lineAlignment || 'left'; + + if (allowLowerCase) + { + this.autoUpperCase = false; + } + else + { + this.autoUpperCase = true; + } + + if (content.length > 0) + { + this.text = content; + } + +} + +/** +* Updates the BitmapData of the Sprite with the text +* +* @method Phaser.BitmapFont#buildBitmapFontText +* @memberof Phaser.BitmapFont +*/ +Phaser.BitmapFont.prototype.buildBitmapFontText = function () { + + var cx = 0; + var cy = 0; + + if (this.multiLine) + { + var lines = this._text.split("\n"); + + if (this.fixedWidth > 0) + { + this.bmd.resize(fixedWidth, (lines.length * (this.characterHeight + this.customSpacingY)) - this.customSpacingY); + } + else + { + this.bmd.resize(this.getLongestLine() * (this.characterWidth + this.customSpacingX), (lines.length * (this.characterHeight + this.customSpacingY)) - this.customSpacingY); + } + + // Loop through each line of text + for (var i = 0; i < lines.length; i++) + { + // This line of text is held in lines[i] - need to work out the alignment + switch (this.align) + { + case Phaser.BitmapFont.ALIGN_LEFT: + cx = 0; + break; + + case Phaser.BitmapFont.ALIGN_RIGHT: + cx = this.bmd.width - (lines[i].length * (this.characterWidth + this.customSpacingX)); + break; + + case Phaser.BitmapFont.ALIGN_CENTER: + cx = (this.bmd.width / 2) - ((lines[i].length * (this.characterWidth + this.customSpacingX)) / 2); + cx += this.customSpacingX / 2; + break; + } + + // Sanity checks + if (cx < 0) + { + cx = 0; + } + + this.pasteLine(lines[i], cx, cy, this.customSpacingX); + + cy += this.characterHeight + this.customSpacingY; + } + } + else + { + if (this.fixedWidth > 0) + { + this.bmd.resize(fixedWidth, this.characterHeight); + } + else + { + this.bmd.resize(this._text.length * (this.characterWidth + this.customSpacingX), this.characterHeight); + } + + switch (this.align) + { + case Phaser.BitmapFont.ALIGN_LEFT: + cx = 0; + break; + + case Phaser.BitmapFont.ALIGN_RIGHT: + cx = this.bmd.width - (this._text.length * (this.characterWidth + this.customSpacingX)); + break; + + case Phaser.BitmapFont.ALIGN_CENTER: + cx = (this.bmd.width / 2) - ((this._text.length * (this.characterWidth + this.customSpacingX)) / 2); + cx += this.customSpacingX / 2; + break; + } + + this.pasteLine(this._text, cx, 0, this.customSpacingX); + } + + this.bmd.render(); + + this.width = this.bmd.width; + this.height = this.bmd.height; + +} + +/** +* Internal function that takes a single line of text (2nd parameter) and pastes it into the BitmapData at the given coordinates. +* Used by getLine and getMultiLine +* +* @method Phaser.BitmapFont#buildBitmapFontText +* @memberof Phaser.BitmapFont +* @param {string} line - The single line of text to paste. +* @param {number} x - The x coordinate. +* @param {number} y - The y coordinate. +* @param {number} customSpacingX - Custom X spacing. +*/ +Phaser.BitmapFont.prototype.pasteLine = function (line, x, y, customSpacingX) { + + for (var c = 0; c < line.length; c++) + { + // If it's a space then there is no point copying, so leave a blank space + if (line.charAt(c) == " ") + { + x += this.characterWidth + this.customSpacingX; + } + else + { + // If the character doesn't exist in the font then we don't want a blank space, we just want to skip it + if (this.grabData[line.charCodeAt(c)]) + { + this.bmd.copyPixels(this.fontSet, this.grabData[line.charCodeAt(c)], x, y); + + x += this.characterWidth + this.customSpacingX; + + if (x > this.bmd.width) + { + break; + } + } + } + } +} + +/** +* Works out the longest line of text in _text and returns its length +* +* @method Phaser.BitmapFont#getLongestLine +* @memberof Phaser.BitmapFont +* @return {number} The length of the longest line of text. +*/ +Phaser.BitmapFont.prototype.getLongestLine = function () { + + var longestLine = 0; + + if (this._text.length > 0) + { + var lines = this._text.split("\n"); + + for (var i = 0; i < lines.length; i++) + { + if (lines[i].length > longestLine) + { + longestLine = lines[i].length; + } + } + } + + return longestLine; +} + +/** +* Internal helper function that removes all unsupported characters from the _text String, leaving only characters contained in the font set. +* +* @method Phaser.BitmapFont#removeUnsupportedCharacters +* @memberof Phaser.BitmapFont +* @protected +* @param {boolean} [stripCR=true] - Should it strip carriage returns as well? +* @return {string} A clean version of the string. +*/ +Phaser.BitmapFont.prototype.removeUnsupportedCharacters = function (stripCR) { + + var newString = ""; + + for (var c = 0; c < this._text.length; c++) + { + if (this.grabData[this._text.charCodeAt(c)] || this._text.charCodeAt(c) == 32 || (!stripCR && this._text.charAt(c) === "\n")) + { + newString = newString.concat(this._text.charAt(c)); + } + } + + return newString; +} + +/** +* @name Phaser.BitmapText#text +* @property {string} text - Set this value to update the text in this sprite. Carriage returns are automatically stripped out if multiLine is false. Text is converted to upper case if autoUpperCase is true. +*/ +Object.defineProperty(Phaser.BitmapFont.prototype, "text", { + + get: function () { + + return this._text; + + }, + + set: function (value) { + + var newText; + + if (this.autoUpperCase) + { + newText = value.toUpperCase(); + } + else + { + newText = value; + } + + if (newText !== this._text) + { + this._text = newText; + + this.removeUnsupportedCharacters(this.multiLine); + + this.buildBitmapFontText(); + } + + } + +}); diff --git a/src/gameobjects/BitmapText.js b/src/gameobjects/BitmapText.js index 00a83cd4c..2424f64d5 100644 --- a/src/gameobjects/BitmapText.js +++ b/src/gameobjects/BitmapText.js @@ -116,13 +116,9 @@ Phaser.BitmapText.prototype = Object.create(PIXI.BitmapText.prototype); Phaser.BitmapText.prototype.constructor = Phaser.BitmapText; /** - * 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 - * - * @method setStyle - * @param style {Object} The style parameters, contained as properties of an object - */ +* @method setStyle +* @private +*/ Phaser.BitmapText.prototype.setStyle = function() { this.style = { align: this._align }; @@ -220,7 +216,7 @@ Object.defineProperty(Phaser.BitmapText.prototype, 'align', { if (value !== this._align) { this._align = value; - this.dirty = true; + this.setStyle(); } }