Text gameobjects: Word wrap doesn't take into account letter spacing

[Stever1388]

Version

• Phaser Version: 3.86.0

• Operating system: Windows

• Browser: Chrome

Description

If you set the new letter spacing property to a Phaser.GameObject.Text object that also has word wrap, the wrapping doesn't take into account the new letter spacing, which means the object can become wider than the desired max word wrap width.

Example Test Code

import Phaser from 'phaser';

export default class LetterSpacingWordWrapIssue extends Phaser.Scene {
  create() {
    const longString = 'This is very long text that should wrap to another line but when letter spacing is applied, the wrapping doesn\'t get adjusted.';
    const style = {
      align: 'center',
      color: '#ffffff',
      wordWrap: {
        width: 250
      }
    };

    // add a rect behind the text to show where the bounds should be
    const rect = this.add.rectangle(this.scale.width / 4, this.scale.height / 4, 250, 250, 0xffffff, 0).setStrokeStyle(2, 0xff0000);
    this.text = this.add.text(rect.x, rect.y, longString, style).setOrigin(0.5);
    rect.setSize(250, this.text.height);

    // add a rect behind the text to show where the bounds should be
    const rectForLetterSpacing = this.add.rectangle(this.scale.width / 4 * 3, this.scale.height / 4, 250, 250, 0xffffff, 0).setStrokeStyle(2, 0xff0000);
    this.textWithLetterSpacing = this.add.text(rectForLetterSpacing.x, rectForLetterSpacing.y, longString, style).setOrigin(0.5)
      .setLetterSpacing(10); // note: letter spacing is missing from the style config
    rectForLetterSpacing.setSize(250, this.textWithLetterSpacing.height);

    // add a rect behind the text to show where the bounds should be
    const rectForLetterSpacingNeg = this.add.rectangle(this.scale.width / 4, this.scale.height / 4 * 3, 250, 250, 0xffffff, 0).setStrokeStyle(2, 0xff0000);
    this.textWithLetterSpacingNeg = this.add.text(rectForLetterSpacingNeg.x, rectForLetterSpacingNeg.y, longString, style).setOrigin(0.5)
      .setLetterSpacing(-2); // note: letter spacing is missing from the style config
    rectForLetterSpacingNeg.setSize(250, this.textWithLetterSpacingNeg.height);
  }
}

Result:

Additional Information

The Phaser.Types.GameOjbects.Text.TextStyle doesn't have a letterSpacing property in it, but it does have the lineSpacing property.

[zekeatchan]

Hi @Stever1388. Thanks for submitting this issue. We have fixed this and pushed it to the master branch. It will be part of the next release. Do test it out and let us know if you encounter any issues.