Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Coordinates for new items
- Poison bottle: 370, 500
- Poison bottle: 100, 375
- Star: 125, 50
Downloading and Running the Project Files
Because of how the Phaser.JS library handles files, you need to be running a web server locally to view a working copy of this project. You can't just open the index.html file in your web browser as you might a basic HTML page. There are several simple ways to get a web server up and running on your computer:
- The Web Server for Chrome is an easy-to-install extension for Chrome that lets you select a folder on your computer (like the folder with the game files in them) and deliver them through a basic web server. This is probably the easiest way to get started — but you'll need to use the Chrome web browser.
- If you don't want to use Chrome, check out a simple guide for getting a local web server set up for several other methods.
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
You need to sign up for Treehouse in order to download course files.Sign up