Stop player from moving when using textbox

Phaser 3
1

I want the players ability to move the player change when a textbox is used. I dont want to pause the game entirely.

I have used a conditional to change the players acceleration in the past but I’m unsure if thats an inefficent way to handle stopping the player from moving.

Ive been using the rexUI plugin, with everything working as well as I can. II’m unsure how I should delete the textbox after its done, I’m only hiding the textbox without really deleting it. (or as far as I can tell)

Heres the code:

const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;

let 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.`;

export default class NewTextBoxScene extends Phaser.Scene {
    constructor() {
        super("NewTextBoxScene")
}

preload() {
    this.load.scenePlugin({
        key: 'rexuiplugin',
        url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
        sceneKey: 'rexUI'
    });

    this.load.image('nextPage', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/assets/images/arrow-down-left.png');
}

create() {
    createTextBox(this, 100, 100, {
        wrapWidth: 500,
    })
    .start(content, 10);
    }
}

const GetValue = Phaser.Utils.Objects.GetValue;
let createTextBox = function (scene, x, y, config) {
let wrapWidth = GetValue(config, 'wrapWidth', 0);
let fixedWidth = GetValue(config, 'fixedWidth', 0);
let fixedHeight = GetValue(config, 'fixedHeight', 0);
let textBox = scene.rexUI.add.textBox({
    x: x,
    y: y,

    background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 20, COLOR_PRIMARY)
        .setStrokeStyle(2, COLOR_LIGHT),

    icon: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 20, COLOR_DARK),

    // text: getBuiltInText(scene, wrapWidth, fixedWidth, fixedHeight),
    text: getBBcodeText(scene, wrapWidth, fixedWidth, fixedHeight),

    action: scene.add.image(0, 0, 'nextPage').setTint(COLOR_LIGHT).setVisible(false),

    space: {
        left: 20,
        right: 20,
        top: 20,
        bottom: 20,
        icon: 10,
        text: 10,
    }
})
    .setOrigin(0)
    .layout();

textBox.on('type', function () {
    console.log("is typing...!");
    let icon = this.getElement('action').setVisible(false);
    this.resetChildVisibleState(icon);
})

/// when page ends
textBox.on('pageend', function () {

    if (this.isLastPage) {
        textBox.on('pointerdown', function () {

            let action = this.getElement('action').setVisible(false);
            let bg = this.getElement('background').setVisible(false);
            let icon = this.getElement('icon').setVisible(false);
            let text = this.getElement('text').setVisible(false);

            this.resetChildVisibleState(icon);
            this.resetChildVisibleState(action);
            this.resetChildVisibleState(bg);
            this.resetChildVisibleState(text);
        })
    }
    console.log("page end!");
    let icon = this.getElement('action').setVisible(true);
    this.resetChildVisibleState(icon);
    textBox
        .setInteractive()
        .on('pointerdown', function () {
            console.log("key pressed");
            if (this.isTyping) {
                this.stop(true)
            } else {
                this.typeNextPage()
            }
        })
    })

return textBox;
}

let getBBcodeText = function (scene, wrapWidth, fixedWidth, fixedHeight) {
return scene.rexUI.add.BBCodeText(0, 0, '', {
    fixedWidth: fixedWidth,
    fixedHeight: fixedHeight,
    fontSize: '20px',
    wrap: {
        mode: 'word',
        width: wrapWidth
    },
    maxLines: 3
})
}

Any help will be much appreciated.

Edit: I’ve just realised that code did not have my player code. I’m using a physicsgroup to handle the player, where I can start the player at my chosen position from Tiled. Im having trouble finding an efficient to most of these problems, so I’ve broken the code into different scenes, so I can learn about them by dismantling things slowly.

2

createTextBox(...) method will return a textbox instance,

// To create textbox instance
var textBox = createTextBox(...);

// To destroy this textbox instance
textBox.destroy();
2 Likes
3

Thanks for your help and work with the rex ui plugins!