how to solve this issue while typing text is correct after is not correct? - phaser-framework

Question

how to solve this issue while typing text is correct after is not correct. seen in images
After
While Typing
var textInput = this.add.sprite(400, 380, 'textinput').setScale(0.6, 0.6);
const text = this.add.text(0, 0, '', { fixedWidth: 200, fixedHeight: 36 })
text.setOrigin(0.5, 0.5)
text.setInteractive().on('pointerdown', () => {
this.rexUI.edit(text)
})
Phaser.Display.Align.In.Center(text, textInput);

Answer 1

The problem is the parameter { fixedWidth: 200, fixedHeight: 36 }. Since those fixed sizes are used for the calculation, and by default the text is aligned top-right.
If you remove that parameter the text should be align in the center of the sprite. Alternativly you could try setting the alignment of the text, with the function setAlgin (link to documentation), but this only will change the horizontal alignment, not the vertical one.
var config = {
type: Phaser.AUTO,
width: 400,
height: 160,
scene: {
create
}
};
function create () {
let rect1 = this.add.rectangle(150, 80, 100, 50, 0xffffff)
.setOrigin(0);
let rect2 = this.add.rectangle(150, 10, 100, 50, 0xffffff)
.setOrigin(0);
let text1 = this.add.text(0, 160, 'TEXT 1 TEXT 1 TEXT 1')
.setBackgroundColor('#ff00ff');
let text2 = this.add.text(0, 160, 'TEXT 2 TEXT 2', { fixedWidth: 200, fixedHeight: 36 })
.setBackgroundColor('#ff00ff')
.setAlign('center');
Phaser.Display.Align.In.Center(text1, rect1)
Phaser.Display.Align.In.Center(text2, rect2)
}
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>

Answer 2

Using Padding { fixedWidth: 200, fixedHeight: 40, padding: 8, })