Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- Course Overview 2:16
- What Is a Game Engine? 1:59
- What Is Phaser? 2:43
- My Development Setup 3:30
- What Will Be Built in This Stage 1:27
- Phaser Project Setup 6:29
- Loading Game Assets 6:06
- Setting up a Server 5:51
- Adding Grouped Images 4:53
- Phaser Explanation and Setup Quiz 5 questions
- Adding Paddle Movement 6:05
- Adding Physics 9:36
- Adding Basic Collisions 4:40
- Adding Logic on Collision 5:05
- Winning and Losing Text 13:58
- Adding Sound 8:02
- Final Thoughts 9:55
- Player Movement and Collision Quiz 6 questions
- How to Improve Our Game 4:41
Preview
Start a free Courses trial
to watch this video
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
Learn how to load images into your game using the Phaser framework using both the preload and create methods from a game scene.
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 set up a basic game in Phaser.
0:00
In this video, we're going to learn
how to load some assets into our game.
0:05
Let's start by opening the preload
function on line 19, then let's write
0:10
the following code, this.load.image
with parenthesis and a semicolon.
0:15
Let's go through what we've just written.
0:21
Whenever the this keyword is used
inside a scene function like preload,
0:24
it references the scene itself.
0:28
In other words,
it gives us access to all the methods and
0:31
properties that can be used
to modify a specific scene.
0:34
One of these properties is called load.
0:38
Which is used to load
assets into the game.
0:41
Let's see what else that this keyword
gives us by logging it to the console.
0:44
First, let's put all the codes on line
20 in a comment by using the keyboard
0:49
shortcut command, question mark.
0:53
Then below line 20,
let's console log the this keyword.
0:57
Cool, now let's open the index.html
file in the browser.
1:03
Right-click anywhere on this page and
select inspect.
1:08
This will bring up the developer tools.
1:12
Let's find the console tab in the top
row next to elements and click on it.
1:15
First of all, you'll notice in the console
that we're using Phaser 3.60.0,
1:21
but we're also using WebGL
instead of Canvas and
1:27
we're using Web Audio
instead of HTML Audio.
1:30
These are settings that Phaser has
automatically selected for us.
1:33
You may see something different
based on your browser and computer.
1:37
Below that, we should see the word
initialize, followed by an object.
1:42
This is what we're logging to the console.
1:46
Let's open this up by clicking on
the small gray arrow on the left side.
1:49
We can see that the disc keyword gives
us access to lots of properties from
1:54
animations to inputs to sound and
so much more.
1:59
Cool, let's go back to our code and
finish importing the assets.
2:03
Let's first delete the console log
since we don't need it anymore and
2:08
uncomment the load image line.
2:12
We can see that the load property
has an image method that we can use
2:16
to load an image.
2:20
This method takes in two arguments.
2:23
The first should contain a name or
key we can use to refer to the image and
2:25
the second should contain
a path to the image.
2:30
Since we want to load a paddle image for
our breakout game,
2:33
let's put the word paddle
in the first argument.
2:37
And give it the path to the paddle
in the second argument.
2:43
This should be assets/paddle.png, perfect.
2:47
Remember, the preload function
only preloads the asset,
2:52
it doesn't add it to our scene.
2:55
For that, we'll need to use
the create function on line 22.
2:57
Let's open up that function and
add the following code.
3:02
this.add.image with parentheses.
3:07
The add property allows us
to add things to the scene.
3:11
In our case, we want to add an image.
3:15
So we're using the image method.
3:17
However, there are many other
methods including text, video and
3:19
particles that can be used instead.
3:22
The image method takes in three arguments.
3:26
The first is the x position,
the second is the y position, and
3:28
the third is the name of
the image we want to add.
3:32
The x and y positions are pixel
coordinates that are relative to the top
3:36
left corner of the screen.
3:40
So for example, if we gave our
image an x coordinate of 200 and
3:43
and a Y coordinate of 200.
3:48
This will place the image
200 pixels right and
3:50
200 pixels down from the top
left corner of the screen.
3:53
Because we want the paddle to start off in
the middle of the screen horizontally and
3:58
close to the bottom, we can divide
the width of the whole screen by 2 for
4:04
the x position and minus the height of the
screen by 50 pixels for the y position.
4:08
Let's write the code for that.
4:15
Let's replace the first
200 with config.width / 2.
4:16
And the second argument
with config.height- 50.
4:23
You can see we're using our config
variable we created earlier.
4:29
But if you're creating a game in
the future where the config variable
4:33
isn't easily accessible instead
you can use this.game.config.
4:38
Cool, let's add the third argument
which would be the name of the image we
4:42
want to use.
4:46
In our case,
it will be paddle because this will match
4:47
the first argument we used in
the load image method, sweet.
4:51
Now let's look at our game in the browser.
4:55
Refresh the screen by pressing Cmd+R.
4:58
And now we can see there's a small
square with a green border where
5:00
our paddle image should be.
5:05
Let's look at the developer console
to check if we have any errors.
5:07
To do this, we can right click anywhere
on the screen and select inspect.
5:12
I have two gray arrows next to my
elements tab because I've zoomed in on
5:18
the developer tools.
5:23
But you won't have this.
5:24
Because of that, I'm going to click
on the two gray arrows to reveal
5:27
the hidden tabs and click on console.
5:32
It looks like we have
a cross-origin request error,
5:35
which means our browser is preventing
us from using our paddle image.
5:38
This is a security feature that
prevents websites from accessing
5:43
files on our computer.
5:47
We need to tell our browser that it's
okay for the game to access this image,
5:49
and the easiest way to do that
is to run a local server.
5:54
In the next video, we'll learn how
to install and run a local server so
5:58
that we can load our images.
6:02
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