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

user_18659172 0
Viewed 23

how to solve this issue while typing text is correct after is not correct. seen in images

After After Image While Typing

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);
phaser-framework
2 Answers

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>

user_16792860

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

user_186591720
Related