Using the keyboard in phaser via game.input.keyboad

In this post I will be outlining a quick demo in which I am moving a sprite around the screen using the keyboard in phaser ce, using an instance of the keyboard handler via game.input. I will also cover the different options on how to work with keyboard input. It is possible to poll a key from an update method, or create an object in which handlers, can be attached, as well as a combination of the two if desired.

1 - What to know

This is a post in which I am writing about some examples that make use of the keyboard class in phaser ce. There is a lot to take in when it comes to the keyboard manager, and there is also much more to write about when it comes to handing input in general.

2 - Phaser keyboard isDown example

One way to make use of keyboard input in phaser is to use the isDown method of the input hander via game.input.keyboard.isDown. This would be used in an update method of a state object, rather than a handler that is fire each time the key is pressed. As such you might end up with something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea', {
// load the sprite sheet
preload : function () {
game.load.spritesheet('cucco', '/img/cuccos_zelda4.png', 20, 20, 10);
},
// create the sprite
create : function () {
var sprite = game.add.sprite(160 - 40, 120 - 40, 'cucco');
sprite.width = 80;
sprite.height = 80;
},
update : (function () {
var f = 0,
lt = new Date(),
rate = 1000 / 12,
// walk animation
walk = function (sprite) {
sprite.frame = f + 2;
if (new Date() - lt > rate) {
f += 1;
if (f == 2) {
f = 0;
}
lt = new Date();
}
};
return function () {
var sprite = game.world.children[0],
k = game.input.keyboard,
w = false;
// A
if (k.isDown(65)) {
sprite.x -= 1;
w = true;
}
// D
if (k.isDown(68)) {
sprite.x += 1;
w = true;
}
// W
if (k.isDown(87)) {
sprite.y -= 1;
w = true;
}
// S
if (k.isDown(83)) {
sprite.y += 1;
w = true;
}
// default sprite to frame 0
sprite.frame = 0;
if (w) {
walk(sprite);
}
};
}
())
}, false, false);

This works okay, but I tend to prefer for this to be pulled into separate event handlers rather than constantly checking the status of keys in an update method.

3 - The addKey method

I prefer the use of the addKey method compared to polling keys with isDown method of the keyboard handler. It allows for me to create an object for a certain key such as the “a” key. I can then attach event handlers to this object that will fire when the key is pressed by using the onHoldCallback of this object that is returned using addKey.

A quick example of these callbacks in use would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea',
{
create : function () {
var k = game.input.keyboard;
// A
var aKey = k.addKey(65);
aKey.onHoldCallback = function (key) {
console.log('holding down key: ' + key.keyCode);
};
aKey.onDown.add(function (key) {
console.log('key ' + key.keyCode + ' is now down');
});
aKey.onUp.add(function (key) {
console.log('key ' + key.keyCode + ' is now up');
});
}
}
);

In addition the object can be pulled in an update method just like the first example with game.input.keyboard.isDown. So I can still handle keyboard input the same way, but also attach handlers.

heres a quick example of that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var game = (function () {
var aKey;
return new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea', {
create : function () {
var k = game.input.keyboard;
// A
aKey = k.addKey(65);
// I can attach handlers like
aKey.onUp.add(function (key) {
console.log('key ' + key.keyCode + ' is up');
});
},
update : function () {
// it can also be polled in an update loop
if (aKey.isDown) {
console.log('key ' + aKey.keyCode + ' is down!');
}
}
});
}
());

So now my above example can also be writen like this:.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
var game = (function () {
var f = 0,
lt = new Date(),
rate = 1000 / 12,
w = false, // walk animation bool
// walk animation
walk = function (sprite) {
sprite.frame = f + 2;
if (new Date() - lt > rate) {
f += 1;
if (f == 2) {
f = 0;
}
lt = new Date();
}
};
return new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea', {
// load the sprite sheet
preload : function () {
game.load.spritesheet('cucco', '/img/cuccos_zelda4.png', 20, 20, 10);
},
// create the sprite
create : function () {
var sprite = game.add.sprite(160 - 40, 120 - 40, 'cucco');
sprite.width = 80;
sprite.height = 80;
var k = game.input.keyboard;
// A
k.addKey(65).onHoldCallback = function (key) {
sprite.x -= 1;
w = true;
};
// D
k.addKey(68).onHoldCallback = function (key) {
sprite.x += 1;
w = true;
};
k.addKey(87).onHoldCallback = function (key) {
sprite.y -= 1;
w = true;
};
k.addKey(83).onHoldCallback = function (key) {
sprite.y += 1;
w = true;
};
// set walk bool back to false on any keyup event
k.onUpCallback = function () {
w = false;
}
},
update : (function () {
return function () {
var sprite = game.world.children[0];
// default sprite to frame 0
sprite.frame = 0;
if (w) {
walk(sprite);
}
};
}
())
}, false, false);
}
());

4 - Conclusion

Phaser is great at handling Keyboard input, as long as I know how to go about using what is provided for it. I hope you found these examples helpful, if so be sure to check out my many other posts on phaser.