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
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