RexUI Textbox - No response on clicking the

Phaser 3
1

Hello, I am trying to create a typing text box using the RexUI plugin and based on this demo here: https://codepen.io/rexrainbow/pen/MzGoJv

However, I encountered a problem where clicking on the text box doesn’t skip the typing or go to the next page. I followed most of the demo except I used built-in text rather than BBCode text and did not include an icon.

Here is my code

var content = "Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development.";

class DialogScene extends Phaser.Scene {

    constructor() {
        super({ key: 'dialogScene' });
    }

    preload() {
    /...
    }

    create() {
        this.createTextBox(this, 0, 400).start(content, 50);
    }

    createTextBox(scene, x, y) {
        var txtConfig = {
            //fontFamily: 'Courier',
            fontSize: '32px',
            backgroundColor: '#ff00ff',
            strokeThickness: 0,
            align: 'left', 
            padding: {
                left: 20,
                right: 0,
                top: 20,
                bottom: 0,
            },
            maxLines: 3,
            fixedWidth: 800,
            fixedHeight: 200,
            wordWrap: {
                width: 780,
            },
        }

        var txt = scene.add.text(x, y, content, txtConfig);
        var textBox = scene.rexUI.add.textBox({
            x: x,
            y: y,
            width: 800,
            //height: undefined,
            orientation: 0,
            text: txt,
            
        })
            

        textBox
        .setInteractive()
        .on('pointerdown', function () {
            if (this.isTyping) {
                this.stop(true);
            } else if (!this.isLastPage) {
                this.typeNextPage();
            } 
        }, textBox)
        

        return textBox;
    }

}

export default DialogScene;
2

You miss textBox.layout() method, see this demo, line 71.

textBox will resize and put to right place, after textBox.layout().

3

It is working now, thank you for the help!