Phaser V3 is out now! There are lots of new features and improvements. In this article i am going to cover basics of Phaser 3.

First of all, Phaser is not using Pixi rendering engine anymore. Phaser V3 uses it’s own rendering engine. If you want to learn more about it’s new renderer, you can take a look to renderer’s source code from here. I haven’t do any performance benchmarks between Phaser CE and Phaser 3 but i am sure about it’s performance.

Phaser  3 Tutorial

Before getting starting with Phaser 3, i checked it’s documentation, there are some weird changes. First of all, Phaser 3 is now supporting 3D cameras using 2d objects. Second, groups are a little bit changed. I couldn’t see setAll() and forEach() methods in groups.

Starting a Game

We still use new Phaser.Game(), but we are going to use only one parameter with Phaser 3.

var game = new Phaser.Game({
    type: Phaser.AUTO,
    width: 400,
    height: 400,
    parent: "game"
});

game.scene.add('PlayScene', PlayScene, true);

One parameter of Game() function is an object, we put all required attributes into this object and pass it to Game() function.

Loading & Rendering Assets

Actually, loading asses and rendering them is almost same in Phaser 3.

Loading asset:

preload: function(){
    this.load.image('star', 'assets/fullStar.png');
},

Rendering an image:

create: function(){
    this.add.image(0, 0, 'star');
},

But result is not same:

As you may remember, (0,0) was bottom left corner of screen, it still is. But image anchors are changed.

If you run same code with Phaser CE, you will see that whole image. But now we can only see half of image. So let’s move it a little bit.

create: function(){
    this.add.sprite(128, 128, 'star');
},

Aannd result:

That’s it. Ok, it’s a good feature, but i still need some time to get used to it.

Physics

You can start Physics using configuration object:

var game = new Phaser.Game({
    type: Phaser.AUTO,
    width: 400,
    height: 400,
    parent: "game",
    physics: {
        default: 'arcade',
        arcade: {
            gravity: 20,
            debug: true
        }
    }
});

Creating new sprite is a little bit changed, you can initialize a new sprite using active physics model’s factory. In this example I am going to use arcade factory to create a new sprite:

create: function(){
    this.physics.world.setBounds(0, 0, 400, 400);
    var star = this.physics.add.sprite(128, 128, 'star');

    star.setGravity(40, 100);
    star.setBounce(1).setCollideWorldBounds(true);
},

Now you can see bouncing image on your screen.

Oh i also created an issue about resizing arcade sprites.

Conclusion:

Phaser is a great framework to create html5 games, with version 3 it will be better. Today, i am going to focus on cameras. After figuring out them, write a new article about cameras in Phaser 3.

Do not forget to subscribe my Youtube and Twitch channel. I am making games on Twitch, every friday 21:00 (GMT+3)