Phaser 3 - RexUI - TextArea and BBCodeText

Using the RexPlugins TextArea and BBCodeText with some overflow behavior

by ragesoft

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
<div id="main">

</div>

JavaScript

const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;
const fontStyles = {
    
    'button':{
        fontSize: '20px',
        fontStyle: '',
        fill: '#cccac6',
      	underline:{
        	thickness: 2,
    		} 
    },
}

class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }
    
 preload() { 
        this.load.scenePlugin({
            key: 'rexuiplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
            sceneKey: 'rexUI'
        });      
    }
    
	create(){
  	var txt = "Hi there. This is my breaking text! Maybe it has to do with some linebreaks or spacings... See loooooonnnnnggg loooooonnnnnggger words. i cant find the correct setting"
  		TextBlock( this, 10, 40, 200, 100, txt);
  		TextBlock( this, 220, 40, 200, 100, txt, true);
     	TextBlock( this, 10, 160, 200, 280, txt);
     	TextBlock( this, 220, 160, 200, 280, txt, true);
      this.add.text( 10, 10, "With Phaser-Text");
      this.add.text( 220, 10, "With Rex-BBCodeText");
      
  }

}


var TextBlock = function( scene, x, y, width, height, text, useBB ){

        let style = fontStyles.button;
        style = {
        	...style,
          backgroundColor: '#555',
          wrap: {
                mode: 'word',
                width: width
            },
            stroke: 'red',
            strokeThickness: 1,
            wordWrap:  { 
                    width: width, 
                    useAdvancedWrap: true 
            }
        }

        // set position to fit top-left corner
        let txtObject = useBB?scene.rexUI.add.BBCodeText( 0, 0, null, style):
        	scene.add.text(0, 0, text, style);
        
        
        let config = {
            x: (x||0) + width / 2,
            y: (y||0) + height / 2,
            width: width,
            height: height,
            text: txtObject,
            slider:...