Custom class for popups

Phaser 3
1

Hello all,

I want to create a custom class that will hold all the popups of my game, there are 3 - 4 types of popups(Different UI) in my game.

What is the best way to create a custom popup class.

Thanks in Advance

2

Hey there, I have a similar approach in my adventure game. I use a class, let’s call it PopupManager, which handles all the popups in the game. I registered it as a scene plugin, so it can be called from any scene easily, for example with this.popupManager (in scene context). I also have different Popup types, so I created a class for every type. Like this:

class PopupManager extends Phaser.Plugins.ScenePlugin {
    constructor (scene, pluginManager) {
        this.popups = []
    }

    /**
     * type can be "typeA" or "typeB"
     * options can be an object, for example text, bgColor etc.
     */
    add (type, options) {
        let newPopup = null

        switch (type) {
            case 'typeA':
                newPopup = new TypeA(options)
                break
            case 'typeB':
                newPopup = new TypeB(options)
        }

        this.popups.push(newPopup)
    }
}

class TypeA () {
    constructor (options) {
        // Do something awesome
        // Render a box with text or anything
    }
}

class TypeB () {
    constructor (options) {
        // Do something awesome
        // Render a box with text or anything
    }
}

Maybe this approach helps :slight_smile:

3 Likes
3

Thanks Nick for your prompt reply.

Your solution looks good but I came across another solution to do this and now I am confused if it’s a good solution or not.

import 'phaser'

export default class Popups {
    constructor(scene) {
        this.scene = scene;
        this.addPopup1();
        this.addPopup2();

    }

    addPopup1() {
        // Do something awesome
        // Render a box with text or anything
        this.popup1Container = this.scene.add.container(0, 0);
        this.popup1Container.visible = false;
    }

    addPopup2() {
        // Do something awesome
        // Render a box with text or anything
        this.popup2Container = this.scene.add.container(0, 0);
        this.popup2Container.visible = false;
    }

    showHidePopup(show, popupType) {

        this.popup1Container.visible = !this.popup.visible;

    }

}

Can you please explain what’s the difference between above 2 approaches.

4

Well they’re both pretty similar, I guess :slight_smile:
In my approach I use two independent type classes, which could work out as containers, like in your examples. With this I have way less lines in one JS file (in my PopupManager class). But your approach is also totally fine.