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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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