Pygame Platformer Part 7: Splash & End Screens

Key Takeaways

Welcome back to game development with Pygame. We're continuing development on our platformer game. And in this video, this will be a pretty quick one. We're going to add a splash or start screen and then a game over screen for when the player loses. So, in this video, I'm ready to go down and start filling in the start and game over screens. Although, one quick change that I did make that I'll go back over here to is I went ahead and made a a setting variable called BG color so that I can use this nice light blue as my background color. So, over here in my draw section, I'm just filling with the background color just because this light blue looks a little more skylike. So, that when we do start putting some graphics in there, um it's a little nicer to look at than the plain black background. Okay. So, so what we want to do, we already have it set up so that when the game first starts, it's going to show the start screen and whenever the game ends, you're going to see the game over screen. So, we just need to fill in what we want to display in those sections. So, we'll start with the start screen. So, we want to we want to draw some things to the screen. Well, what do we want to show? Well, we can um we can also fill in the screen with that BG color. And then we can draw some text or we added the draw text function uh last time. So, we have that already. And we can just put um what we want our thing to be titled. Although I do have that over here in the settings, do I not? Yeah. So, we just use title there. We'll just use title for the text we want to display. And then for the font size, we want a good large size font. I'm going to stick with white uh for now. And then I'm going to uh center on the screen and put it at uh the top quarter. Then I want to give a little bit of instructions. So arrows to move and space to jump just so the players know what the controls are when the game first starts up. And we'll put that at we'll center it horizontally and we'll center it uh vertically. And then the last thing we want to say on there is press a key to play. So they know Oops. So they know what to hit to play. And we want that to be white. And we want to put this at oops width over two and height times 3 over 4. Oops. And I see I left out a Y there. So those are the that's the text I want to display on the screen. So we can just do display.flip and it'll draw it. Now if I run this right now, this is going to happen. But you can probably see that we have a small problem because it's going to flash up there instantly and then the game is going to start because we're not waiting after this. What we want to do after the start screen ends is we or I mean after the start screen displays is we want to wait for the player to press a key. And since we're also going to want to do that in the game over screen, we should probably go ahead and define uh wait for key, which is a function that will just pause waiting for the key event um for the person that the person's ready to continue. So, we'll have a little loop here just running as long as this waiting variable is true. So, as long as that's true, what are we going to do? Well, we'll use our uh clock um to tick and and uh and run the loop at a certain speed, which is the same thing we do with our main loop uh up here, right? And in fact, you could even put that to a lower number, you know, because your your game over screen doesn't need to uh run at a really high frame rate. There's no action going on. Doesn't really matter. We'll stick that because you may eventually want to add some animation on your start screen. Maybe there's uh clouds floating by, little uh little characters jumping around, something like that. You can you can add that in there. Uh but for now all we want to do in the wait for key is uh check the events. And then there's two events we want to check for. Um if the event is a uh pg.quit, that means the person clicked the X on the window. We definitely want this to uh we want the whole thing to close. So we're going to say waiting equals false. And then because we want our whole uh our whole program to end, we also want to set uh running equal to false as well. So that this will this will stop too. And then the other event that we want to check for is the pg.key up event, meaning the person pressed any other key or any key on the keyboard. And for that we just set waiting equal to false and then our wait for key loop will end. So that's what wait for key needs to do. Check for the events and then exit if they press the X. So let's run it. We should see oops that we need to now say in here in the start screen uh wait for key then we can run this. Now we have our title screen pops up. We get some instructions and we press a key and now we can play. Now when we die, we just need to have the game over screen filled in as well. And we can do that really quick. So on the game over screen, um I'm going to also uh fill the screen with the BG color. And then we want to draw a couple other things, right? And in fact, what we can do is there's a few things we want to show. I'm going to just copy these three um draw text lines. And I'm going to change this to now I want this to say game over the middle one. I want to show uh I want to show what your score was. So you can see what your score was. So, we're going to say um we're going to show the score plus whatever the value of score was in the middle. And then and then we can say to play again here pg.d display.flip. And uh we wait for a key. Now, now if we run, we can go up here and right there's our game over screen. Shows what my score was and I can play again. But there's one small problem now and that is in the middle of the game. If I press the X up here, the program doesn't close. I go to the game over screen. And the reason for that is while we're running the game, right, pressing the X on the window sets running equal to false, right? And here's the loop that that controls. Well, during the game, if we set running equal to false, we drop to this command. So, this loop hasn't ended yet because it hasn't gotten to the end of the loop. the even though you set a variable a loop variable to false, the loop doesn't check that variable until it finishes one run through. So we have running equal to false, but we still go to the game over screen and then when we came out of the game over screen, it would quit. So what we want to do in our game over screen is just check to see if running has been set to false and just basically ignore or ignore the game over screen pass through. So if if not self.running, meaning if running has been set to false, then we're just going to return, which means end this function. So what happens is now when I'm playing the game, if I press the X, it just exits, which is a more more of an expected behavior. All right, that'll do it for this video. Uh, go ahead and if you want to make your start and game over screens a little more interesting, you can go in here and change change your fonts, change your colors, um, you can even uh, put some graphics on there, although we haven't gotten into adding any graphics yet, so we'll probably hold off on that until we have the the game graphics in, then we can use some of those in the start screen. Uh, but go ahead and knock yourself out. You can have a lot of fun with making your especially your splash screen really interesting and and fun to look at. Okay, I'll see you next time. Thanks for watching.