Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Game Development with Phaser

Well done!

You have completed Game Development with Phaser!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Adding Paddle Movement

6:05 with Richard Oliver Bray

Discover how to add keyboard movement to the paddle in our breakout game, allowing people to interact with it.

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