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', {
var sprite = game.add.sprite(160 - 40, 120 - 40, 'cucco');
sprite.width = 80;
sprite.height = 80;
},
update : (function () {
var f = 0,
lt = newDate(),
rate = 1000 / 12,
// walk animation
walk = function (sprite) {
sprite.frame = f + 2;
if (newDate() - lt > rate) {
f += 1;
if (f == 2) {
f = 0;
}
lt = newDate();
}
};
returnfunction () {
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.
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 () {
returnfunction () {
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.