Frogger - Adding a Title and Game Over Screen
Tutorial Instructions
This tutorial is designed to be completed in order and builds on the code from the previous sections. However, you can jump to any section and download the completed code to that point and continue from that section onwards.
The tutorial utilises two files which can be downloaded using the following links. To download the files, right click on the filename and select 'Save Link As …'
The completed game can be found here:
Throughout the tutorials, you will be prompted to complete sections of code utilising the knowledge you have just gained. If you are unable to complete the code you can simply download the starting code presented at the start of the next section as it will contain a valid solution.
Other sections in this tutorial:
- getting started
- implementing the cars
- mixing up the car’s movements
- adding the player’s frog
- adding collision detection and explosion graphics
- adding logs and turtles
- adding turtle submerge logic
- adding home logic
- adding score logic
- adding a title and game over screen
Adding a Title and Game Over Screen
A typical design pattern for a game is to have a variable that describes what mode the program is in. For a basic game (like ours!) this will include a title screen, playing the game itself and a game over stage. For more complex games, this might include modes for setting options, checking inventory, saving scores and so on.
The game mode can be defined in a new enum as shown below:
enum GameMode {
TitleScreen,
Play,
GameOver,
};
GameMode gameMode = GameMode::TitleScreen;
Adding the title and game over sequence requires some drastic surgery to the existing main loop(). The code that was originally in it must be moved to a separate function – in our case game_Loop() – and a new switch added that controls what mode is being shown at any time. The result of this radical surgery is shown below:
void loop() {
if ( !arduboy.nextFrame() ) return;
arduboy.clear();
arduboy.pollButtons();
switch (gameMode) {
case GameMode::TitleScreen:
title_Loop();
break;
case GameMode::Play:
game_Loop();
break;
case GameMode::GameOver:
gameOver_Loop();
break;
}
arduboy.display();
}
void title_Loop() {
Sprites::drawOverwrite(0, 0, Title, 0);
...
}
void gameOver_Loop() {
drawScreen();
Sprites::drawExternalMask(39, 23, GameOver_Img, GameOver_Mask, 0, 0);
...
}
void game_Loop() {
... original code!
In each mode, the pressing of a button or some other event will force the gameState to update to another mode. For example, when a player presses the ‘A’ button from the title screen, the mode is updated to GameMode::Play which has the effect of starting the game.
void title_Loop() {
Sprites::drawOverwrite(0, 0, Title, 0);
...
if (arduboy.justPressed(A_BUTTON)) {
gameMode = GameMode::Play;
resetGame();
}
}
Searching for gameMode in the code will reveal other points where it is updated.
Your Turn
If you played the completed game, you may have noticed a short time after the title screen is rendered that it then displays a 'Press A' prompt. This code needs to be added to the title_Loop() function using the already declared titleCount variable.
Increment the titleCount variable until it reaches 64. Once there, display the PressA image at location (90, 50).
Congratulations! You have built a version of Frogger and delved into a lot of sophisticated programming topics.
Prev adding score logic