Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Understand how to use Phaser's Arcade physics to add collisions to physics bodies in our game, particularly between the paddle and the ball.
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,
0:00
we prevented our paddle from going off
screen by adding some physics to it.
0:01
We also gave the ball some movement.
0:06
In this video, we're going to add
some collisions between the ball and
0:09
the paddle.
0:12
This is actually really easy to do
with Phaser In our creates function
0:13
below line 46 where we
set the ball bounce.
0:18
Let's add the following code or
press ENTER then
0:22
type this .physics.add.collider();.
0:27
The collider method in phaser allows us
to add collisions between two objects.
0:33
Now, we can pass the two objects we want
to collide as arguments in the collider
0:38
method.
0:42
Since we want the ball to collide with the
paddle, we can pass them in as arguments.
0:43
So in the parentheses on line 47,
let's add the code (ball,paddle).
0:49
And that's it.
0:56
Let's see what this does in the browser.
0:57
When we press space to launch the ball,
the ball hits the top screen boundary,
1:00
then bounces back and it hits the paddle.
1:04
But it doesn't bounce
after it hits the paddle.
1:08
In fact, it pushes the paddle down.
1:10
This is because the physics objects in
phaser are set to moveable by default,
1:13
which means an object can
be moved by another object.
1:18
This is usually okay.
1:23
But for our case, we don't want
the paddle to be moved by the ball.
1:25
Let's fix this in the code in
our create function below line
1:29
41 where we set the paddle
world collider bounds.
1:34
Let's write this code,
will go to the end of line 41.
1:38
Press Enter and
right paddle.setImmovable().
1:42
The set immovable method
will make sure the paddle
1:49
doesn't move when it gets hit by the ball.
1:52
Let's test this in the browser.
1:56
Now when we launch the ball, it goes up,
1:58
hits the upper screen boundary,
comes down and hits the paddle, perfect.
2:00
However, if we move the paddle
out of the path of the ball,
2:06
the ball will hit the lower screen
boundary and bounce back up.
2:10
Ideally, we want the ball to move
past the lower screen boundary and
2:14
disappear from the screen.
2:18
This again is really
easy to do with Phaser.
2:20
Let's go ahead and do that in the code.
2:24
In our create function,
below line 48 where we add the collider
2:27
between the ball and the paddle,
let's add this code.
2:32
We're going to press enter and write
2:36
this.physics.world.checkcollision.down=
false.
2:41
This will make sure the ball doesn't
collide with the lower boundary.
2:50
Make sure you've got the spelling
correct on the word check collision.
2:55
Before we test this in the browser,
let's make a few more changes.
2:59
We're going to add some
physics to the bricks so
3:03
that the ball can collide with them.
3:06
Let's scroll down to where
the brick groups are created.
3:09
On line 51, before the word add, let's
add the word physics followed by a dot.
3:12
Then on line 53, let's hit ENTER and
add the property immovable.
3:18
This is a Boolean value, which will set
to true, and this will make the bricks
3:24
immovable, just like the set and
movable method on the paddle.
3:29
Now let's add some code so
that the pool can collide with the bricks.
3:33
At the beginning of line 51,
let's add the code
3:37
const brickGroup = this
will assign our groups
3:42
to a variable then just
below line 60 we'll add
3:47
the code this.physics.add.collider().
3:52
And inside the parentheses we'll give
it two arguments ball and brickGroup.
3:57
Now the ball should be
colliding with the bricks.
4:03
Let's test this in the browser.
4:06
When we launch the ball you'll
see that it hits a brick.
4:09
Then bounces back and can hit the paddle.
4:13
If we move the paddle out of the way,
4:16
the ball will go through the bottom
of the screen and disappear.
4:18
Perfect,our game is
starting to take shape, but
4:22
when we need to make the bricks disappear
once they've been hit by the ball.
4:25
The ball also needs to move at a 45-degree
angle when it's been hit by the brick.
4:31
We'll make all these
changes in the next video.
4:38
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