[Phaser] Physics ARCADE System

The Arcade system was the first system implemented by Phaser, because it is the most basic and simple one, and will do perfectly for any 'arcade games'. This tutorial will teach you how to initiate the system and use it for some very useful tasks.

Starting the system

Initiating the system is as simple as putting this at the top of the create function:

game.physics.startSystem(Phaser.Physics.ARCADE);

Adding bodies to the system

If you want something to be part of the system, and thus have a body and physics applied, you need to tell it to Arcade yourself.

//INDIVIDUAL SPRITES
game.physics.arcade.enable(sprite1);
game.physics.arcade.enable([sprite2,sprite3,sprite4]);

//FOR GROUPS
//For example, a group that holds all the platforms in a platformer
var platforms = game.add.group();
platforms.enableBody = true;

Remember, only sprites can be made part of the physics system!

Manipulating the bodies

Now, you can do all sorts of things with the bodies. Below are the ones you'll use the most (but not all):

//The player's velocity in either direction in px/s
//maxVelocity and minVelocity are also available, using the same syntax
player.body.velocity.setTo(x, y);

//The player's gravity (downwards on y, to the left on x) in px/s
player.body.gravity.setTo(x, y);

//The player's drag or friction in either direcion in px/s
player.body.drag.setTo(x, y);

//How much the body is bounced off of objects (0 -> 1, in percentages of collisionforce)
player.body.bounce.setTo(x, y);

//Whether or not the body moves when hit by something (boolean)
wall.body.immovable = true;

//Whether or not the body can move out of the world (otherwise it just stops at the edges)
player.body.collideWorldBounds = true;

//Acceleration of the object in either direction in px/s
player.body.acceleration.setTo(x, y);

//Setting an angularVelocity (again, px/s), with angular drag
player.body.allowRotation = true;
player.body.angularVelocity = someRadianValue;
player.body.angularDrag = someRadianValue;

//Some useful READONLY values
//For getting speed, position, previous position, where the body is facing
player.body.speed, player.body.position, player.body.prev, player.body.facing

Checking for collisions!

Now that everything has a body which behaves in its own way, we want to make sure the right things collide with each other, and we do actions based on that at the right time.

For this, we move out of the create function, and into the update function!

First, although you've set the bodies up, nothing seems to hit anything. To make it do so, we need to tell objects to collide with each other.

//Making stuff collide (2 sprites, sprite+group, 2 groups, whatever you like)
//collide(object1, object2, collideCallback, processCallback, callbackContext)
game.physics.arcade.collide(player, platforms, hitPlatform(), isPlatformSolid(), this);

/*collideCallback: the function you specify here is executed every moment the objects collide
processCallback: the function you specify here, must return true for the collision to work. 
		If the function returns false, the two objects will not collide
callbackContext: forget about this, either omit it or set it to 'this'

NOTE: Both the collideCallback and processCallback functions are passed two parameters, the first object and the second respectively.
*/

Simple enough. However, sometimes we want objects that don't collide, but still detect whether or not they overlap. For this we have overlap.

//overlap(object1, object2, collideCallback, processCallback, callbackContext)
game.physics.arcade.overlap(player, coins, collectCoin(), null);

Now that we know that, we can get even more funky, and check what side of a certain object is hitting/touching something. This is for example useful if you want your player to jump only if it's touching something beneath it.

//Is the player touching anything?
player.body.touching
//Was the player just touching anything?
player.body.wasTouching

//(this can be applied to both) Is it touching up/right/down/left?
player.body.touching.up, player.body.touching.right, player.body.touching.down, player.body.touching.left

Useful functions of the Arcade system

Last, but not least, the arcade has some fancy built-in functions to simplify some tasks for you! Below are the ones I use most:

//Accelerate object to certain x and y coordinates
game.physics.arcade.accelerateToXY(object, x, y, speed, maxSpeedX, maxSpeedY);

//Move the object to the x and y coordinates
//maxTime: the maximum amount of time it should take the object to reach the destination,
//the speed is adjusted by the system to achieve this!
game.physics.arcade.moveToXY(object, x, y, speed, maxTime);

//Get the angle between an object and x,y coordinates
game.physics.arcade.angleToXY(object, x, y);

//Get the distance between an object and x,y coordinates
game.physics.arcade.distanceToXY(object, x, y);

//Automatically set x and y velocity according to the angle you want to move in (velocityFromRotation also available)
game.physics.arcade.velocityFromAngle(angle, speed);

//A simple check for if two bodies intersect - it returns a boolean value (true/false)
game.physics.arcade.intersects(body1, body2)