From e195aac9191e32d40391a31f74a5e5dcfe5b2e98 Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Fri, 31 Jul 2020 11:32:37 +0100 Subject: [PATCH] `ParseXMLBitmapFont` will now calculate the WebGL uv data for the glyphs during parsing. This avoids it having to be done during rendering, saving CPU cycles on an operation that never changes. --- src/gameobjects/bitmaptext/ParseFromAtlas.js | 2 +- .../bitmaptext/ParseXMLBitmapFont.js | 38 ++++++++++--------- .../typedefs/BitmapFontCharacterData.js | 6 +++ src/loader/filetypes/BitmapFontFile.js | 4 +- 4 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/gameobjects/bitmaptext/ParseFromAtlas.js b/src/gameobjects/bitmaptext/ParseFromAtlas.js index e33728918..cd0b31a06 100644 --- a/src/gameobjects/bitmaptext/ParseFromAtlas.js +++ b/src/gameobjects/bitmaptext/ParseFromAtlas.js @@ -32,7 +32,7 @@ var ParseFromAtlas = function (scene, fontName, textureKey, frameKey, xmlKey, xS if (frame && xml) { - var data = ParseXMLBitmapFont(xml, xSpacing, ySpacing, frame); + var data = ParseXMLBitmapFont(xml, frame, xSpacing, ySpacing); scene.sys.cache.bitmapFont.add(fontName, { data: data, texture: textureKey, frame: frameKey }); diff --git a/src/gameobjects/bitmaptext/ParseXMLBitmapFont.js b/src/gameobjects/bitmaptext/ParseXMLBitmapFont.js index b8ba6bcfb..7c8a1f86f 100644 --- a/src/gameobjects/bitmaptext/ParseXMLBitmapFont.js +++ b/src/gameobjects/bitmaptext/ParseXMLBitmapFont.js @@ -29,17 +29,22 @@ function getValue (node, attribute) * @private * * @param {XMLDocument} xml - The XML Document to parse the font from. + * @param {Phaser.Textures.Frame} frame - The texture frame to take into account when creating the uv data. * @param {integer} [xSpacing=0] - The x-axis spacing to add between each letter. * @param {integer} [ySpacing=0] - The y-axis spacing to add to the line height. - * @param {Phaser.Textures.Frame} [frame] - The texture frame to take into account while parsing. * * @return {Phaser.Types.GameObjects.BitmapText.BitmapFontData} The parsed Bitmap Font data. */ -var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame) +var ParseXMLBitmapFont = function (xml, frame, xSpacing, ySpacing) { if (xSpacing === undefined) { xSpacing = 0; } if (ySpacing === undefined) { ySpacing = 0; } + var textureX = frame.cutX; + var textureY = frame.cutY; + var textureWidth = frame.source.width; + var textureHeight = frame.source.height; + var data = {}; var info = xml.getElementsByTagName('info')[0]; var common = xml.getElementsByTagName('common')[0]; @@ -84,6 +89,15 @@ var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame) } } + if (adjustForTrim && top !== 0 && left !== 0) + { + // Now we know the top and left coordinates of the glyphs in the original data + // so we can work out how much to adjust the glyphs by + + gx -= frame.x; + gy -= frame.y; + } + data.chars[charCode] = { x: gx, @@ -96,24 +110,14 @@ var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame) yOffset: getValue(node, 'yoffset'), xAdvance: getValue(node, 'xadvance') + xSpacing, data: {}, - kerning: {} + kerning: {}, + u0: (textureX + gx) / textureWidth, + v0: (textureY + gy) / textureHeight, + u1: (textureX + gx + gw) / textureWidth, + v1: (textureY + gy + gh) / textureHeight }; } - if (adjustForTrim && top !== 0 && left !== 0) - { - // Now we know the top and left coordinates of the glyphs in the original data - // so we can work out how much to adjust the glyphs by - - for (var code in data.chars) - { - var glyph = data.chars[code]; - - glyph.x -= frame.x; - glyph.y -= frame.y; - } - } - var kernings = xml.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) diff --git a/src/gameobjects/bitmaptext/typedefs/BitmapFontCharacterData.js b/src/gameobjects/bitmaptext/typedefs/BitmapFontCharacterData.js index ccf12b321..849f4746d 100644 --- a/src/gameobjects/bitmaptext/typedefs/BitmapFontCharacterData.js +++ b/src/gameobjects/bitmaptext/typedefs/BitmapFontCharacterData.js @@ -3,6 +3,8 @@ * * Describes the character's position, size, offset and kerning. * + * As of version 3.50 it also includes the WebGL texture uv data. + * * @typedef {object} Phaser.Types.GameObjects.BitmapText.BitmapFontCharacterData * @since 3.0.0 * @@ -14,6 +16,10 @@ * @property {number} centerY - The center y position of the character. * @property {number} xOffset - The x offset of the character. * @property {number} yOffset - The y offset of the character. + * @property {number} u0 - WebGL texture u0. + * @property {number} v0 - WebGL texture v0. + * @property {number} u1 - WebGL texture u1. + * @property {number} v1 - WebGL texture v1. * @property {object} data - Extra data for the character. * @property {Object.} kerning - Kerning values, keyed by character code. */ diff --git a/src/loader/filetypes/BitmapFontFile.js b/src/loader/filetypes/BitmapFontFile.js index 254c002fa..df65160e3 100644 --- a/src/loader/filetypes/BitmapFontFile.js +++ b/src/loader/filetypes/BitmapFontFile.js @@ -99,7 +99,9 @@ var BitmapFontFile = new Class({ image.addToCache(); xml.addToCache(); - this.loader.cacheManager.bitmapFont.add(image.key, { data: ParseXMLBitmapFont(xml.data), texture: image.key, frame: null }); + var data = ParseXMLBitmapFont(xml.data, image.cache.getFrame(image.key)); + + this.loader.cacheManager.bitmapFont.add(image.key, { data: data, texture: image.key, frame: null }); this.complete = true; }