RexUI text input

Phaser 3
1

Hello, I am trying to create a input field based on this demo (https://codepen.io/rexrainbow/pen/YbvwBw).
the only difference is that I try to create it directly within the create function. I have the following code below. I get a error on the this.rexUI.edit line. “TypeError: Cannot read property ‘edit’ of undefined” I assuming it is because this refers to v2field and not the scene, but whatever I try I can not seem to get it work.

preload()

{

    this.load.scenePlugin({

        key: 'rexuiplugin',

        url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',

        sceneKey: 'rexUI'

    });     

}

create() {  

    var v2 = '';

    var v2Field = this.rexUI.add.label({

        orientation: 'x',

        background: this.rexUI.add.roundRectangle(0, 0, 10, 10, 10,0xffffff),

        text: this.rexUI.add.BBCodeText(0, 0, v2, { color: '#000000', fixedWidth: 75, fixedHeight: 24, valign: 'center' }),

        space: { top: 5, bottom: 5, left: 5, right: 5 }

    })

    .setInteractive()

    .on('pointerdown', function () {

        var config = {

            onTextChanged: function(textObject, text) {

                v2= text;

                textObject.text = text;

            }

        };

        this.rexUI.edit(v2Field.getElement('text'), config);

    });

}
2

Try to add the context(scope) at the last line

Origin:

        this.rexUI.edit(v2Field.getElement('text'), config);

    });

Modified:

        this.rexUI.edit(v2Field.getElement('text'), config);

    }, this);

In your code, this in this.rexUI.edit is the event emitter itself, which is equal to v2Field object.

1 Like
3

thanks this works fine!