Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Game Development with Phaser!
You have completed Game Development with Phaser!
Preview
Discover how to add keyboard movement to the paddle in our breakout game, allowing people to interact with it.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the last video,
we learned about grouping in Phaser and
0:00
used it to add all the bricks to our game.
0:04
In this video, we're going to learn about
adding keyboard movement to our project.
0:06
We'll be focusing on adding
keyboard movement to the paddle.
0:11
But before we do that,
let's make a small change to our game.
0:15
I've noticed the bricks aren't
quite centered on the screen.
0:19
If you look at the right
side of the bricks,
0:23
the space there looks wider
than on the left side.
0:26
Let's change this in the code.
0:29
Luckily for us, our bricks are in
a group that share one configuration.
0:32
So this will be very easy to fix.
0:37
In the setXY object,
let's change the xValue from 115 to 155.
0:40
Cool.
0:47
Let's save the file and
go back to the browser.
0:48
Nice, this looks much better.
0:52
Okay, let's go back to talking about
keyboard movement for our paddle.
0:54
In order to achieve this, we're going
to use multiple scene functions.
0:59
So we're going to create objects
in the create function and
1:04
update these objects in
the update function.
1:08
We can do this by making variables
outside of all of our functions,
1:11
then in the create function,
we'll assign a value to that variable and
1:15
we'll update that variable
in the update function.
1:20
Let's start by creating two variables
under the Phaser.Game instance on line 16.
1:24
Let's scroll up to the top of the file,
then under the Phaser.Game instance on
1:31
line 16, let's make some space by pressing
enter and we'll write let paddle and
1:36
this will be for our paddle object and
beneath that we'll write let keys,
1:42
and this will be for
our keyboard input object.
1:46
In the Create function, let's assign the
paddle variable to our paddle on line 31.
1:50
Let's place the cursor in front of this
line and simply write paddle equals.
1:56
Beneath this line, let's create
an object for our keyboard inputs.
2:02
We're going to write keys equals
this.input.keyboard.createCursorKeys and
2:06
we'll use parentheses and
close with a semicolon.
2:14
Make sure the spelling on
the last method is correct.
2:19
It's not createCursorsKeys or
createCursorKey, it's createCursorKeys,
2:23
any incorrect spelling will
cause this not to work properly.
2:30
This is a helper function
provided by phaser that
2:35
adds multiple keyboard
inputs to our game at once.
2:39
These inputs are all for arrow keys,
so up, down, left and right,
2:43
the space bar and the shift key.
2:47
If we weren't using
the createCursorKeys helper function,
2:50
we'd have to add each key
individually to our code like this.
2:54
If we wanted to add the space bar,
2:59
we could make some space in the codes
by pressing the return key a few times.
3:01
And then we'll have to write
this.input.keyboard.addKey
3:05
with parentheses, and
then put a string of space.
3:11
If the createCursorKeys
helper method did not exist,
3:16
we'd have to add six lines of code like
this in order to have access to all
3:20
the keyboard keys we need for this game.
3:25
But because it does exist,
we don't have to do this.
3:28
So we can get rid of line 33.
3:32
Let's scroll down to our update function,
open it up and
3:35
write some code to check if the left and
right arrow keys are being pressed.
3:39
We can do this using if statements.
3:44
The first one will be
if(keys.left.isDown) and
3:46
then we're going to open curly braces and
3:51
we'll add a comment to
say move paddle left.
3:54
We can write the logic for this later.
3:58
Let's do the same for the right key.
4:01
We're gonna do another if statement and
say if(keys.right.isDown),
4:03
then we'll open up curly brackets again,
4:09
then add a comment to
say move paddle right.
4:12
Remember, the update function
runs on every frame, so
4:16
it's always checking if
the keys are being pressed.
4:20
As you can see,
4:23
the keyboard properties that phaser
provides are really easy to read.
4:24
isDown simply refers to if
the key is being pressed, so
4:29
if it's been pushed down by the user,
and isUP is the opposite of isDown,
4:33
which refers to if the key
is not been pressed.
4:38
To move the paddle,
we'll need to change it's X position.
4:42
We can do this by using the X
property on the paddle object.
4:47
Let's do that for our first if block.
4:51
We're going to remove the comment and
write paddle.x = paddle.x- 5.
4:53
This will continuously move
the paddle 5 pixels to the left.
5:01
We'll do the same in our if statement for
the right key.
5:06
Let's remove the comment and
write paddle.x = paddle.x + 5.
5:09
This of course will move
the paddle 5 pixels to the right.
5:17
Now let's test this in the browser.
5:22
As you can see, when the left button is
pressed, the paddle moves to the left,
5:25
and when the right button is pressed,
the paddle moves to the right.
5:30
But there's a problem.
5:35
If we hold the right key for a long time,
5:36
the paddle will keep moving right
until it goes off the screen.
5:39
This isn't good.
5:43
We actually want the paddle to stop moving
when it reaches the edge of the screen.
5:45
The easiest way to fix this will be for us
at boundaries to the edges of the screen.
5:50
And luckily for us, this functionality is
provided by phases, arcade physics engine.
5:57
Let's do this in the next video.
6:03
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up