Setting TextStyle with TextMetrics doesn't apply TextMetrics

[michalfialadev]

Version

• Phaser Version:
  3.24.1

• Operating system:
  win10

• Browser:
  any

Description

EDIT: half of this issue is my limited Phaser knowledge. Sorry about that. I suggest to read it anyways, and perhaps a workaround i suggest at the end of the report can be made into a 'feature request' instead (thanks to @Antriel )

After a textfield is created and we want to set a different TextStyle, specifically with different TextMetrics, using myText.setStyle(myCompoundStyle) sets all the styling (like color,..) except the TextMetrics object/values - these stay the same. Setting TextMetrics during textfield initialization works as expected.

Example Test Code

Im pasting off the top of my head (can contain typos). Following code assumes that the textfield has been created prior:

const newStyle: Phaser.Types.GameObjects.Text.TextStyle = {
     color: "#f3b700", 
     metrics: { 
          ascent: 23, 
          descent: 7, 
          fontSize: 29
     }
}
myTextField.setStyle(newStyle);

The above does set the color, but not the new TextMetrics object values.

What seems like even stranger behavior (tested on: Firefox, Chrome), using and modifying existing example at:
https://labs.phaser.io/edit.html?src=src/game%20objects\text\text%20metrics.js

Replace second half of code starting with function create() ... with:

function create() 
{
    var config1 = {
        x: 100,
        y: 100,
        text: 'Phaser III',
        style: {
            fontSize: '48px',
            fontFamily: 'Arial',
            color: '#ffffff',
            metrics: {
                ascent: 45,
                descent: 10,
                fontSize: 55
            }
        }
    };

    var text = this.make.text(config1);

    // traces: { ascent: 45, descent: 10, fontSize: 55 }
    console.log(text.getTextMetrics());

    // crate custom textmetrics to set dynamically
    const myStyle = {metrics:{ascent:90,descent:30,fontSize:90}}

    // try #1: using Spread
    text.setStyle({...text.style,...myStyle}); 
    // traces: { ascent: 41.8828125, descent: 10.1015625, fontSize: 51.984375 }
    console.log(text.getTextMetrics());

    // try #2: using setStyle
    text.setStyle(myStyle);
    // traces: { ascent: 41.8828125, descent: 10.1015625, fontSize: 51.984375 }
    console.log(text.getTextMetrics());
}

EDIT1:
I was made to understand current 'best practice' solution to this: the fact that myText.setStyle recalculates the style metrics, but myText.style.setStyle does not:

if (myStyle.metrics) {
   myText.style.setStyle(myStyle, false, false);
   myText.style.metrics = myStyle.metrics;
   myText.updateText();
}
else {
   myText.setStyle(myStyle);
}

Feature Request
I'd like to change this report to be a feature request, that if a text style that is being set contains metrics object, it will not recalculate text metrics, but use those provided. Sorry for the contrived nature of this report.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.