Phaser 3 - dynamic lighing header
This entry is part 4 of 4 in the series Exploring Phaser 3

One completely new feature of Phaser 3 is the dynamic lighting layer. By adding light sources and marking sprites to receive lights it is possible to light them up. With Phaser 3.6.0 the default rendering path is forward lighting. The deferred lighting path is not ready yet. The shader exists but, somehow the pipeline file is missing(?).
Continue reading

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

This entry is part 1 of 4 in the series Exploring Phaser 3

Phaser is one of the most powerful 2D game engines for JavaScript. Many games have been published with Phaser 2. The development of Phaser 3 started long ago and now the first alpha is released. Phaser 3 includes many new techniques and features. Lately (11.08.17) the lightning layer with deferred and forward render path is added.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;
        //Activate inpute events
        this.inputEnabled = true;
        //Change hover cursor
        this.input.useHandCursor = true;
        //Listen to the events,this);, this);, this);

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

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

    onClick() {, "_blank");

Easy to use:

let someLink = new Link(, 0, 0, "Link text", "", {});


Coptergame is a game I liked very much during school. So I made a HTML5 remake of  this game. This game is my second game with Phaser.js.
The player controls a helicopter, that is pulled down with gravity and upwards with the space bar or a mouse click. The quest is to fly through a randomly generated endless level and to avoid touching any block.