phaserTextBoxExample.js

import Phaser from 'phaser';

// Animations
import { createPlayerAnims } from '../anims/playerAnims';

// TextBox constants 
const sampleText = 'hey there my guy';
const COLOR_PRIMARY = 0x352b42;
const COLOR_LIGHT = 0xb8b5b9;
const COLOR_DARK = 0x260e04;

class GameScene extends Phaser.Scene {
  constructor() {
    super('GameScene')
  }

  preload() {
    this.player;
    this.npc;
    this.cursors;
    this.keys;
    this.textBox;
  }

  create() {
    // Initialize keys
    const { LEFT, RIGHT, UP, DOWN, ENTER, W, A, S, D } = Phaser.Input.Keyboard.KeyCodes;
    this.keys = this.input.keyboard.addKeys({
      left: LEFT,
      right: RIGHT,
      up: UP,
      down: DOWN,
      enter: ENTER,
      w: W,
      a: A,
      s: S,
      d: D,
    });

    // Initialize animations
    createPlayerAnims(this.anims);
  
    // Add test NPC
    this.npc = this.physics.add.staticSprite(230, 100, 'npc');

    // Player
    this.player = this.physics.add.sprite(200, 120, 'player');
    this.physics.add.collider(this.player, this.npc, this.talkToNPC, null, this);
    this.cameras.main.startFollow(this.player, true);

    // Cursors
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    const { keys } = this;
    const speed = 120;
    this.player.body.setVelocity(0);

    // Player movement
    if (keys.left.isDown || keys.a.isDown) {
      this.player.body.setVelocityX(-speed);
    } else if (keys.right.isDown || keys.d.isDown) {
      this.player.body.setVelocityX(speed);
    }

    if (keys.up.isDown || keys.w.isDown) {
      this.player.body.setVelocityY(-speed);
    } else if (keys.down.isDown || keys.s.isDown) {
      this.player.body.setVelocityY(speed);
    }

    this.player.body.velocity.normalize().scale(speed);

    // Player animations
    if (keys.up.isDown || keys.w.isDown) {
      this.player.anims.play('player-up', true);
    } else if (keys.down.isDown || keys.s.isDown) {
      this.player.anims.play('player-down', true);
    } else if (keys.left.isDown || keys.a.isDown) {
      this.player.anims.play('player-left', true);
    } else if (keys.right.isDown || keys.d.isDown) {
      this.player.anims.play('player-right', true);
    } else {
      this.player.anims.stop();
    }

    // Press enter to close textbox
    if (this.textBox && keys.enter.isDown) {
      console.log('Destroying textBox ', this.textBox);
      this.textBox.destroy();
    }
  }

  talkToNPC() {
    // Add a textbox
    this.textBox = createTextBox(this, 50, 150, {
      wrapWidth: 200,
      fixedWidth: 200,
      fixedHeight: 35,
    })
    .start(sampleText, 20);
  }
}

const GetValue = Phaser.Utils.Objects.GetValue;
var createTextBox = function (scene, x, y, config) {
    var wrapWidth = GetValue(config, 'wrapWidth', 0);
    var fixedWidth = GetValue(config, 'fixedWidth', 0);
    var fixedHeight = GetValue(config, 'fixedHeight', 0);
    var 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
        .setInteractive()
        .on('pointerdown', function () {
            var icon = this.getElement('action').setVisible(false);
            this.resetChildVisibleState(icon);
            if (this.isTyping) {
                this.stop(true);
            } else {
                this.typeNextPage();
            }
        }, textBox)
        .on('pageend', function () {
            if (this.isLastPage) {
                return;
            }

            var icon = this.getElement('action').setVisible(true);
            this.resetChildVisibleState(icon);
            icon.y -= 30;
            var tween = scene.tweens.add({
                targets: icon,
                y: '+=30', // '+=100'
                ease: 'Bounce', // 'Cubic', 'Elastic', 'Bounce', 'Back'
                duration: 500,
                repeat: 0, // -1: infinity
                yoyo: false
            });
        }, textBox)
    //.on('type', function () {
    //})

    return textBox;
}

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

export default GameScene;