Merge pull request phaserjs#3480 from wtravO/FR3472

Feature Request phaserjs#3472

Author: photonstorm

CHANGELOG.md

@@ -19,6 +19,7 @@ being passed to the simulation. The default value is 1 to remain consistent with
 * HTML5AudioSound.setVolume is a chainable way to set the volume of a single Sound instance.
 * HTML5AudioSound.setSeek is a chainable way to set seek to a point of a single Sound instance.
 * HTML5AudioSound.setLoop is a chainable way to set the loop state of a single Sound instance.
+* BitmapText has a new property `letterSpacing` which accepts a positive or negative number to add / reduce spacing between characters (thanks @wtravO)
 * Matter Physics has two new debug properties: `debugShowJoint` and `debugJointColor`. If defined they will display joints in Matter bodies during the postUpdate debug phase (only if debug is enabled) (thanks @OmarShehata)
 * You can now pass a Sprite Sheet or Canvas as the Texture key to `Tilemap.addTileset` and it will work in WebGL, where-as before it would display a corrupted tilemap. Fix #3407 (thanks @Zykino)
 * Graphics.slice allows you to easily draw a Pacman, or slice of pie shape to a Graphics object.

src/gameobjects/bitmaptext/GetBitmapTextSize.js

@@ -26,6 +26,7 @@ var GetBitmapTextSize = function (src, round)
 
     var chars = src.fontData.chars;
     var lineHeight = src.fontData.lineHeight;
+    var letterSpacing = src.letterSpacing;
 
     var xAdvance = 0;
     var yAdvance = 0;
@@ -98,7 +99,7 @@ var GetBitmapTextSize = function (src, round)
             bh = gh;
         }
 
-        xAdvance += glyph.xAdvance;
+        xAdvance += glyph.xAdvance + letterSpacing;
         indexCount += 1;
         lastGlyph = glyph;
         lastCharCode = charCode;

src/gameobjects/bitmaptext/static/BitmapText.js

@@ -33,6 +33,7 @@ var Render = require('./BitmapTextRender');
  * @property {string} font - [description]
  * @property {string} text - [description]
  * @property {number} fontSize - [description]
+ * @property {number} letterSpacing - Adds/Removes spacing between characters
  */
 
 /**
@@ -129,6 +130,16 @@ var BitmapText = new Class({
          */
         this.fontSize = size || this.fontData.size;
 
+        /**
+         * Adds/Removes spacing between characters
+         * Can be a negative or positive number
+         *
+         * @name Phaser.GameObjects.BitmapText#letterSpacing
+         * @type {number}
+         * @since 3.4.0
+         */
+        this.letterSpacing = 0;
+
         this.setTexture(entry.texture, entry.frame);
         this.setPosition(x, y);
         this.setOrigin(0, 0);

src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js

@@ -34,6 +34,7 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
 
     var chars = src.fontData.chars;
     var lineHeight = src.fontData.lineHeight;
+    var letterSpacing = src.letterSpacing;
 
     var xAdvance = 0;
     var yAdvance = 0;
@@ -140,7 +141,7 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
         x *= scale;
         y *= scale;
 
-        xAdvance += glyph.xAdvance;
+        xAdvance += glyph.xAdvance + letterSpacing;
         indexCount += 1;
         lastGlyph = glyph;
         lastCharCode = charCode;

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -946,6 +946,7 @@ var TextureTintPipeline = new Class({
         var rotation = -bitmapText.rotation;
         var scaleX = bitmapText.scaleX;
         var scaleY = bitmapText.scaleY;
+        var letterSpacing = bitmapText.letterSpacing;
         var sr = Math.sin(rotation);
         var cr = Math.cos(rotation);
         var sra = cr * scaleX;
@@ -1005,7 +1006,7 @@ var TextureTintPipeline = new Class({
                 x += (kerningOffset !== undefined) ? kerningOffset : 0;
             }
 
-            xAdvance += glyph.xAdvance;
+            xAdvance += glyph.xAdvance + letterSpacing;
             indexCount += 1;
             lastGlyph = glyph;
             lastCharCode = charCode;
@@ -1178,6 +1179,7 @@ var TextureTintPipeline = new Class({
         var rotation = -bitmapText.rotation;
         var scaleX = bitmapText.scaleX;
         var scaleY = bitmapText.scaleY;
+        var letterSpacing = bitmapText.letterSpacing;
         var sr = Math.sin(rotation);
         var cr = Math.cos(rotation);
         var sra = cr * scaleX;
@@ -1252,7 +1254,7 @@ var TextureTintPipeline = new Class({
                 x += (kerningOffset !== undefined) ? kerningOffset : 0;
             }
 
-            xAdvance += glyph.xAdvance;
+            xAdvance += glyph.xAdvance + letterSpacing;
             indexCount += 1;
             lastGlyph = glyph;
             lastCharCode = charCode;