Phaser3 Game Objects to create in-game pause dialog with text and button?

Phaser 3
1

What is the best way to do a short in-game dialog, so on top of the game scene? It should show some short text “Your inventory” or “Back to main menu YES / NO” or something like that.

I couldn’t find any like this in the examples, so how to combine Phaser3 Game Objects like graphics, containers etc. into a dialog like this.

In another thread someone suggested just starting a different scene, but then the current game scene area is not visible anymore. Currently I have this code below and it works, but I would like to hear some feedback. Maybe there are different game objects that I could use, or there is some better way to do this?

class MyDialogObj extends Phaser.GameObjects.Container {

	constructor(scene) {

		// pass parameters to the class we are extending, call super
		super(scene);
		
		// add to scene
		scene.add.existing(this);
		
		// other variables
		this._scene = scene; // keep scene reference

		// create dialog panel
		var rect = scene.add.rectangle(0, 0, 480, 320, 0x000000, 0.5);
		rect.setOrigin(0, 0);
		
		
		// create contents of panel
		this._dialog_txt = scene.add.bitmapText(240, 144, "fontwhite", "test 123 dialog", 40);
		this._dialog_txt.setOrigin(0.5).setCenterAlign();

		// add all to container
		this.add(rect);
		this.add(this._icon);
		this.add(this._dialog_txt);

		// invisible for now
		this.setVisible(false);
		this.setDepth(50); // always on top
		
		// center horizontally
		this.x = parseInt((GAME_WIDTH - 480) / 2);
	}

	doShowDialog(txt) {
		// set text message
		this._dialog_txt.text = txt;
		
		// place offscreen and set close button invisible
		this.y = -512;

		// now container is visible but off screen
		this.setVisible(true);

		// pop everything into screen
		var timeline = this._scene.tweens.timeline({
			ease: "Power2",
			tweens: [{          //  drop container from top of screen
				targets: this,
				y: 160,        // center vertically (640 - 320) / 2
				duration: 500,
				offset: 0
			}]
		});
	}

	doCloseDialog() {
		
		// remove from screen
		var timeline = this._scene.tweens.timeline({
			ease: "Power2",
			tweens: [{        //  drop container from top of screen
				targets: this,
				y: -512,
				duration: 500,
				offset: 0
			}]
		});

		// continue scene
		this._scene.closeDialogCallBack();
	}
}

And in the main game scene I create a new dialog object, and there is a callback function to open and close the diaglog and continue/unpause the game, like so:

var GameScene = new Phaser.Class({

	Extends: Phaser.Scene,

	initialize:
	//..
	create: function ()
	{
		this._dialog = new DialogObj(this);
		// etc.
	},

	closeDialogCallBack: function() {
		// un-pause game etc.
	},
2

A seperate scene is the way to go! If you use scene.launch() instead of scene.start() the game scene wont shut down.

If it´s a pause menu you would probably want to use scene.pause() and scene.resume() on your game scene to actually pause/unpause your game.