Merge pull request #753 from Akurn/feat/new-text-styles

Author: samme

src/gameobjects/Text.js

@@ -35,7 +35,8 @@
  * @param {boolean} [style.wordWrap=false] - Indicates if word wrap should be used.
  * @param {number} [style.wordWrapWidth=100] - The width in pixels at which text will wrap.
  * @param {number} [style.maxLines=0] - The maximum number of lines to be shown for wrapped text.
- * @param {number} [style.tabs=0] - The size (in pixels) of the tabs, for when text includes tab characters. 0 disables. Can be an array of varying tab sizes, one per tab stop.
+ * @param {string} [style.letterSpacing='0px'] - Additional spacing between letters in CSS [length]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length} units.
+ * @param {number|array} [style.tabs=0] - The size (in pixels) of the tabs, for when text includes tab characters. 0 disables. Can be an array of varying tab sizes, one per tab stop.
  * @param {object} [style.fontProperties=null] - `ascent`, `descent`, and `fontSize` lengths for a given style. You can get these from {@link Phaser.Text#determineFontProperties}.
  * @param {string} [style.testString='|MÂÉQfjq_'] - The text to use to measure the font width and height.
  */
@@ -315,6 +316,7 @@ Phaser.Text.prototype.setShadow = function (x, y, color, blur, shadowStroke, sha
  * @param {boolean} [style.wordWrap=false] - Indicates if word wrap should be used.
  * @param {number} [style.wordWrapWidth=100] - The width in pixels at which text will wrap.
  * @param {number} [style.maxLines=0] - The maximum number of lines to be shown for wrapped text.
+ * @param {string} [style.letterSpacing='0px'] - Additional spacing between letters in CSS [length]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length} units.
  * @param {number|array} [style.tabs=0] - The size (in pixels) of the tabs, for when text includes tab characters. 0 disables. Can be an array of varying tab sizes, one per tab stop.
  * @param {object} [style.fontProperties=null] - `ascent`, `descent`, and `fontSize` lengths for a given style. You can get these from {@link Phaser.Text#determineFontProperties}.
  * @param {string} [style.testString='|MÂÉQfjq_'] - The text to use to measure the font width and height.
@@ -337,6 +339,7 @@ Phaser.Text.prototype.setStyle = function (style, update)
     newStyle.wordWrap = style.wordWrap || false;
     newStyle.wordWrapWidth = style.wordWrapWidth || 100;
     newStyle.maxLines = style.maxLines || 0;
+    newStyle.letterSpacing = style.letterSpacing || '0px';
     newStyle.shadowOffsetX = style.shadowOffsetX || 0;
     newStyle.shadowOffsetY = style.shadowOffsetY || 0;
     newStyle.shadowColor = style.shadowColor || 'rgba(0,0,0,0)';
@@ -440,7 +443,7 @@ Phaser.Text.prototype.updateText = function ()
             //  Simple layout (no tabs)
             var lineWidth = this.style.strokeThickness + this.padding.x;
 
-            if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0)
+            if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0 || this.letterSpacing !== '0px')
             {
                 lineWidth += this.measureLine(lines[i]);
             }
@@ -469,7 +472,7 @@ Phaser.Text.prototype.updateText = function ()
                 {
                     var section = 0;
 
-                    if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0)
+                    if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0 || this.letterSpacing !== '0px')
                     {
                         section = this.measureLine(line[c]);
                     }
@@ -491,7 +494,7 @@ Phaser.Text.prototype.updateText = function ()
                 for (var c = 0; c < line.length; c++)
                 {
                     //  How far to the next tab?
-                    if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0)
+                    if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0 || this.letterSpacing !== '0px')
                     {
                         lineWidth += this.measureLine(line[c]);
                     }
@@ -548,6 +551,7 @@ Phaser.Text.prototype.updateText = function ()
     this.context.font = this.style.font;
     this.context.strokeStyle = this.style.stroke;
     this.context.textBaseline = 'alphabetic';
+    this.context.letterSpacing = this.style.letterSpacing;
 
     this.context.lineWidth = this.style.strokeThickness;
     this.context.lineCap = 'round';
@@ -768,6 +772,11 @@ Phaser.Text.prototype.measureLine = function (line)
             this.updateShadow(this.style.shadowFill);
         }
 
+        if (this.letterSpacing && this.letterSpacing !== '0px')
+        {
+            this.context.letterSpacing = this.letterSpacing;
+        }
+
         lineLength += this.context.measureText(letter).width;
 
         this._charCount++;
@@ -2087,6 +2096,29 @@ Object.defineProperty(Phaser.Text.prototype, 'lineSpacing', {
 
 });
 
+/**
+ * @name Phaser.Text#letterSpacing
+ * @property {string} letterSpacing - Additional spacing between letters in CSS [length]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length} units.
+ * Uses [CanvasRedneringContext2D.letterSpacing]{@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing} property.
+ */
+Object.defineProperty(Phaser.Text.prototype, 'letterSpacing', {
+
+    get: function ()
+    {
+        return this.style.letterSpacing;
+    },
+
+    set: function (value)
+    {
+        if (value !== this.style.letterSpacing)
+        {
+            this.style.letterSpacing = value;
+            this.dirty = true;
+        }
+    }
+
+});
+
 /**
  * @name Phaser.Text#shadowOffsetX
  * @property {number} shadowOffsetX - The shadowOffsetX value in pixels. This is how far offset horizontally the shadow effect will be.

typescript/phaser.d.ts

@@ -5140,6 +5140,7 @@ declare module Phaser {
         wordWrap?: boolean;
         wordWrapWidth?: number;
         maxLines?: number;
+        letterSpacing?: string;
         shadowOffsetX?: number;
         shadowOffsetY?: number;
         shadowColor?: string;
@@ -5197,6 +5198,7 @@ declare module Phaser {
         game: Phaser.Game;
         input: Phaser.InputHandler;
         inputEnabled: boolean;
+        letterSpacing: string;
         lineSpacing: number;
         name: string;
         padding: Phaser.Point;