Phaser CE Vs Phaser 3 Beta – Compare the two engines with the latest version of “Mass Attack” HTML5 game

You are a die hard Phaser fan, you should know on september 11 Phaser 3 Beta has been released.

Although its seems quite far from being finished and there’s almost no docs available, I wanted to put my hands on it and try to create a prototype of an old game (it was released 10 years ago) called Mass Attack which I already showed you in the posts Create a Flash game like Mass Attack and Create an HTML5 game like Mass Attack with Phaser just using tweens (well, almost).

I rewrote the prototype using Phaser CE v2.8.7 and Phaser v3.0.0, and this is probably the first Phaser 3 working prototype.

Let’s start with the 2.8.7 version:

Click-touch and hold to create a sphere, release to drop the sphere, watch it bounce on the balance and move it accordingly.

The source code is not commented yet buy it’s pretty straight-forward especially if you read the other posts of the series.

What about Phaser 3 version? Here it is:

Although the game looks the same, I had to make various changes to the code to make it work. I tried to keep Phaser 3 code as close as possible to Phaser CE version, so probably it’s not that optimized, moreover there’s almost no API docs, anyway let me list the various differences:

GAME CONSTRUCTOR: the constructor now has only one argument, which is an object which allow faster customization.

SCALING: I wasn’t able to scale the game. Also for the background color, I had to use a camera. Maybe I missed something.

GAME STATES: now they are called scenes, allow faster setup although I almost did not use this feature.

THIS INSTANCE: I wasn’t able to keep track of this in my callback functions, so I needed to declare a _this variable where to store it.

INPUT LISTENERS: the names changed, but all in all they look the same to me.

TWEENS: really smart way to define them, it was the feature I liked the most so far.

GROUPS: they was a pain. I couldn’t move them, I couldn’t tween their x or y position, had to do a lot of workaround and silly math to create the balance movement. Maybe I missed something

SPRITES: I wasn’t able to change width and height on the fly, so I had to make the game work scaling the sprites rather than resizing them.

Have a look at the source code, don’t be scared to see some changes, here are 10 tips that will help you when you are about to learn a new language

There’s still a lot to, but it’s quite more than the usual “Hello World”, if you have suggestions to improve the prototype, you are welcome, meanwhile download the source code of both prototypes.