Skip to content

Commit 3894e34

Browse files
committed
Add letterSpacing option to Text
Which utilises the new Canvas2D letterSpacing property. Adds as a style parameter and instance property.
1 parent 5dd5e69 commit 3894e34

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

src/gameobjects/Text.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
* @param {boolean} [style.wordWrap=false] - Indicates if word wrap should be used.
3636
* @param {number} [style.wordWrapWidth=100] - The width in pixels at which text will wrap.
3737
* @param {number} [style.maxLines=0] - The maximum number of lines to be shown for wrapped text.
38+
* @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.
3839
* @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.
3940
* @param {object} [style.fontProperties=null] - `ascent`, `descent`, and `fontSize` lengths for a given style. You can get these from {@link Phaser.Text#determineFontProperties}.
4041
* @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
315316
* @param {boolean} [style.wordWrap=false] - Indicates if word wrap should be used.
316317
* @param {number} [style.wordWrapWidth=100] - The width in pixels at which text will wrap.
317318
* @param {number} [style.maxLines=0] - The maximum number of lines to be shown for wrapped text.
319+
* @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.
318320
* @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.
319321
* @param {object} [style.fontProperties=null] - `ascent`, `descent`, and `fontSize` lengths for a given style. You can get these from {@link Phaser.Text#determineFontProperties}.
320322
* @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)
337339
newStyle.wordWrap = style.wordWrap || false;
338340
newStyle.wordWrapWidth = style.wordWrapWidth || 100;
339341
newStyle.maxLines = style.maxLines || 0;
342+
newStyle.letterSpacing = style.letterSpacing || '0px';
340343
newStyle.shadowOffsetX = style.shadowOffsetX || 0;
341344
newStyle.shadowOffsetY = style.shadowOffsetY || 0;
342345
newStyle.shadowColor = style.shadowColor || 'rgba(0,0,0,0)';
@@ -548,6 +551,7 @@ Phaser.Text.prototype.updateText = function ()
548551
this.context.font = this.style.font;
549552
this.context.strokeStyle = this.style.stroke;
550553
this.context.textBaseline = 'alphabetic';
554+
this.context.letterSpacing = this.style.letterSpacing;
551555

552556
this.context.lineWidth = this.style.strokeThickness;
553557
this.context.lineCap = 'round';
@@ -2087,6 +2091,29 @@ Object.defineProperty(Phaser.Text.prototype, 'lineSpacing', {
20872091

20882092
});
20892093

2094+
/**
2095+
* @name Phaser.Text#letterSpacing
2096+
* @property {number} letterSpacing - Additional spacing between letters in CSS [length]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length} units.
2097+
* Uses [CanvasRedneringContext2D.letterSpacing]{@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing} property.
2098+
*/
2099+
Object.defineProperty(Phaser.Text.prototype, 'letterSpacing', {
2100+
2101+
get: function ()
2102+
{
2103+
return this.style.letterSpacing;
2104+
},
2105+
2106+
set: function (value)
2107+
{
2108+
if (value !== this.style.letterSpacing)
2109+
{
2110+
this.style.letterSpacing = value;
2111+
this.dirty = true;
2112+
}
2113+
}
2114+
2115+
});
2116+
20902117
/**
20912118
* @name Phaser.Text#shadowOffsetX
20922119
* @property {number} shadowOffsetX - The shadowOffsetX value in pixels. This is how far offset horizontally the shadow effect will be.

0 commit comments

Comments
 (0)