Phaser 3 Physics<\/h1>\n

With the release of Phaser 3 physics now have a lot to offer. Whether you are a beginner at Phaser or an old hand at earlier versions and want to move into Phaser 3, learning the basics of at least one Physics engine will make your games much easier to build.\u00a0 One of the best things about Phaser is the way it implements physics. Before physics engines,\u00a0programmers had to use a lot of complicated\u00a0trigonometry\u00a0formulas. I still love those formulas, but they can be quite time-consuming to look up and write for each and every game.<\/p>\n

Config Objects<\/h2>\n

One of the changes to Phaser 3 is the use of config objects vs. parameters in the constructor. It is a style I will probably adopt in my future code. With parameters, we would write code like this:<\/p>\n

var myHero=new Hero(\"Bob\",\"fly\",10);\r\n\r\nclass Hero\r\n{\r\n\tconstructor(name,superPower,speed)\r\n\t{\r\n\r\n\t}\r\n}<\/pre>\n
The problem with that is sometimes I was adding parameters later in the game or app sometimes up to 10 parameters. Often times it made more sense to group some of those parameters together, and I had to go and change a lot of code that was already being called.<\/p>\n
With a configuration\u00a0object works like this:<\/p>\n
var myHero=new Hero(\"name\":\"Bob\",\"superPower\":\"fly\",\"speed\":10);\r\n\r\nclass Hero\r\n{\r\n\tconstructor(params)\r\n\t{\r\n\t\tthis.name=params.name;\r\n\t\tthis.superPower=params.superPower;\r\n\t\tthis.speed=params.speed;\r\n\t}\r\n}<\/pre>\n
The advantage is that we can just add a new property to the params object, as many as we like without having to go back and change the code.<\/p>\n
Game config objects<\/h2>\n
Here is a basic config object for setting up a Phaser 3 game. Then that object is passed into the new Phaser Game Object<\/p>\n
var config = {\r\n    type: Phaser.AUTO,\r\n    width: 480,\r\n    height: 640,\r\n    parent: 'phaser-game',\r\n    scene: [SceneMain]\r\n};\r\n\r\nvar game = new Phaser.Game(config);<\/pre>\n
Physics config objects<\/h2>\n
Phaser 3 uses a physics config object to set up your game to use an engine. In this example, we are going the use arcade physics.\u00a0 We set the default\u00a0property to “arcade”\u00a0<\/span>and then make an object inside the config object called arcade and give it a property of “debug” set to true.\u00a0 I’ll explain later what the debug does.<\/p>\n
var physicsConfig = {\r\n    default: 'arcade',\r\n    arcade: {\r\n        debug: true\r\n    }\r\n}<\/pre>\n
Now use put that\u00a0physicsConfig object in a property called physics inside the game config object<\/p>\n
var config = {\r\n    type: Phaser.AUTO,\r\n    width: 480,\r\n    height: 640,\r\n    parent: 'phaser-game',\r\n    physics: physicsConfig,\r\n    scene: [SceneMain]\r\n};<\/pre>\n
Setting up the Bullets<\/h2>\n
First, we need an image to be our bullet and preload it.<\/p>\n
preload() {\r\n        this.load.image(\"bullet\", \"images\/bullet.png\");\r\n    }<\/pre>\n
Next, we need a group to hold the bullets. Instead of a normal group,\u00a0 we will be using a physics group.\u00a0 The code below adds a physics group with the defaultKey being the key we used in the preload function above. The maxSize creates 10 bullets ready to be used.<\/p>\n
this.bullets = this.physics.add.group({\r\n            defaultKey: 'bullet',\r\n            maxSize: 10\r\n        });<\/pre>\n
Shooting the bullets<\/h2>\n
Now the bullets are sitting in the group, but we need to activate them and give them velocity\u00a0to be effective. Let’s just activate a bullet if the canvas is clicked anywhere. We can also set the position\u00a0of the bullet in the place that is clicked. First set up a click listener to the scene.<\/p>\n
this.input.on('pointerdown', this.shoot, this);<\/pre>\n
Then we set up the shot function with a pointer being the sole parameter. The pointer is the mouse on the computer, and well..\u00a0whatever the equivalent object is on the phone. In any case, it has information about where on the canvas was clicked in the form of an x and a y property.<\/p>\n
shoot(pointer) {\r\n        var bullet = this.bullets.get(pointer.x, pointer.y);\r\n        if (bullet) {\r\n            bullet.setActive(true);\r\n            bullet.setVisible(true);\r\n            bullet.body.velocity.y = -200;\r\n        }\r\n    }<\/pre>\n
The first step in the code above is to get an instance of the first available bullet in the group. We do this with the this.bullets.get() and pass in the x and the y position.\u00a0 If we have run out of bullets, meaning more than 10 bullets have been fired then a null is returned. We have no bullet ready! So before running any code on the bullet object we first check to see if it exists. If it does, we set the active property and visible property to true.<\/p>\n
The Body<\/h3>\n
The body is where all the information relating to a sprite’s physics is stored. Inside the body is a lot of cool things like gravity and velocity. Velocity is what is going to be used in this example.\u00a0 The velocity object has an X and a Y property and by setting this we can make the bullet go in any direction with many variations by setting the x and y to different speeds. In this case, we just want the bullet to go up, so we set the bullet.body.velocity.y to -200.<\/p>\n
Debugging<\/h3>\n
Right now you will notice a border around your bullet and a green line out of the top. The square border is the hit area where any collisions will take place. The green line is showing velocity. This makes it easier to debug when the bullet seems to miss a spaceship or monster. You can turn this off by setting arcade.debug to false.<\/p>\n
var physicsConfig = {\r\n    default: 'arcade',\r\n    arcade: {\r\n        debug: false\r\n    }\r\n}<\/pre>\n
\u00a0<\/h3>\n