RexUI function, how to show / side pop-up dialog?

Phaser 3
1

I wrote an function for rexUI Pop-up Dialog with default config with a few methods …

How do I write the show / hide and get current Dialog status methods ??

I went thru the list of methods and only found destroy function scaleDownDestroy() from the example codes.

I call them in scene using

   this.rexDialog = new myDialog(this)
    this.rexDialog.create(this, this.AREA1.x, this.AREA1.y, "AREA1", "Title1", "AREA1 111 111")
    this.rexDialog.create(this, this.AREA2.x, this.AREA2.y, "AREA2", "Title2", "AREA2 222 222")

myDialog.js

import { Dialog } from 'phaser3-rex-plugins/templates/ui/ui-components.js';

export function myDialog(scene)  {

    this.scene = scene

    this.create = function(scene,x,y,name,title, msg)  {
    let config = {
        x: x,
        y: y,
        width: 200,
        height: 20,
        name: name,
        background: this.scene.rexUI.add.roundRectangle(0, 0, 20, 20, 20, 0x1565c0),
        content: this.scene.add.text(0, 0, msg, {fontSize: '16px'}),
        title: this.scene.add.text(0, 0, title, {fontSize: '14px'}),
        expand: {
            title: false,
            content: false,
            description: true,
            choices: true,
            actions: false,
        },
    
        align: {
            title: 'center',
            content: 'center',
            description: 'center',
            choices: 'center',
            actions: 'center',
        }
      }

    // Internal object creation
    this.dialogObj = new Dialog(scene, config);
    this.scene.add.existing(this.dialogObj);
    console.log("this.dialogObj: ", this.dialogObj)

    this.dialogObj
        .layout()
        .popUp(1000);

    }
    
    this.show = function() {
        console.log("show: " );

    }

    this.hide = function() {
        console.log("hide: " )
        this.dialogObj.scaleDownDestroy(100);
    }

    this.status = function() {
       
    }


}
2

If you need destroy ui only, might try ui.destroy().
If you need reuse this dialog later, might try ui.setVisible(false).

It seems that ui document lacks of descriptions about destroying, will add them later.

1 Like
3

Thanks, I did a V toggle key

  this.keyV.on('down', ()=>{
      if (  this.rexDialog.status() === true ) {
        this.rexDialog.hide();
      } else {
        this.rexDialog.show();
      }
     }, this );

function methods :

   this.show = function() {
        console.log("show: " );
        this.dialogObj.setVisible(true)
    }

    this.hide = function() {
        console.log("hide: " )
        this.dialogObj.setVisible(false)
    }

    this.status = function() {
       return this.dialogObj.visible
    }