diff --git a/examples/wip/bitmaptext3.js b/examples/wip/bitmaptext3.js index 9eae14d9..80f2484a 100644 --- a/examples/wip/bitmaptext3.js +++ b/examples/wip/bitmaptext3.js @@ -9,12 +9,22 @@ function preload() { } var font; +var i; function create() { - font = game.add.bitmapFont(game.world.centerX, 300, 'knightHawks', 31, 25, Phaser.BitmapFont.TEXT_SET6, 10, 1, 1); - font.anchor.set(0.5); + font = game.add.bitmapFont('knightHawks', 31, 25, Phaser.BitmapFont.TEXT_SET6, 10, 1, 1); + font.text = 'phaser was here'; + for (var c = 0; c < 10; c++) + { + var i = game.add.image(0, c * 32, font); + i.tint = Math.random() * 0xFFFFFF; + } + + // i.scale.set(2); + + // font.anchor.set(0.5); // font.text = 'phaser'; game.input.onDown.add(change, this); @@ -23,21 +33,21 @@ function create() { function change() { - font.tint = Math.random() * 0xFFFFFF; + font.text = 'rocking the house'; } function update() { // font.text = "phaser\n\nx: " + game.input.x + "\ny: " + game.input.y; - font.text = "phaser x: " + game.input.x + " y: " + game.input.y; + // font.text = "phaser x: " + game.input.x + " y: " + game.input.y; } function render() { - game.debug.renderText("x: " + game.input.x + "\ny: " + game.input.y, 32, 32); - game.debug.renderText(font.bmd.width + " x " + font.bmd.height, 32, 64); - game.debug.renderText(font.width + " x " + font.height, 32, 96); + // game.debug.renderText("x: " + game.input.x + "\ny: " + game.input.y, 32, 32); + // game.debug.renderText(font.bmd.width + " x " + font.bmd.height, 32, 64); + // game.debug.renderText(font.width + " x " + font.height, 32, 96); } diff --git a/src/gameobjects/BitmapFont.js b/src/gameobjects/BitmapFont.js index 5b5da674..586ec3e5 100644 --- a/src/gameobjects/BitmapFont.js +++ b/src/gameobjects/BitmapFont.js @@ -6,6 +6,7 @@ /** * @class Phaser.BitmapFont +* @extends Phaser.RenderTexture * @constructor * @param {Phaser.Game} game - Current game instance. * @param {string} key - The font set graphic set as stored in the Game.Cache. @@ -18,7 +19,7 @@ * @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, x, y, key, characterWidth, characterHeight, chars, charsPerRow, xSpacing, ySpacing, xOffset, yOffset) { +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. @@ -112,11 +113,22 @@ Phaser.BitmapFont = function (game, x, y, key, characterWidth, characterHeight, var currentX = this.offsetX; var currentY = this.offsetY; var r = 0; + var data = new Phaser.FrameData(); 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); + var uuid = game.rnd.uuid(); + + var frame = data.addFrame(new Phaser.Frame(c, currentX, currentY, this.characterWidth, this.characterHeight, '', uuid)); + + this.grabData[chars.charCodeAt(c)] = frame.index; + + PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[key], { + x: currentX, + y: currentY, + width: this.characterWidth, + height: this.characterHeight + }); r++; @@ -132,13 +144,11 @@ Phaser.BitmapFont = function (game, x, y, key, characterWidth, characterHeight, } } - /** - * @property {Phaser.BitmapData} bmd - The internal BitmapData to which the font is rendered. - */ - // this.bmd = new Phaser.BitmapData(game, this.characterWidth, this.characterHeight); - this.bmd = new Phaser.BitmapData(game, 800, 600); + game.cache.updateFrameData(key, data); - Phaser.Image.call(this, game, x, y, this.bmd); + this.stamp = new Phaser.Image(game, 0, 0, key, 0); + + Phaser.RenderTexture.call(this, game); /** * @property {number} type - Base Phaser object type. @@ -147,7 +157,7 @@ Phaser.BitmapFont = function (game, x, y, key, characterWidth, characterHeight, }; -Phaser.BitmapFont.prototype = Object.create(Phaser.Image.prototype); +Phaser.BitmapFont.prototype = Object.create(Phaser.RenderTexture.prototype); Phaser.BitmapFont.prototype.constructor = Phaser.BitmapFont; /** @@ -301,6 +311,41 @@ Phaser.BitmapFont.prototype.setText = function (content, multiLine, characterSpa } +/** +* Over rides the default PIXI.RenderTexture resize event as we need our baseTexture resized as well. +* +* @method Phaser.BitmapFont#resize +* @memberof Phaser.BitmapFont +*/ +Phaser.BitmapFont.prototype.resize = function (width, height) { + + this.width = width; + this.height = height; + + this.frame.width = this.width; + this.frame.height = this.height; + + this.baseTexture.width = this.width; + this.baseTexture.height = this.height; + + if (this.renderer.type === PIXI.WEBGL_RENDERER) + { + this.projection.x = this.width / 2; + this.projection.y = -this.height / 2; + + var gl = this.renderer.gl; + gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTextures[gl.id]); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + } + else + { + this.textureBuffer.resize(this.width, this.height); + } + + PIXI.Texture.frameUpdates.push(this); + +} + /** * Updates the BitmapData of the Sprite with the text * @@ -311,19 +356,21 @@ 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); + this.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); + this.resize(this.getLongestLine() * (this.characterWidth + this.customSpacingX), (lines.length * (this.characterHeight + this.customSpacingY)) - this.customSpacingY); } + + this.textureBuffer.clear(); // Loop through each line of text for (var i = 0; i < lines.length; i++) @@ -336,11 +383,11 @@ Phaser.BitmapFont.prototype.buildBitmapFontText = function () { break; case Phaser.BitmapFont.ALIGN_RIGHT: - cx = this.bmd.width - (lines[i].length * (this.characterWidth + this.customSpacingX)); + cx = this.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.width / 2) - ((lines[i].length * (this.characterWidth + this.customSpacingX)) / 2); cx += this.customSpacingX / 2; break; } @@ -360,12 +407,14 @@ Phaser.BitmapFont.prototype.buildBitmapFontText = function () { { if (this.fixedWidth > 0) { - this.bmd.resize(fixedWidth, this.characterHeight); + this.resize(fixedWidth, this.characterHeight); } else { - this.bmd.resize(this._text.length * (this.characterWidth + this.customSpacingX), this.characterHeight); + this.resize(this._text.length * (this.characterWidth + this.customSpacingX), this.characterHeight); } + + this.textureBuffer.clear(); switch (this.align) { @@ -374,11 +423,11 @@ Phaser.BitmapFont.prototype.buildBitmapFontText = function () { break; case Phaser.BitmapFont.ALIGN_RIGHT: - cx = this.bmd.width - (this._text.length * (this.characterWidth + this.customSpacingX)); + cx = this.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.width / 2) - ((this._text.length * (this.characterWidth + this.customSpacingX)) / 2); cx += this.customSpacingX / 2; break; } @@ -386,16 +435,6 @@ Phaser.BitmapFont.prototype.buildBitmapFontText = function () { this.pasteLine(this._text, cx, 0, this.customSpacingX); } - this.bmd.render(); - this.texture.frame.width = this.bmd.width; - this.texture.frame.height = this.bmd.height; - this.updateFrame = true; - this.dirty = true; - this.textureChange = true; - // this.setTexture(this.bmd.texture); - // this.width = this.bmd.width; - // this.height = this.bmd.height; - } /** @@ -411,6 +450,8 @@ Phaser.BitmapFont.prototype.buildBitmapFontText = function () { */ Phaser.BitmapFont.prototype.pasteLine = function (line, x, y, customSpacingX) { + var p = new Phaser.Point(); + for (var c = 0; c < line.length; c++) { // If it's a space then there is no point copying, so leave a blank space @@ -423,11 +464,14 @@ Phaser.BitmapFont.prototype.pasteLine = function (line, x, y, customSpacingX) { // 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); + this.stamp.frame = this.grabData[line.charCodeAt(c)]; + p.set(x, y); + this.render(this.stamp, p, false); + // this.bmd.copyPixels(this.fontSet, this.grabData[line.charCodeAt(c)], x, y); x += this.characterWidth + this.customSpacingX; - if (x > this.bmd.width) + if (x > this.width) { break; } diff --git a/src/gameobjects/GameObjectFactory.js b/src/gameobjects/GameObjectFactory.js index 77c8a630..24014a03 100644 --- a/src/gameobjects/GameObjectFactory.js +++ b/src/gameobjects/GameObjectFactory.js @@ -260,8 +260,6 @@ Phaser.GameObjectFactory.prototype = { /** * Create a new BitmapFont object. * - * @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 {number} characterWidth - The width of each character in the font set. * @param {number} characterHeight - The height of each character in the font set. @@ -271,14 +269,11 @@ Phaser.GameObjectFactory.prototype = { * @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. - * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. - * @return {Phaser.BitmapFont} The newly created BitmapFont object. + * @return {Phaser.BitmapFont} The newly created BitmapFont texture which can be applied to an Image or Sprite. */ - bitmapFont: function (x, y, font, characterWidth, characterHeight, chars, charsPerRow, xSpacing, ySpacing, xOffset, yOffset, group) { + bitmapFont: function (font, characterWidth, characterHeight, chars, charsPerRow, xSpacing, ySpacing, xOffset, yOffset) { - if (typeof group === 'undefined') { group = this.world; } - - return group.add(new Phaser.BitmapFont(this.game, x, y, font, characterWidth, characterHeight, chars, charsPerRow, xSpacing, ySpacing, xOffset, yOffset)); + return new Phaser.BitmapFont(this.game, font, characterWidth, characterHeight, chars, charsPerRow, xSpacing, ySpacing, xOffset, yOffset); }, @@ -328,8 +323,8 @@ Phaser.GameObjectFactory.prototype = { */ renderTexture: function (width, height, key, addToCache) { - if (typeof addToCache === 'undefined') { addToCache = false; } if (typeof key === 'undefined' || key === '') { key = this.game.rnd.uuid(); } + if (typeof addToCache === 'undefined') { addToCache = false; } var texture = new Phaser.RenderTexture(this.game, width, height, key); diff --git a/src/loader/Cache.js b/src/loader/Cache.js index b5b496dc..bbdab5d5 100644 --- a/src/loader/Cache.js +++ b/src/loader/Cache.js @@ -299,6 +299,23 @@ Phaser.Cache.prototype = { }, + /** + * Replaces a set of frameData with a new Phaser.FrameData object. + * + * @method Phaser.Cache#updateFrameData + * @param {string} key - The unique key by which you will reference this object. + * @param {number} frameData - The new FrameData. + */ + updateFrameData: function (key, frameData) { + + if (this._images[key]) + { + this._images[key].spriteSheet = true; + this._images[key].frameData = frameData; + } + + }, + /** * Add a new sound. *