(click anywhere to close)
OPEN MENU

[Phaser] Input

category: Games | course: Phaser | difficulty:

In Phaser, there is of course a built-in support for all different input systems. There are basically three groups:mouse, keyboard (only computers)and touchscreen (mobile, iPad, etc.).

Methods available in all groups

Every input object has the following events you can listen for, or properties you can access:

//If either just pushed down, let go (pushed up), tapped or being held: call the doSomething function
game.input.onDown.add(doSomething,this);
game.input.onUp.add(doSomething,this);
game.input.onTap.add(doSomething,this);
game.input.onHold.add(doSomething,this);

//These things can also be done without event listeners: just an if-statement checking if true or false
//But, the difference here is, that it doesn't check an activity (like letting go), but just a state (being up)
game.input.isDown
game.input.isUp

//Last but not least, this points to the most recently active pointer (mouse or touch event)
game.input.activePointer
//And this points to that pointer's x and y coordinates
game.input.x, game.input.y

Mouse only

There's really only one thing specific to the mouse, and that is:

//Get the mousePointer (you can apply the methods described above afer it, of course)
game.input.mousePointer

//Get its x and y
game.input.mousePointer.x
game.input.mousePoiner.y

Touch only

We have 10 fingers. And what's so useful about that information, you say? Phaser also has 10 pointers, reserved for touchevents.

We havegame.input.pointer1 all the way togame.input.pointer10objects. Phaser will start 2 of them (pointer1, pointer2) by default, but if you want to make the user able to use more than 2 fingers, you can start more of them.

Pointers are always trying to fill in the pointer object with the smallest number, which means that when you for example have two fingers placed on the screen(pointer1+pointer2), and you place a third one, it gets the pointer3 object.

However, if you then remove the second finger, pointer2 will be left empty and any finger you'll put on after that will first use the pointer2 object.

To add more than those standard two pointers (the mousePointer excluded), you simply dogame.input.addPointer();as many times as you want (well, with a maximum of 10).

Keyboard only

The keyboard of course offers the largest array of possible inputs, but most of the times all you really need are the arrow keys. Phaser has a fast way to get them working quickly:

//In the create function
var cursors = game.input.keyboard.createCursorKeys();

//In the update function
if (cursors.left.isDown) {
    //move player left
} else if (cursors.right.isDown) {
    //move player right
}
if(cursors.up.isDown) {
	//make the player jump
} else if (cursors.down.isDown) {
	//make the player crouch
}

However, if you want more, this is the way to do it:

//The keyboard can be accessed through
game.input.keyboard

//Then, any method you call on it, needs to be passed which key we're listening for
//Pause the game when P is pressed
if(game.input.keyboard.isDown(Phaser.Keyboard.P)) {
	//pause game
}

//Start new level when SPACE is pressed
if(game.input.keyboard.isDOwn(Phaser.Keyboard.SPACE)) {
	//start new level
}
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)