Preview
Video Player
00:00
00:00
Adding Animated Characters
5:16Learn how to use "sprites" in a JavaScript game; how to call functions; and how values add flexibility to your functions.
Did you add one more platform to the game
near the top of the screen like this?
0:00
If not, or if you wanna have
your game look just like mine,
0:04
you can open the new
workspace on this page.
0:07
It has all the files and code in place for
you to work along with me.
0:09
You can also keep working with
your previous workspace and files,
0:13
if you've got a really cool design going.
0:16
In this video, we'll add new animations.
0:19
Here's where we're headed.
0:22
We'll add a star at the top and
a few bottles of poison.
0:23
These types of images are called
sprites in game design.
0:27
Because they're animated, loading a sprite
is a little different than just loading
0:31
a non-moving image, like the platforms.
0:34
Sprite is a single graphic file, but
0:37
the file contains multiple
views of the same object.
0:40
For example, coin.png is a single file,
but it has eight views of the coin.
0:44
You can think of each view of the coin
kind of like a frame in a movie.
0:50
Our game library, Phaser, displays only
one of those frames at a time, but
0:54
cycles through them quickly enough so
0:59
that we have the illusion
that there's a spinning coin.
1:02
Pretty cool?
1:05
We have a few other sprites we can use,
poison.png and star.png.
1:06
Let's look at our code.
Open the game.js file.
1:14
Find the line where
the coin image is loaded.
1:18
It's down here on line 90.
1:21
Near where we loaded the platform images.
1:21
But there's a special
function that we use.
1:25
Spritesheet.
1:28
This is used by Phaser
to load animated images.
1:29
We also use a sprite for
the player, And for
1:32
the badge that appears
at the end of the game.
1:37
The spritesheet function requires
four pieces of information to work.
1:41
A name for the object,
the image file, and two numbers.
1:45
What do those two numbers do?
1:52
Well, the second number, 44 for the coin,
is the height of the image file.
1:54
The coin.png file is 44 pixels,
or 44 little screen dots tall.
2:00
The first number is the width of each
of the frames inside the sprite.
2:07
For the coin, each of the different
views of the coin is 36 dots wide.
2:12
You can quickly figure out the proper
value by dividing the width of
2:18
the entire image, 288,
by the number of frames.
2:22
There are eight frames here.
2:26
So, that's 288 divided by 8,
which gives you 36 dots per frame.
2:29
Now don't worry, you don't have to
do the math for our two new sprites.
2:36
They're both 32 pixels tall and
each frame is 32 dots wide.
2:39
So let's add a poison image.
2:42
I'll call it poison.
2:52
Load the image, poison.png,
2:56
and set the width and
height of each frame.
3:01
Now just like with platforms,
3:06
you won't see any change in the game
until you use this new sprite.
3:08
Let's change a coin into
a bottle of poison.
3:12
Scroll up to the addItems function.
3:15
And in the final line,
change coin to poison.
3:19
Save the file and preview it.
3:25
Cool, now we have a bottle
of poison instead of a coin.
3:28
Let's step back a moment and
look at this code again.
3:32
You'll notice that when we loaded this
new spritesheet, notice that we're using
3:35
numbers, just like we did when we
added coins or platforms to the game.
3:39
However, the numbers here
have different meanings.
3:43
For the coin on the platforms,
3:46
the numbers indicated the position
of those items on the screen.
3:48
For these animated objects,
3:52
the numbers indicate the size,
the viewable frame of the graphics.
3:54
That's something really
cool about programming.
3:58
The same types of values,
4:00
like numbers, can be used to do
all sorts of different things.
4:02
It's up to the programmer who created
the function to decide what information
4:06
the function needs to work.
4:10
You can learn more about these particular
methods in the Phaser game library
4:12
on the phaser.io website.
4:16
As you learn more programming,
you'll use sites like this as a reference
4:19
to help you learn programming, or how to
use a programming library like Phaser.
4:22
Okay, back to our game.
4:27
Here's what I'd like you to do.
4:29
I'd like you to add a star.png
sprite to our game.
4:31
Remember, it's 32 pixels tall, and
each frame in the image is 32 pixels wide.
4:34
Then place the star right above
the top platform like this.
4:39
And while you're at it, add a couple
of other bottles of poison to the game.
4:43
I've listed the coordinates of
the new items in the teacher's notes.
4:47
If you wanna put them in the exact
position that I've got them here, or
4:50
have fun and
put them anywhere you want in the game.
4:54
Currently, anything the player collects,
even the poison, gives them ten points.
4:57
That doesn't make any sense.
5:04
Poison should hurt the player,
not help him.
5:06
In the next video, we'll improve
our game by adding some logic, so
5:08
that collecting the poison
removes points from the score.
5:11
I'll see you there.
5:15