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
Understand how to add collisions to our game objects as well how to add a background image that spans the length of our level.
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 learnt how to load
a level we created in Tiled into our game,
0:00
and we also updated the game
camera to follow the player.
0:05
In this video, we're going to add some
collision detection to our level and
0:10
also add a background.
0:14
Let's get started.
0:16
The way to add collision detection to our
level is to tell Phaser which tiles we
0:17
want the player to collide with.
0:22
Although Phaser provides many ways and
methods to do this,
0:24
we're going to use a simple
method called setCollision.
0:28
The setCollision method is provided
by a tilemap layer object.
0:31
So in our case, we can use the tilemap
layer object from our ground level.
0:36
Let's scroll down to the create method.
0:42
And at the beginning of line 50,
let's write const groundLayer =.
0:45
This now gives us access to
the setCollision method.
0:52
Let's use it. At the end of line 50,
press Enter and
0:57
write groundLayer.setCollision and
add parentheses.
1:01
The setCollision method takes
an argument of an array of numbers.
1:05
And these should be the numbers of the
tiles that we want to add collisions to.
1:10
Let's take a look at
the level_1.JSON file.
1:15
To remind ourselves what numbers the tiles
are that have been used in our level.
1:18
Let's press Command-P to open
the Commands palette and
1:23
use that to get to the level_1.json file.
1:27
Looking at the data array, we can see that
there are four different tile numbers.
1:31
17 over here on line 10,
then the number 9,
1:36
then the number 1, and then down here,
there's the number 10.
1:39
Let's add these numbers to
our set collision method.
1:44
Inside Inside the parentheses on line 51,
I'm gonna add square brackets,
1:48
then write 1, 9, 10 and 17 in the array.
1:54
Next let's add a collider between
the player and the ground.
1:58
Let's scroll down and
at the end of line 56, hit Enter and
2:03
write this.physics.add.collider,
add parentheses and
2:08
in the first argument, add this.#player.
2:13
And for the second argument,
let's add groundLayer.
2:17
Nice, let's test this in the browser.
2:21
Straightaway, you can see that
the player is colliding with the ground,
2:24
this wasn't happening before.
2:28
And if we hold on to the right key and
press up to jump with the character,
2:30
you can see that our player is
landing on platforms, very cool.
2:35
Now, I don't know about you,
2:39
but I'm kind of getting bored
of seeing this grey background.
2:40
Let's add a new background that
suits the style of our game.
2:44
Let's take a look at the images
folder in our assets and
2:49
open up a file called blue_grass.
2:54
If we scroll up a bit from here,
2:57
you can see it's the first
image in our images folder.
2:59
This is the image we're going to use for
our background.
3:03
You can see it's quite small
compared to the size of our level.
3:06
So we're going to need to duplicate
the image along the x axis so
3:09
it can cover the width of our level.
3:13
Let's go ahead and do that now.
3:16
As usual, we'll start off by loading
our image in the preload method.
3:19
Let's scroll up.
3:24
And at the end of line 19,
hit Enter and type this.load.image.
3:26
Add parentheses and
inside the parentheses we're
3:31
going to add an argument
of background_image and
3:36
a second argument of
assets/images/blue_grass.png.
3:40
Nice, now let's add
the background to our game.
3:46
As you can imagine,
Phaser has a very handy method for
3:49
duplicating the image along the x-axis and
it's called tileSprite.
3:52
The tileSprite method will basically
take the width and height of our map and
3:58
add more tiles or
images to fill any spaces that are left.
4:03
Let's add this in our create method.
4:08
We'll scroll down until we get to
the point of our ground layer.
4:11
And at the end of line 55, hit Enter and
right this.add.tileSprite,
4:15
add parentheses, and for
the first argument give it a value of 0,
4:21
for the second argument
another value of 0.
4:26
For the third argument write
map.widthInPixels, for
4:29
the fourth argument write
map.heightInPixels, and for
4:34
the fifth argument we're going to give
it a string of background_image.
4:39
Before we test this in the browser,
let's add a setOrigin
4:45
method to the background image to make
sure the image is positioned correctly.
4:49
At the end of line 56, before
the closing semicolon, write .setOrigin,
4:54
add parentheses and inside
the parentheses give it a value of 0.
5:00
Sweet, let's check this in the browser.
5:06
Okay, it looks like our background
image is showing correctly, but
5:09
we've lost the platforms and the player.
5:13
This makes it difficult to play
a game if we can't see the player or
5:16
the platforms that we're going to jump on.
5:19
This is happening because in the create
method, the order in which we add
5:22
the objects is the order in which
they'll be layered on to the game.
5:26
So, because the background is
added after the ground layer and
5:31
after the player, it shows on top of them.
5:35
Let's go back to VS code and fix this.
5:38
In our create method,
let's highlight line 49 and
5:41
press Command X to cut it then
scroll up higher in the method and
5:45
just before the player begins to
press enter and paste in our map.
5:49
This makes sure that our tile
sprite method has access to the map
5:54
variable then let's scroll back
down in the create method.
5:59
Until we get to the line where
we add our background image,
6:04
select all of line 56 and
press Command X to cut that line.
6:08
And then we'll scroll
up in this methods and
6:12
paste it just below the map variable
on line 25, nice, this means that
6:15
our background image will be behind
our player and behind our level tiles.
6:20
Let's see if this worked.
6:26
Nice, this is looking much better.
6:28
But, there's one thing that
doesn't look quite right to me.
6:31
I don't know about you, but
6:34
I don't think our character is as visible
as they were when the background was gray.
6:36
Let's try to use the color of our
character to make them standout more.
6:41
Let's take a look at our
spritesheet_players.png file.
6:45
You can see here that our alien
character comes in multiple colors.
6:49
So, we'll just need to
change to a different one.
6:53
I think the pink alien will stand
out more than the beige one.
6:58
This is actually a lot easier to
change in Phaser than you think.
7:02
Let me show you.
7:06
Let's go back to our LevelOne.js file.
7:08
And we'll highlight the first
occurrence of the word alienBeige.
7:11
This should be on line 33.
7:15
Once you've highlighted the word,
7:18
press Shift Command L to select
all the instances of that word.
7:20
Now change alienBeige to alienPink and
save the file, that's it.
7:24
This is the beauty of selecting frames
from a sprite sheet based on its
7:31
name instead of selecting
a frame based on the number.
7:35
Now let's test this in the browser.
7:40
Cool, this is much better.
7:42
I think the pink alien definitely
stands out more than the beige one.
7:44
If you remember back in the video where
we created our level in tiled editor,
7:49
we added some coins to our level.
7:53
Well, in the next video, we're going
to load these coins into our level.
7:56
So our player has something to collect.
8:00
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