I am facing a problem: I am trying to repeat an input form but when I click on the form, it just disappears

Phaser 3
1

Hello everyone! I am facing a problem: I am trying to repeat an input form like here
https://codepen.io/rexrainbow/pen/GaxqLZ?editors=0011,
but when I click on the form, it just disappears, instead of accepting the input values. As I understand it, the onTextChanged callback does not work, but it is not clear why it does not work and why the form disappears. Tell me, what could be the matter?
This is my code:

export default class BootScene extends Phaser.Scene { 
    constructor() {
        super('Boot')
    }
    preload() {
        var url;
        url = 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbbcodetextplugin.min.js';
        this.load.plugin('rexbbcodetextplugin', url, true);

        url = 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexteditplugin.min.js';
        this.load.plugin('rextexteditplugin', url, true);
    }
    create() {
        this.createForm()
    }
    createForm() {
        var printText = this.add.rexBBCodeText(100, 100, 'abc', {
                color: 'yellow',
                fontSize: '24px',
                fixedWidth: 200,
                fixedHeight: 80,
                backgroundColor: '#333333',
                valign: 'center'
            })
            .setOrigin(0)
            .setInteractive()

        printText.on('pointerdown', function() {
            var config = {
                onOpen: function(textObject, text) {
                    console.log('Open text editor', printText);
                },
                onTextChanged: function(textObject, text) {
                    textObject.text = text;
                    console.log(`Text: ${text}`, printText);
                },
                onClose: function(textObject) {
                    console.log('Close text editor', printText);
                },
                selectAll: true
            }
            this.plugins.get('rextexteditplugin').edit(printText, config);
        }, this);
    }
}

config:

var config = {
    type: Phaser.CANVAS,
    width: 500,
    height: 800,
    scene: scenes,
    scale: {
        mode: Phaser.Scale.FIT, 
        autoCenter: Phaser.Scale.CENTER_BOTH 
    },
    dom: {
        createContainer: true
    },
    physics: {
        default: 'arcade',
        arcade: {
            fps: 60
        }
    }
};

image
image1125×512 5.59 KB

2

Did you already looked at the JavaScript console in your browser? There might be an error message as soon as the form disappears.

You could also create a codepen with your exact scene code. If this is working in the codepen, maybe it’s something else regarding your game code.

Another hint, but I don’t think that this is the problem:
In your onOpen function there is a parameter text, which is missing in the codepen at onOpen.

Best regards
Nick

3

Hey! I completely repeated the form code from https://codepen.io/rexrainbow/pen/GaxqLZ?editors=0011, the console in the browser gives no errors

4

Here’s the problem:

5

Add ‘parent’ parameter into game config, for example , this demo, line 127.
Without this parameter, Input text object won’t append to DOM correctly, imo.

1 Like