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.

Author: photonstorm

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

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++)

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.<number>} kerning - Kerning values, keyed by character code.
  */

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