Pygame Platformer Part 18: Scrolling Background

Welcome back to game development with Pygame. This is part eight of the platformer and we're going to add a little bit of visual appeal by creating a scrolling background technically not background but we're going to add some clouds. All right, our platformer is looking pretty good. We've got some good jumping happening and we've got our enemies. Uh but our background is kind of dull. I'd like to add some appeal. Um now a lot of platformers will have a scrolling background where you see some trees or mountains in the background um going by behind the player. Uh we can't really do that or it doesn't really make sense to do that since we're scrolling vertically. Any nice mountains or anything that we have are going to just scroll off the bottom uh and not be visible. But we can jazz up the background a little bit by giving it a little more appeal uh with some clouds. Okay, so I've got some cloud images uh that I also got from Kenny GameArt and I'll uh link down below. And we're just going to use those to spawn uh some clouds that we're going to show in the background. And since we have our layers set up we can go over to our settings where we set the layers for everything and we can make a cloud uh layer that's going to be layer zero. So it'll be all the way in the back behind everything else. All right, so we need to make a new sprite. All right, so we're going to grab uh some of this code and paste it in here and call this a cloud. Now the clouds are just going to spawn up above the top of the screen and they're going to come scrolling down below it. So we don't need to specify where they spawn. Uh but they're going to use the cloud layer. And they're going to be in the I'm going to put them in the clouds group because what we're going to do is we're going to make a group for the clouds so that we can scroll them at a different speed from the speed we're scrolling everything else. Um and that's going to allow us to make it look like the clouds aren't scrolling by, you know, the clouds are in the distance. And we could even um vary it a little bit. Okay, so we have that. Our sprite also is going to need an image, so we're going to go to our game. We're going to load our cloud images. Now, I'm I have a few of them so that we can give it again some variety. Okay. So, this is for the cloud images. Now, those are Now, I'm going to make a list to put them in. They happen to be named um 1 through 3. So, I'm going to count from 1 to 3. I auto complete. Um I'm going to count from 1 to 3. And then for each one, I'm just going to append uh to the cloud images I'm going to append to the cloud images the image that I'm going to load. pygame.image.load path.join I put them in the image folder just like everything else. And this is going to be cloud number whatever .png. So, it's cloud 1, cloud 2, and cloud 3. We're just going to insert the number there. And then we have all of our stuff and we can .convert it. And then we'll have all of our cloud images. So, over here on our sprite, we can just tell it to pick a We can just tell it to just pick one of those randomly. So, the image is going to be choice from the game cloud images. We'll set the color key. And we will create the rect. Sorry, guys. I have a new keyboard, so it's typing a little weird for me today. Okay, now we just need to pick a spawn location. And we're just going to pick a Sorry, we're going to pick a random uh X position. That's just going to be between um zero and width minus however wide our cloud image is. And the Y is just going to be off the top of the screen. And I'm going to just spread them out so that they're nice and uh distant. Now, all we need to do for our update is kill it if it gets past the top uh the bottom of the screen. Oops, uh height. Oops, I left out my if. And then we'll have that. So, that's our So, that's going to be our sprite our cloud sprite. Nice and simple. And now over here in the uh in the game loop, we need to tell the clouds how to behave. So, we're going to have to move them and we're going to have to also spawn them. So, first of all, here where we Here's where we're scrolling the screen, right? Where if the player gets up in the top corner, we're going to scroll it. Well, this is where we're going to move the cloud. And we can also just start spawning them here because um I want them to be, you know, in random, kind of spread out, occasionally um occasionally spawning. So, we can just in here, whenever we scroll, there's a chance of spawning one. So, uh if we Did I import randrange up here? I just imported random. So, we'll just say random. So, all we're going to do is just give a very small percentage chance of spawning a cloud whenever we scroll. And remember, they they spawn up high, so this is just going to be a quick way to spawn one. Now, we also need to scroll the clouds, but I want to scroll the clouds at a different speed. So, that's why I put them in a separate group from the mobs uh and the platforms. And again, this is some of you may be thinking that there's probably a more efficient way to do this, and there definitely is. This is more because we've been uh adding this stuff one uh one piece at a time that we're doing that we're doing this in this order um like this. So, I'm going to take the player's velocity and divide by two. And then we're going to pick them max of that and then that should move them down at half the speed so they'll look like they're scrolling by slowly. So let's take a look and see what we see. Okay. Oh. Oh, I got a typo here. I forgot to put .append. All right, let's try this now and let's see if we see some clouds spawning. Now we started out spawning them off the screen. There we go. All right, so you can see how they're scrolling slower and they're nice and and behind all of our other sprites so they don't get in the way. Although I suppose you could also put them in front of the player if you wanted to have uh clouds that block right? That'll add a little extra challenge. Um so so what else could we do? Well, we could make them one thing we could do is maybe make them slightly more frequent. Well, this isn't bad. But it would also be nice if See when I fall, I don't fall into an empty sky. So what we can do close this. Is we can also let them go farther down before we delete them. So let's just let them go two screen heights down before they get deleted. That way when we do die and we scroll down, we'll see some more. Okay, one other thing I want to do is I want to change the image size on the clouds so that we get some randomness in there, too. So once we load the image I want to scale it. I want to use the Pygame Oops, I want to use the pygame.transform.scale, right? The image pg.transform.scale. And we're going to scale it by some size, right? And so, let's pick a random number for that. And I want this scale to be I don't want it to be getting any bigger, so the maximum should be one. But maybe anywhere between half and one, which means I need a random number between 0.5 and one. Well, an easy way to do that is I could just say randrange. Remember, randrange gives integers, whole numbers, so I need to pick a random number between 50 and 100 and divide by 100. And then I will get and actually technically that needs to be 101. And then I'll get 0.5 up to 100. And the what we're going to do is we're going to multiply the rect width times scale. Oops. This up the rect width times scale and we're going to also multiply the height times scale. And that would be fine except we have one other small problem, which is that we also are need to round these to integers because the scale command is resizing an image to pixels, and so it's going to want the right number or it's going to want that to be an integer. Okay? Um all right, so that should scale us to the size we want. Now, let's go over here and I'm going to set this number to really large, so I'm going to spawn tons of clouds cuz I just want to see how they look when I have lots of them on the screen and see if I'm getting all sorts of different sizes. All right, so here comes some clouds. And we can see, yeah, all sorts of different sizes. Actually doesn't look too bad with a whole bunch of clouds on here, does it? Yeah, I kind of like that. All right, let's just spawn a few in our new here. Let's just spawn a few clouds on our start screen. So, I'm going to spawn 10. Let's see how that works. So, I'm just going to spawn a cloud. But then, they spawn off the top of the screen. So, I'm going to reset the Y of the cloud, and I'm just going to add 500 to it. So, since they spawn up to 500 pixels off, I'm just spawning a a batch of them and moving them down. And I don't know. I don't know if 10 is good or 8 is good. Let's give it a try. There we go. So, there's our starting screen, and now we can start jumping up and seeing more and more clouds. Yeah, I kind of like it with a lot of clouds like this. Okay, that'll do it for this video. If you want a little bit of homework, try going down here to where we move the clouds downwards, and try randomizing this number, so that it varies for each cloud. So, then the clouds are going to move downwards at different speeds, and so you'll get much more an impression of depth, because some of them will seem like they're farther away and moving slower, and some are closer and moving faster. But, I'll leave that for you to try. As always, thanks for watching. I hope you're enjoying making this game. It's come along pretty far. Please press the like button and help other people find this and I look forward to seeing you guys next time. Thanks.