Adding New Graphics

[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