 Welcome, this video is part of a series. Be sure to check out the previous video before watching this one because we're going to add on to what we did last time. I have my code pen.io. Go ahead and check out the link in the description of this video to get to that code so you can follow along. And here we have our game. I personally like to change the view so the code is over here on the side. So one change I made since the last video is I turned off auto updating. I found that when I was typing code over here, the game would update while I was halfway through typing stuff. It would mess things up. So the only time we make changes over here, we have to click run for them to take effect. Remember, don't worry about messing stuff up. If you were to delete a bunch of code, all you have to do is click reload and it reloads the original code. If you want to save your changes, you're going to want to create an account at code pen.io and save your code that way, your changes that way. Or you can always set up your own server, which is a great idea in the long run, but out of the scope of this tutorial. Last time we created this player that we can use our left and right arrow keys to move left and right and hit up to make him jump. Since then, I've added this mushroom, which if you pick up, you grow in size. I only had to add a few lines of code to get that to happen, so let's go ahead and have a look at this. First part of this has not changed. That's just our game configuration and settings. We got some global variables here we're not going to worry about. And then we have our preload function. Now remember, our preload function basically loads all our assets, our images, our animations, our audio files and music files before the game starts because you don't want those things loading while the game is being played. You want them to load first. So here we're just saying to keep this simple, we're going to say anytime you see the word scene, that basically means it's talking about our game, okay? Now last time we added in a sprite sheet. So what is a sprite sheet? What is a sprite? A sprite is a 2D object in your game. It can be the player. It can be an enemy. It could be something you stand on, something you collect, but it's a 2D image. A sprite sheet is one image like this that has a bunch of frames in it that are used for animation. So that's what we did here and we talked about that in the last video. Well, for the mushroom, the mushroom right here is only one image. It doesn't have any frames. So to load it, we just said to the scene or our game, we're going to load an image. We're going to give it a name of mushroom. You can call it something else if you want, but we're deciding to call it mushroom in this case. And then we're telling it where that image is. I'm giving it a full URL here because I'm pulling it off a different server. And if it was on your current machine, you'd just point to where it is on your machine. So that's all we need to do to load our image and have it ready to be used in the game. After everything is loaded in the preload function, we're going to have our create function, which is where our game is created. These lines right here refer to the player. We created those in the last tutorial. And then this one here is saying, look at the cursor keys or the arrow keys on your keyboard. Again, that's from the previous tutorial. And that's all going to be used in this update function. The update function, remember, it runs constantly over and over and over and over again while the game is running up to 60 times a second. And we haven't changed any of that in this game. So what have we changed? Well, up in this create function, we added these lines of code to create and set some settings for our mushroom. So here we're saying var mushroom. Basically, we're creating an object and we're calling it mushroom. And then to our scene or a game, we're going to add a sprite. But not just any sprite, a sprite with physics. That means that it can have gravity. It can collide and touch and overlap other objects in the game. I'm telling it where to put it. Remember, this is x and y. So we're going over. So we're going right 100 pixels and down 100 pixels. That would place our mushroom right about here to start. For our player, I did some math. And you can always do math if there are numbers involved where we took the game with and the game height and divide them in half so that our player starts in the center of the screen. So for the mushroom, I decided to give him strict coordinates on where to go. Here the word mushroom, again, is just relating to what we called it up here. It's just saying use that sprite or that image. Next we're saying for our mushroom, we're going to say collide with the world bounds. Again, we talked about this in the last tutorial. If we set that to false or don't set it at all, we don't have a ground plane or a platform. So our mushroom is going to fall off the screen. It's still there. It's still falling. It's still calculating it. We just don't see it because it's out of our view. Let's go ahead and set that back to true. Now our bounce, I said something wrong in the last tutorial where I said point two means it's going to bounce back up 20%. That's not quite right. If we set it to one, it will indeed fall and then bounce right back up to where it started, meaning that it will probably just bounce like that forever. If you set it higher than one, it will bounce higher than it started, meaning eventually it's going to either go off the top of the screen or in this case, hit the top of the screen and bounce back even faster. Normally you want your bounce set somewhere between zero and one. We're going to go with point five in this case. Now we're going to set the scale. That's not something we talked about. By default, if we were to comment this line out, remember any time you see two forward slashes and the words are all gray, that means it's a comment. You can put notes that way, which is what they're meant for, or you can temporary disable commands like this. If I was to do that and run this, the scale by default is one, so as you can see the mushroom is much larger because that's how big the image is of the mushroom. If I was to uncomment that and set it to one, well, it's going to look the same because one is the default. Although you can change the scale as we'll look at in a little bit, and there's other ways to set the scale, which we'll also look at in a little bit. We'll also make it two, which makes it two times the scale, but really that makes it four times the size because it's two-dimensional, so it's getting two times larger wide and two times larger in height, so it's actually getting four times larger in scale. So that's that. Let's go ahead and set that back to point five for now. Now I have a line commented out here that I'll talk about in a little bit, but for right now let's look at this. We're going to say to our game, we're going to add something. We're going to add some physics. They're going to check for when something overlaps. When what overlaps? When the player and the mushroom overlap, basically when they touch, when those images overlap. Well, what's going to happen when they overlap? We're going to run the function power up. So first of all, what is a function? A function, we have a few of them so far. We have our preload, we've got our create, and we've got our update, but we also have this power up one that I created. A function is just a list of commands that you can then call at any time by calling that function and we'll run all those commands. In this particular case, we're also passing things to that function, we're passing the player and the mushroom. It's important that you realize that's the order that we're passing them here. What are we doing in that function? We're going to take that player, we're going to set the scale to two. A static number, meaning he will double in scale or basically a quadruple in size. Then we're going to destroy our mushroom which gets rid of it. That's why when our player touches the mushroom, the player gets bigger and the mushroom disappears. That's overlap. Again, very clear there. It's one of the two images overlap, but we can also comment that out and instead of overlap, we can say collide and we can say when the player and the mushroom collide. I'll run that and now, we're saying collider, now I can run my player over here and when that's done bouncing, I can jump up and I can stand on that mushroom. I can come down here, I can push the mushroom and when the mushroom hits the wall, it's going to bounce back. That bounce rate is the same as the bounce rate we set here, so higher that is, the more it will bounce off the walls as well. I can also come in here, I can push it, I can stand on it, I can push it this way, I can try to jump on it, but it's going at the same speed as me. There we go. It will eventually slow down to a stop. That's sitting as a collider, but again, let's go back to setting it so it overlaps. That is the end of this tutorial, but I'm going to give you some bonus stuff. That is what this tutorial is going over. Let's look at this. Let's say we wanted more than one mushroom. There's general rule of programming once you get better at it, is that you don't want to ever write code more than once. For example, if I was to do what I'm doing right now, copying that code three times, that's considered bad practice. Not going to worry about that now as a beginner, just copy and paste. Normally, you'd want to throw that into a function and call the function more than once, telling it what parameters you want to change. In this case, if I restart this, we're going to have our player here, and we're going to see a mushroom here, but there's actually three mushrooms right there. But they're the same size, the same image, starting at the same location with the same bounce and scale being pulled down by gravity at the same rate. So even though there's three of them there, you can only see the top one. So let's go ahead and move each one. We'll leave the first one at 100 over, then we'll move the next one 300 pixels over, and the next one 600 pixels over. So now if I run the command, rerun our script, we're going to see three mushrooms at those three locations. And I can run around and pick up each one if I wanted. We can also change stuff. So I can say I want the middle one here to be two times, no, say 1.5 in size. So it's a little bit bigger than its standard size. And we'll make this one double in size, double in scale. So now we have a little mushroom, a medium mushroom, and a big mushroom. Let's go ahead and change the bounce. We'll make the bigger one bounce the least. And we'll make the smallest one bounce the most. Makes sense, right? Let's go ahead and see. The big one's just going to bounce a little bit, where the other two bounce a bit more. Now, when I run around, I can collect them. And it is running the function, power up each time. But we set a static number here. We set that static number to two. Well, there's another way you can set scale. Just by saying the scale and using some math, I can say equals, which is the same as saying set scale to two. But there's a difference now, because now I can do some math. And what I can do is I can say instead of equals two, I can say asterisk to two. So we're getting into math here. Asterisk normally stands for multiplication. So I'm saying is take the current size, the current scale of the player, and whatever that is, multiply it by two, which means every time I touch a mushroom, my scale is going to be doubled. So I can touch this mushroom, double, this mushroom, double, and this mushroom double. Now I'm really big. But you can also do something else. How about this? The player has scale, so does the mushroom. Well, I can say take the mushroom scale. So I'm saying take our player, take his scale, and set it equal to the mushroom scale. So now when I rerun this code, if I touch the medium one, which is 1 and 1 half, my player is now 1 and 1 half his normal size. Now he's two times his size. And now he's half his size. Because it's saying the scale to the same scale the mushroom's going. It's not the size. It's not making it the size of the mushroom, but it's saying the scale, the multiplication of the size. Sort of right. OK, another thing I can do is I can say plus equals and give it a number. So I can say add one to its scale each time. So by default, its scale is one. Well, now if I touch it, now his scale should be two. And then three. And then four. So those are the things you can play with. Again, those are bonus things, adding the extra mushrooms and doing different math down here. But you can see how those math lessons in school do pay off, because you can do a lot of stuff with multiplication, division, adding, and subtracting in games. So I do hope you found this tutorial useful. If you did, visit my website, Filmsbychrist.com. That's Chris Decay. There's a link in the description. I have lots of videos there. I hope to be doing more on Phaser here in the future. Again, check out the code up on Code Pen. Hopefully it will be there for years to come. Who knows? But thanks for watching. Check it out. And have a great day.