Allowed Bitmap Text fonts to be trimmed within a texture atlas with or without padding

Author: photonstorm

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '391befc0-6692-11e7-b6f4-cbbce538a3f5'
+build: '4012e3b0-66ab-11e7-b482-e336f0d78b42'
 };
 module.exports = CHECKSUM;

v3/src/gameobjects/bitmaptext/ParseXMLBitmapFont.js

@@ -3,16 +3,6 @@ function getValue (node, attribute)
     return parseInt(node.getAttribute(attribute), 10);
 }
 
-// "azo-fire":
-// {
-//     "frame": {"x":2,"y":2,"w":1020,"h":376},
-//     "rotated": false,
-//     "trimmed": true,
-//     "spriteSourceSize": {"x":1,"y":1,"w":1020,"h":376},
-//     "sourceSize": {"w":1024,"h":512},
-//     "pivot": {"x":0.5,"y":0.5}
-// },
-
 var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame)
 {
     if (xSpacing === undefined) { xSpacing = 0; }
@@ -31,24 +21,59 @@ var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame)
 
     var x = 0;
     var y = 0;
+    var cx = 0;
+    var cy = 0;
+    var adjustForTrim = (frame !== undefined && frame.trimmed);
 
-    if (frame && frame.trim)
+    if (adjustForTrim)
     {
-
+        var top = frame.height;
+        var left = frame.width;
     }
 
+    var diff = 0;
+
     for (var i = 0; i < letters.length; i++)
     {
         var node = letters[i];
 
         var charCode = getValue(node, 'id');
+        var gx = getValue(node, 'x');
+        var gy = getValue(node, 'y');
         var gw = getValue(node, 'width');
         var gh = getValue(node, 'height');
 
+        //  Handle frame trim issues
+
+        if (adjustForTrim)
+        {
+            // if (gx + gw > frame.width)
+            // {
+            //     diff = frame.width - (gx + gw);
+                // gw -= diff;
+            // }
+
+            // if (gy + gh > frame.height)
+            // {
+            //     diff = frame.height - (gy + gh);
+                // gh -= diff;
+            // }
+
+            if (gx < left)
+            {
+                left = gx;
+            }
+
+            if (gy < top)
+            {
+                top = gy;
+            }
+        }
+
         data.chars[charCode] =
         {
-            x: x + getValue(node, 'x'),
-            y: y + getValue(node, 'y'),
+            x: gx,
+            y: gy,
             width: gw,
             height: gh,
             centerX: Math.floor(gw / 2),
@@ -61,6 +86,22 @@ var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame)
         };
     }
 
+    if (adjustForTrim && top !== 0 && left !== 0)
+    {
+        // console.log('top and left', top, left, frame.x, frame.y);
+
+        //  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++)

v3/src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js

@@ -64,10 +64,12 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
     }
 
     ctx.save();
-    ctx.translate(src.x - cameraScrollX, src.y - cameraScrollY);
+    ctx.translate((src.x - cameraScrollX) + src.frame.x, (src.y - cameraScrollY) + src.frame.y);
     ctx.rotate(src.rotation);
     ctx.scale(src.scaleX, src.scaleY);
 
+    // ctx.fillStyle = 'rgba(255,0,255,0.5)';
+
     for (var index = 0; index < textLength; ++index)
     {
         charCode = text.charCodeAt(index);
@@ -106,16 +108,23 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
         x *= scale;
         y *= scale;
 
+        xAdvance += glyph.xAdvance;
+        indexCount += 1;
+        lastGlyph = glyph;
+        lastCharCode = charCode;
+
+        //  Nothing to render or a space? Then skip to the next glyph
+        if (glyphW === 0 || glyphH === 0 || charCode === 32)
+        {
+            continue;
+        }
+
         ctx.save();
         ctx.translate(x, y);
         ctx.scale(scale, scale);
+        // ctx.fillRect(0, 0, glyphW, glyphH);
         ctx.drawImage(image, glyphX, glyphY, glyphW, glyphH, 0, 0, glyphW, glyphH);
         ctx.restore();
-        
-        xAdvance += glyph.xAdvance;
-        indexCount += 1;
-        lastGlyph = glyph;
-        lastCharCode = charCode;
     }
 
     ctx.restore();

v3/src/gameobjects/bitmaptext/static/BitmapTextWebGLRenderer.js

@@ -59,7 +59,7 @@ var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPerce
     var renderTarget = gameObject.renderTarget;
 
     tempMatrix.applyITRS(
-        gameObject.x - cameraScrollX, gameObject.y - cameraScrollY, 
+        (srcX - cameraScrollX) + textureFrame.x, (srcY - cameraScrollY) + textureFrame.y, 
         -gameObject.rotation, 
         gameObject.scaleX, gameObject.scaleY
     );
@@ -88,6 +88,7 @@ var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPerce
     for (var index = 0; index < textLength; ++index)
     {
         charCode = text.charCodeAt(index);
+
         if (charCode === 10)
         {
             xAdvance = 0;
@@ -98,6 +99,7 @@ var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPerce
         }
 
         glyph = chars[charCode];
+
         if (!glyph)
         {
             continue;
@@ -116,6 +118,17 @@ var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPerce
             x += (kerningOffset !== undefined) ? kerningOffset : 0;
         }
 
+        xAdvance += glyph.xAdvance;
+        indexCount += 1;
+        lastGlyph = glyph;
+        lastCharCode = charCode;
+
+        //  Nothing to render or a space? Then skip to the next glyph
+        if (glyphW === 0 || glyphH === 0 || charCode === 32)
+        {
+            continue;
+        }
+
         xw = x + glyphW * scale;
         yh = y + glyphH * scale;
         tx0 = x * mva + y * mvc + mve;
@@ -163,11 +176,6 @@ var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPerce
         vertexBuffer[vertexOffset++] = umax;
         vertexBuffer[vertexOffset++] = vmin;
         vertexBuffer[vertexOffset++] = alpha;
-
-        xAdvance += glyph.xAdvance;
-        indexCount += 1;
-        lastGlyph = glyph;
-        lastCharCode = charCode;
     }
 };