1. Starting the system
2. Adding bodies to the...
3. Manipulating the bod...
4. Checking for collisi...
5. Useful functions of ...
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:
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)