Phaser 3 - loading screen
This entry is part 3 of 4 in the series Exploring Phaser 3

The first real thing a user faces is the loading screen, therefore showing a progress bar is essential. The approach of loading the assets and displaying the progress is not much different from Phaser 2. The structure with the two scenes “boot” and “preload” works also for Phaser 3, but the underlying API of the file interaction has been changed a lot. In the following, I’ll show an example, how to organize the assets and to display a simple progress bar.

Continue reading

The following small prefab is a modified Phaser.Text Object. It enables the input, changes the mouse cursor and will open a provided link in a new window, if the text will be clicked. Popup-blocker seem to block this, because the new window is no direct result of the “click”.

class Link extends Phaser.Text {
    constructor(game, x, y, text, url, style) {
        super(game, x, y, text, style);
        this.url = url;
        this._oldFill = null;

        //add custom objects to the game
        this.game.add.existing(this);
        //Activate inpute events
        this.inputEnabled = true;
        //Change hover cursor
        this.input.useHandCursor = true;
        //Listen to the events
        this.events.onInputOver.add(this.onOver,this);
        this.events.onInputOut.add(this.onOut, this);
        this.events.onInputDown.add(this.onClick, this);
    }

    onOver() {
        this._oldFill = this.fill;
        this.fill = "blue";
    }

    onOut() {
        this.fill = this._oldFill;
    }

    onClick() {
        window.open(this.url, "_blank");
    }
}

Easy to use:

let someLink = new Link(this.game, 0, 0, "Link text", "http://example.com", {});