Preview
Video Player
00:00
00:00
Adding New Graphics
4:10Practice calling functions while adding additional graphics to the JavaScript game.
[MUSIC]
0:00
Here's what my game currently looks like.
0:04
I have nine platforms and nine coins.
0:07
Were you able to add more platforms and
coins to your game?
0:09
If not, or if you wanna have
your game look just like mine,
0:12
you can open the new
workspace on this page.
0:15
It has all of the files and code in
place for you to work along with me.
0:17
You can also keep working with
your previous workspace and files.
0:21
If you closed your workspace,
0:25
you can find it again from
the workspaces page in Treehouse.
0:27
Just click the Workspaces button here,
0:31
and you'll see a list of all of
the workspaces that you've created so far.
0:32
All right, here we are on the workspace.
0:37
You'll notice that there's some graphic
files that we haven't used yet, for
0:39
example this platform_2.png file.
0:43
It has a different look than our
other platform, let's use it.
0:47
Open the game.js file, and
scroll down till you find something
0:50
that says window.onload, around line 75.
0:57
This part of the program creates,
or defines a function,
1:02
that runs as soon as the webpage loads.
1:06
That is, when someone opens the webpage
in their browser, this code runs.
1:08
This is common in a lot of programs and
especially in games.
1:12
The code here gets a lot of the game
components in place so the game can start.
1:16
For example,
1:21
this function here called preload does
some setup work before the game begins.
1:22
In this case, it sets the background
color for our game and
1:27
loads images that we'll use in our game.
1:32
Here's a line that loads a platform
graphic that we're currently using.
1:35
What do you think you'll need to do
to load the second platform image?
1:40
Why don't you pause the video and
give it a try?
1:43
I'll wait right here.
1:46
Just a reminder, if you're feeling
overwhelmed by all the code here,
1:49
don't worry there is a lot
happening in this JavaScript file.
1:52
But if you follow along,
1:56
you'll get a sense of how you can make
things happen with just a bit of code.
1:57
You don't need to understand
everything you see here.
2:02
You can learn it all in time,
just relax and get a feeling for
2:05
what programming is all about.
2:08
Okay, here's how we can load that image.
2:11
I'm just gonna copy this line of code,
2:13
And paste it in.
2:21
There are only two
changes you need to make.
2:23
First, change the name of the graphic
file to use platform_2.png,
2:26
and change the name of platform here
by adding a 2, we'll call it platform2.
2:32
You should be familiar with
what type of code this is,
2:38
you learned about it in the last video.
2:42
This code calls a function
named game.load.image.
2:44
It's a method, or code,
2:48
that's built into the phaser library
that we're using to build this game.
2:49
Remember, we can give functions
information to control what they do.
2:54
In this case the first piece of
information is the name that we'll use to
2:58
identify this new object.
3:03
Because it's different
than the other platform,
3:05
I'll add a 2 to give it a different name.
3:07
The second piece of information
is the image file we'll be using.
3:09
Now if you save this file and preview it,
3:14
you'll notice that the game
isn't different at all.
3:16
That's because we only loaded the image,
we haven't used it yet.
3:19
So if we go back to the workspace
in the game.js file,
3:23
we'll scroll up to the add
platforms function here on line 29.
3:27
This is where we create new platforms.
3:31
What do you think will happen if we
change platform here to platform2?
3:33
Why don't you pause the video and
try it yourself.
3:40
Okay, did you change
some of the platforms?
3:44
I'll change these last three here.
3:46
I'm gonna save the file and preview it.
3:52
Cool a new platform look.
3:54
Now why don't you add one more
platform to the game like this,
3:56
up here at the top using
the new platform image.
4:00
In the next video I'll show you how to add
new animations like this animated coin.
4:04
I'll see you then.
4:08