diff --git a/src/gameobjects/Text.js b/src/gameobjects/Text.js index 4b5391ce3..055715611 100644 --- a/src/gameobjects/Text.js +++ b/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. diff --git a/typescript/phaser.d.ts b/typescript/phaser.d.ts index 00d98f757..3b6c9ee0a 100644 --- a/typescript/phaser.d.ts +++ b/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;