1 00:00:00,430 --> 00:00:04,740 Did you add one more platform to the game near the top of the screen like this? 2 00:00:04,740 --> 00:00:07,260 If not, or if you wanna have your game look just like mine, 3 00:00:07,260 --> 00:00:09,720 you can open the new workspace on this page. 4 00:00:09,720 --> 00:00:13,720 It has all the files and code in place for you to work along with me. 5 00:00:13,720 --> 00:00:16,400 You can also keep working with your previous workspace and files, 6 00:00:16,400 --> 00:00:18,090 if you've got a really cool design going. 7 00:00:19,420 --> 00:00:22,099 In this video, we'll add new animations. 8 00:00:22,099 --> 00:00:23,610 Here's where we're headed. 9 00:00:23,610 --> 00:00:27,300 We'll add a star at the top and a few bottles of poison. 10 00:00:27,300 --> 00:00:31,000 These types of images are called sprites in game design. 11 00:00:31,000 --> 00:00:34,640 Because they're animated, loading a sprite is a little different than just loading 12 00:00:34,640 --> 00:00:36,870 a non-moving image, like the platforms. 13 00:00:37,980 --> 00:00:40,573 Sprite is a single graphic file, but 14 00:00:40,573 --> 00:00:44,347 the file contains multiple views of the same object. 15 00:00:44,347 --> 00:00:50,890 For example, coin.png is a single file, but it has eight views of the coin. 16 00:00:50,890 --> 00:00:54,840 You can think of each view of the coin kind of like a frame in a movie. 17 00:00:54,840 --> 00:00:59,690 Our game library, Phaser, displays only one of those frames at a time, but 18 00:00:59,690 --> 00:01:02,430 cycles through them quickly enough so 19 00:01:02,430 --> 00:01:05,410 that we have the illusion that there's a spinning coin. 20 00:01:05,410 --> 00:01:06,970 Pretty cool? 21 00:01:06,970 --> 00:01:14,160 We have a few other sprites we can use, poison.png and star.png. 22 00:01:14,160 --> 00:01:18,520 Let's look at our code. Open the game.js file. 23 00:01:18,520 --> 00:01:21,360 Find the line where the coin image is loaded. 24 00:01:21,360 --> 00:01:21,920 It's down here on line 90. 25 00:01:21,920 --> 00:01:25,810 Near where we loaded the platform images. 26 00:01:25,810 --> 00:01:28,100 But there's a special function that we use. 27 00:01:28,100 --> 00:01:29,490 Spritesheet. 28 00:01:29,490 --> 00:01:32,840 This is used by Phaser to load animated images. 29 00:01:32,840 --> 00:01:37,373 We also use a sprite for the player, And for 30 00:01:37,373 --> 00:01:39,490 the badge that appears at the end of the game. 31 00:01:41,002 --> 00:01:45,900 The spritesheet function requires four pieces of information to work. 32 00:01:45,900 --> 00:01:52,790 A name for the object, the image file, and two numbers. 33 00:01:52,790 --> 00:01:54,700 What do those two numbers do? 34 00:01:54,700 --> 00:02:00,790 Well, the second number, 44 for the coin, is the height of the image file. 35 00:02:00,790 --> 00:02:06,070 The coin.png file is 44 pixels, or 44 little screen dots tall. 36 00:02:07,080 --> 00:02:12,590 The first number is the width of each of the frames inside the sprite. 37 00:02:12,590 --> 00:02:18,210 For the coin, each of the different views of the coin is 36 dots wide. 38 00:02:18,210 --> 00:02:22,957 You can quickly figure out the proper value by dividing the width of 39 00:02:22,957 --> 00:02:26,789 the entire image, 288, by the number of frames. 40 00:02:26,789 --> 00:02:29,410 There are eight frames here. 41 00:02:29,410 --> 00:02:35,030 So, that's 288 divided by 8, which gives you 36 dots per frame. 42 00:02:36,240 --> 00:02:39,050 Now don't worry, you don't have to do the math for our two new sprites. 43 00:02:39,050 --> 00:02:42,290 They're both 32 pixels tall and each frame is 32 dots wide. 44 00:02:42,290 --> 00:02:45,030 So let's add a poison image. 45 00:02:52,870 --> 00:02:54,380 I'll call it poison. 46 00:02:56,450 --> 00:03:01,462 Load the image, poison.png, 47 00:03:01,462 --> 00:03:05,450 and set the width and height of each frame. 48 00:03:06,620 --> 00:03:08,120 Now just like with platforms, 49 00:03:08,120 --> 00:03:12,040 you won't see any change in the game until you use this new sprite. 50 00:03:12,040 --> 00:03:15,070 Let's change a coin into a bottle of poison. 51 00:03:15,070 --> 00:03:19,150 Scroll up to the addItems function. 52 00:03:19,150 --> 00:03:23,300 And in the final line, change coin to poison. 53 00:03:25,480 --> 00:03:27,120 Save the file and preview it. 54 00:03:28,760 --> 00:03:31,560 Cool, now we have a bottle of poison instead of a coin. 55 00:03:32,630 --> 00:03:35,730 Let's step back a moment and look at this code again. 56 00:03:35,730 --> 00:03:39,760 You'll notice that when we loaded this new spritesheet, notice that we're using 57 00:03:39,760 --> 00:03:43,700 numbers, just like we did when we added coins or platforms to the game. 58 00:03:43,700 --> 00:03:46,610 However, the numbers here have different meanings. 59 00:03:46,610 --> 00:03:48,500 For the coin on the platforms, 60 00:03:48,500 --> 00:03:52,780 the numbers indicated the position of those items on the screen. 61 00:03:52,780 --> 00:03:54,500 For these animated objects, 62 00:03:54,500 --> 00:03:58,790 the numbers indicate the size, the viewable frame of the graphics. 63 00:03:58,790 --> 00:04:00,850 That's something really cool about programming. 64 00:04:00,850 --> 00:04:02,590 The same types of values, 65 00:04:02,590 --> 00:04:06,490 like numbers, can be used to do all sorts of different things. 66 00:04:06,490 --> 00:04:10,770 It's up to the programmer who created the function to decide what information 67 00:04:10,770 --> 00:04:12,940 the function needs to work. 68 00:04:12,940 --> 00:04:16,930 You can learn more about these particular methods in the Phaser game library 69 00:04:16,930 --> 00:04:19,470 on the phaser.io website. 70 00:04:19,470 --> 00:04:22,720 As you learn more programming, you'll use sites like this as a reference 71 00:04:22,720 --> 00:04:27,460 to help you learn programming, or how to use a programming library like Phaser. 72 00:04:27,460 --> 00:04:29,050 Okay, back to our game. 73 00:04:29,050 --> 00:04:31,000 Here's what I'd like you to do. 74 00:04:31,000 --> 00:04:34,400 I'd like you to add a star.png sprite to our game. 75 00:04:34,400 --> 00:04:39,940 Remember, it's 32 pixels tall, and each frame in the image is 32 pixels wide. 76 00:04:39,940 --> 00:04:43,830 Then place the star right above the top platform like this. 77 00:04:43,830 --> 00:04:47,380 And while you're at it, add a couple of other bottles of poison to the game. 78 00:04:47,380 --> 00:04:50,820 I've listed the coordinates of the new items in the teacher's notes. 79 00:04:50,820 --> 00:04:54,580 If you wanna put them in the exact position that I've got them here, or 80 00:04:54,580 --> 00:04:56,630 have fun and put them anywhere you want in the game. 81 00:04:57,800 --> 00:05:04,670 Currently, anything the player collects, even the poison, gives them ten points. 82 00:05:04,670 --> 00:05:06,220 That doesn't make any sense. 83 00:05:06,220 --> 00:05:08,390 Poison should hurt the player, not help him. 84 00:05:08,390 --> 00:05:11,750 In the next video, we'll improve our game by adding some logic, so 85 00:05:11,750 --> 00:05:15,280 that collecting the poison removes points from the score. 86 00:05:15,280 --> 00:05:15,910 I'll see you there.