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

Talking about Mass Attack game, Game development, HTML5, Javascript and Phaser.

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. 
var game;

var gameOptions = {
    maxDiameter: 50,
    ballGrowingSpeed: 0.5,
    balanceFriction: 400
}

window.onload = function(){
    game = new Phaser.Game(320, 480, Phaser.CANVAS);
    game.state.add("PlayGame", playGame, true);
}

var playGame = function (){};

playGame.prototype = {
    preload: function (){
        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;
		game.stage.disableVisibilityChange = true;
        game.stage.backgroundColor = 0x222222;
        this.load.image("ball", "ball.png");
        this.load.image("balance", "balance.png");
    },
    create: function (){
        this.growBall = false;
        this.canPlay = true;
        this.balance = [];
        for(var i = 0; i < 2; i++){
            this.balance[i] = game.add.group();
            this.balance[i].weight = 0;
            var balanceSprite = game.add.sprite(game.width / 2 * i, 240, "balance");
            balanceSprite.anchor.set(0, 0.5);
            this.balance[i].add(balanceSprite);
        }
        game.input.onDown.add(this.placeBall, this);
        game.input.onUp.add(this.dropBall, this);
    },
    placeBall: function(e){
        if(!this.growBall && this.canPlay){
            this.ball = game.add.sprite(e.x, 0, "ball");
            this.ball.anchor.set(0.5);
    		this.ball.width = 1;
            this.ball.height = 1;
            this.ball.balance = Math.floor(this.ball.x / (game.width / 2));
            this.balance[this.ball.balance].add(this.ball);
            this.ball.y = 30 - this.balance[this.ball.balance].y
    		this.growBall = true;
        }
    },
    dropBall: function(){
        if(this.growBall){
            this.growBall = false;
            this.canPlay = false;
            var ballDestination = game.height / 2 - this.balance[this.ball.balance].getChildAt(0).height / 2 - this.ball.height / 2;
            this.balance[this.ball.balance].weight += (4 / 3) * Math.PI * Math.pow((this.ball.width / 2), 3);
            var ballTween = game.add.tween(this.ball).to({
				y: ballDestination
			}, 2000, Phaser.Easing.Bounce.Out, true);
            ballTween.onComplete.add(this.adjustBalances, this)
        }
    },
    adjustBalances: function(){
        var weightDifference = (this.balance[0].weight - this.balance[1].weight) / gameOptions.balanceFriction;
        var maxDifference = game.height / 3;
        if(weightDifference > maxDifference){
			weightDifference =maxDifference;
		}
		if(weightDifference < -maxDifference){
			weightDifference = -maxDifference;
		}
        for(var i = 0; i < 2; i++){
            var balanceTween = game.add.tween(this.balance[i]).to({
                y: weightDifference - (2 * i * weightDifference)
            }, 2000, Phaser.Easing.Quadratic.Out, true);
            balanceTween.onComplete.add(function(){
                this.canPlay = true;
            }, this);
        }
    },
    update: function(){
        if(this.growBall && this.ball.width < gameOptions.maxDiameter){
            this.ball.width += gameOptions.ballGrowingSpeed;
            this.ball.height += gameOptions.ballGrowingSpeed;
        }
    }
}
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 
var game;
var _this;

var gameOptions = {
    maxDiameter: 1,
    ballGrowingSpeed: 0.015,
    balanceFriction: 400
}

var config = {
    type: Phaser.CANVAS,
    width: 320,
    height: 480
};

window.onload = function(){
    game = new Phaser.Game(config);
    game.scene.add("PlayGame", playGame, true);
}

var playGame = function (){
    _this = this;
};

playGame.prototype = {
    preload: function (){
        var camera = _this.cameras.add(0, 0, game.width, game.height);
        camera.setBackgroundColor("0x222222");
        _this.load.image("ball", "ball.png");
        _this.load.image("balance", "balance.png");
    },
    create: function (){
        _this.growBall = false;
        _this.canPlay = true;
        _this.balance = [];
        for(var i = 0; i < 2; i++){
            _this.balance[i] = _this.add.group();
            _this.balance[i].weight = 0;
            _this.balance[i].saveYPosition = 0;
            var balanceSprite = _this.add.sprite(config.width / 2 * i, 240, "balance");
            balanceSprite.setOrigin(0, 0.5);
            _this.balance[i].add(balanceSprite);
        }
        _this.input.events.on("POINTER_DOWN_EVENT", _this.placeBall);
        _this.input.events.on("POINTER_UP_EVENT", _this.dropBall);
    },
    placeBall: function(e){
        if(!_this.growBall && _this.canPlay){
            var side = Math.floor(e.x / (config.width / 2));
            _this.ball = _this.add.sprite(e.x, 30, "ball");
            _this.ball.balance = side;
    		_this.ball.scaleX = 0.1;
            _this.ball.scaleY = 0.1;
            _this.balance[_this.ball.balance].add(_this.ball);
    		_this.growBall = true;
        }
    },
    dropBall: function(){
        if(_this.growBall){
            _this.growBall = false;
            _this.canPlay = false;
            var ballDestination =  config.height / 2 + _this.balance[_this.ball.balance].saveYPosition - _this.balance[_this.ball.balance].children.entries[0].height / 2 - _this.ball.height * _this.ball.scaleY / 2;
            _this.balance[_this.ball.balance].weight += (4 / 3) * Math.PI * Math.pow((_this.ball.width * _this.ball.scaleX / 2), 3);
            var ballTween = _this.tweens.add({
                targets: _this.ball,
                y: ballDestination,
                duration: 2000,
                ease: "Bounce",
                onComplete: _this.adjustBalances
            });
        }
    },
    adjustBalances: function(){
        var weightDifference = (_this.balance[0].weight - _this.balance[1].weight) / gameOptions.balanceFriction;
        var maxDifference = config.height / 3;
        if(weightDifference > maxDifference){
			weightDifference = maxDifference;
		}
		if(weightDifference < -maxDifference){
			weightDifference = -maxDifference;
		}
        for(var i = 0; i < 2; i++){
            var difference = - _this.balance[i].saveYPosition + weightDifference - (2 * i * weightDifference)
            _this.balance[i].saveYPosition += difference;
            var balanceTween = _this.tweens.add({
                targets: _this.balance[i].children.entries,
                y: "+=" + difference.toString(),
                duration: 2000,
                ease: "Quad",
                onComplete: function(){
                    _this.canPlay = true;
                }
            })
        }
    },
    update: function(){
        if(_this.growBall && _this.ball.scaleX < gameOptions.maxDiameter){
            _this.ball.scaleX += gameOptions.ballGrowingSpeed;
            _this.ball.scaleY += gameOptions.ballGrowingSpeed;
        }
    }
}
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.