Pausing and Restarting

Giving our Snake game the ability to pause itself, and adding a clickable button for restarting the game

This lesson is part of the course:

Game Dev with SDL2

Learn C++ and SDL development by creating hands on, practical projects inspired by classic retro games

Get Started for Free

Ryan McCombe

Posted 8 hours ago

Now that we have our core Snake game mechanics working, it's time to enhance the user experience by adding interactive UI elements. In this lesson, we'll implement a restart button that allows players to reset the game without having to close and reopen the application.

We’ll also update our GameState class so the game initially starts in a paused state, and doesn’t advance until the user starts moving their snake.

Creating a Restart Button

Let’s begin by adding a BUTTON_COLOR variable to our configuration file:

1// GameConfig.h
2// ...
3
4namespace Config{
5  // Colors
6  inline constexpr SDL_Color BUTTON_COLOR{
7    73, 117, 46, 255};
8  // ...
9}
10// ...

We want the button to be placed in the bottom right of our window:

Screenshot of the snake game showing a restart button in the bottom right corner

Let’s add some more configuration values to control this positioning. We’ll add a FOOTER_HEIGHT value to control the height of our button, and other footer elements we’ll add in the next section.

We’ll also update our WINDOW_HEIGHT value to include enough space for this in our footer.

1// GameConfig.h
2// ...
3
4namespace Config{
5  // Size and Positioning
6  inline constexpr int FOOTER_HEIGHT{60};
7  // ...
8  inline constexpr int WINDOW_HEIGHT{
9    GRID_HEIGHT
10    + FOOTER_HEIGHT
11    + PADDING * 2};
12    
13  // ...
14}
15// ...

We’ll create a RestartButton class to manage our button. We don’t need any ticking logic for this function, but we’ll include the Render() and HandleEvent() methods:

1// RestartButton.h
2#pragma once
3#include <SDL.h>
4
5class RestartButton {
6public:
7  void Render(SDL_Surface* Surface) {
8    // ...
9  }
10
11  void HandleEvent(SDL_Event& E) {
12    // ...
13  }
14};

Let’s add an instance of this button to our GameUI class, and hook it up to our application loop through the HandleEvent() and Render() methods:

1// GameUI.h
2// ...
3#include "RestartButton.h"
4
5class GameUI {
6 public:
7  void HandleEvent(SDL_Event& E) {
8    Grid.HandleEvent(E);
9    RestartButton.HandleEvent(E);
10  }
11
12  void Render(SDL_Surface* Surface) {
13    Grid.Render(Surface);
14    RestartButton.Render(Surface);
15  }
16
17 private:
18  RestartButton RestartButton;
19};

Button Rendering

Our RestartButton's Render() function is now being called on every frame. Let’s update it to make our button visible on the window surface.

As before, we’ll use SDL_FillRect, meaning we need an SDL_Rect to position our button, and an SDL_Color to control what color our blitted pixels will have:

1SDL_FillRect(Surface, &Rect, Color);

Let’s start by defining the SDL_Rect's x, y, w, and h values:

x: We want the horizontal position of our button to start 150 pixels from the right edge of the window, so we’ll set x to WINDOW_WIDTH - 150.
y: We want the vertical position of our button to start below the grid. There is some padding between the top of the window and the start of the grid, and we want additional padding between the bottom of the grid and the top of the button, so we’ll set y to GRID_HEIGHT + PADDING * 2
w: Our button is positioned 150 pixels from the right edge, and we want some padding between the button and the right edge of the window, so we’ll set the width to 150 - PADDING
h: We want the height of the button to be the full height of the footer, with some padding between the bottom of the button and bottom of the window. So we’ll set the height of the button to be FOOTER_HEIGHT - PADDING.

Let’s create a ButtonRect private member to store these calculations:

1// RestartButton.h
2// ...
3#include "GameConfig.h"
4
5class RestartButton {
6public:
7  // ...
8private:
9  SDL_Rect ButtonRect{
10    Config::WINDOW_WIDTH - 150,
11    Config::GRID_HEIGHT + Config::PADDING * 2,
12    150 - Config::PADDING,
13    Config::FOOTER_HEIGHT - Config::PADDING
14  };
15};

Later in the chapter, we’ll want to change the button color based on gameplay events, so we’ll store this color as a member variable rather than using the Config::BUTTON_COLOR value directly in our Render() function.

Initially, it will just be set to the same color we defined in our config file, but we’ll update this later:

1// RestartButton.h
2// ...
3#include "GameConfig.h"
4
5class RestartButton {
6public:
7  // ...
8private:
9  // ...
10  SDL_Color CurrentColor{Config::BUTTON_COLOR};
11};

In our button’s Render() function, we’ll use the SDL_FillRect() function in conjunction with this rectangle and the color to render our button onto the surface:

1// RestartButton.h
2// ...
3
4class RestartButton {
5public:
6  void Render(SDL_Surface* Surface) {
7    SDL_FillRect(Surface, &ButtonRect,
8      SDL_MapRGB(
9        Surface->format,
10        CurrentColor.r,
11        CurrentColor.g,
12        CurrentColor.b
13      )
14    );
15  }
16  
17  // ...
18};

Running our code, we should now see the button positioned correctly in the bottom right of our window:

Screenshot of the snake game showing the button rendered in the bottom right without text

Text Rendering

Let’s add the "Restart" text to our button. We have a a Text class defined in our Engine/Text.h file, so let’s add an instance of this class to our RestartButton. The Text constructor accepts our desired content and font size:

1// RestartButton.h
2// ...
3#include "Engine/Text.h"
4
5class RestartButton {
6  // ...
7private:
8  // ...
9  Text Text{"RESTART", 20};
10};

We’ll define another SDL_Rect to control where this text is positioned. The TextRect variable is similar to our ButtonRect, but we’ll add some additional padding to control the position of the text within the button.

The Text class doesn’t require us to define the width or height of our text, so we can set those values to 0:

1// RestartButton.h
2// ...
3
4class RestartButton {
5public:
6  // ...
7
8private:
9  // ...
10  SDL_Rect TextRect{
11    ButtonRect.x + Config::PADDING * 5,
12    ButtonRect.y + Config::PADDING * 3,
13    0, 0
14  };
15};

Finally, we’ll render our Text within the Render() function. The text should be blitted after the background color, to ensure it appears on top of the background:

1// RestartButton.h
2// ...
3#include "Engine/Text.h"
4
5class RestartButton {
6public:
7  // ...
8  void Render(SDL_Surface* Surface) {
9    SDL_FillRect(Surface, &ButtonRect,
10      SDL_MapRGB(
11        Surface->format,
12        CurrentColor.r,
13        CurrentColor.g,
14        CurrentColor.b
15      )
16    );
17    Text.Render(Surface, &TextRect);
18  }
19  // ...
20};

Running our program, we should now see our text rendered in the correct position:

Button Clicking

Now that our button is visually complete, we need to make it functional. We'll implement a mechanism that allows the player to restart the game by clicking on our button. First, let's define a new user event type in our configuration file:

1// GameConfig.h
2// ...
3
4namespace UserEvents{
5  // ...
6  inline Uint32 RESTART_GAME =
7    SDL_RegisterEvents(1);
8}
9
10// ...

This custom event will serve as a signal throughout our application that the game should be restarted. Now, let's update the RestartButton class to detect clicks and dispatch this event when appropriate:

1// RestartButton.h
2// ...
3
4class RestartButton {
5public:
6  void HandleEvent(SDL_Event& E) {
7    using namespace UserEvents;
8    if (E.type == SDL_MOUSEBUTTONDOWN) {
9      HandleClick(E.button);
10    }
11  }
12  // ...
13
14private:
15  // ...
16  void HandleClick(SDL_MouseButtonEvent& E) {}
17};

Our HandleClick method needs to perform a boundary check to determine if the mouse coordinates at the time of clicking fall within our button's rectangle. If they do, we create a new SDL_Event with our custom type and dispatch it using SDL_PushEvent():

1// RestartButton.h
2// ...
3
4class RestartButton {
5  // ...
6private:
7  // ...
8  void HandleClick(SDL_MouseButtonEvent& E) {
9    using namespace UserEvents;
10    if (
11      E.x >= ButtonRect.x &&
12      E.x <= ButtonRect.x + ButtonRect.w &&
13      E.y >= ButtonRect.y &&
14      E.y <= ButtonRect.y + ButtonRect.h
15    ) {
16      SDL_Event RestartEvent{RESTART_GAME};
17      SDL_PushEvent(&RestartEvent);
18    }
19  }
20};

Other components in our application will listen for this event and respond accordingly.

Restarting the Game

Now that our button is dispatching a RESTART_GAME event, we need to update the relevant components to implement this restarting behavior. Let’s first update our GameState class to detect these events, and invoke a new RestartGame() method when they occur:

1// GameState.h
2// ...
3
4class GameState {
5public:
6  void HandleEvent(SDL_Event& E) {
7    using namespace UserEvents;
8    if (E.type == SDL_KEYDOWN) {
9      HandleKeyEvent(E.key);
10    } else if (E.type == APPLE_EATEN) {
11      ++Snake.Length;
12    } else if (E.type == RESTART_GAME) {
13      RestartGame();
14    }
15  }
16  // ...
17
18private:
19  void RestartGame() {}
20  // ...
21};

Our RestartGame() method will reset our member variables to their initial values:

1// GameState.h
2// ...
3
4class GameState {
5  // ...
6private:
7  void RestartGame() {
8    ElapsedTime = 0;
9    Snake = {Config::GRID_ROWS / 2, 3, 2, Right};
10    NextDirection = Right;
11  }
12  // ...
13};

Finally, our Cell objects need to react to the player restarting the game. We already have Initialize() and HandleEvent() functions in that class, so we’ll just update HandleEvent() to call Initialize() in response to the event:

1// Cell.h
2// ...
3
4class Cell {
5public:
6  void HandleEvent(SDL_Event& E) {
7    using namespace UserEvents;
8    if (E.type == ADVANCE) {
9      Advance(E.user);
10    } else if (E.type == APPLE_EATEN) {
11      if (CellState == Snake) {
12        ++SnakeDuration;
13      }
14    } else if (E.type == RESTART_GAME) {
15      Initialize();
16    }
17  }
18  // ...
19};

Pausing the Game

Currently, when the player starts (or restarts) the game, the snake immediately starts moving. This isn’t a great experience, so we’ll give our game the capability to pause itself.

In this example, we’ll only pause the game when it first opens and after the user presses restart, but feel free to expand this if you feel comfortable. You could, for example, add a keybinding to let the user pause at any time.

To keep track of whether the game is paused, we’ll add an IsPaused member to the GameState class. When this is true, the Tick() function won’t do anything except immediately return:

1// GameState.h
2// ...
3
4class GameState {
5public:
6  // ...
7  void Tick(Uint32 DeltaTime) {
8    if (IsPaused) return;
9
10    ElapsedTime += DeltaTime;
11    if (ElapsedTime >= Config::ADVANCE_INTERVAL) {
12      ElapsedTime = 0;
13      UpdateSnake();
14    }
15  }
16  // ...
17
18private:
19  // ...
20  bool IsPaused; 
21};

We’ll set IsPaused to true when the game starts, and any time it is restarted:

1// GameState.h
2// ...
3
4class GameState {
5  // ...
6private:
7  void RestartGame() {
8    IsPaused = true;
9    ElapsedTime = 0;
10    Snake = {Config::GRID_ROWS / 2, 3, 2, Right};
11    NextDirection = Right;
12  }
13
14  bool IsPaused{true};
15};

Starting the Game

We’ll let the user unpause the game by moving the snake right. As we’re only pausing at the start of the game, and the first apple always spawns to the right, this should feel like an intuitive way to start the game.

We’ll also call UpdateSnake() when the game is unpaused, thereby advancing the game state immediately when the user presses the key. This is optional, but makes the game feel more responsive compared to waiting for the advance interval to pass before the snake starts moving:

1// GameState.h
2// ...
3
4class GameState {
5// ...
6private:
7  void HandleKeyEvent(SDL_KeyboardEvent& E) {
8    switch (E.keysym.sym) {
27      case SDLK_RIGHT:
28      case SDLK_d:
29        if (IsPaused) {
30          IsPaused = false;
31          NextDirection = Right;
32          UpdateSnake();
33        } else if (Snake.Direction != Left) {
34          NextDirection = Right;
35        }
36        break;
37    }
38  }
39  // ...
40};

Running our game, we should now see that it starts in the paused state, and reverts to this paused state any time it is restarted.

Complete Code

Complete versions of the files we changed in this part are available below

GameConfig.h (Edited)

1#pragma once
2#define CHECK_ERRORS
3
4#include <iostream>
5#include <SDL.h>
6#include <string>
7
8namespace UserEvents{
9  inline Uint32 ADVANCE =
10    SDL_RegisterEvents(1);
11  inline Uint32 APPLE_EATEN =
12    SDL_RegisterEvents(1);
13  inline Uint32 RESTART_GAME =
14    SDL_RegisterEvents(1);
15}
16
17namespace Config{
18  // Game Settings
19  inline const std::string GAME_NAME{
20    "Snake"};
21  inline constexpr int ADVANCE_INTERVAL{200};
22
23  inline constexpr int GRID_COLUMNS{16};
24  static_assert(
25    GRID_COLUMNS >= 12,
26    "Grid must be at least 12 columns wide");
27
28  inline constexpr int GRID_ROWS{5};
29  static_assert(
30    GRID_ROWS >= 5,
31    "Grid must be at least 5 rows tall");
32
33  // Size and Positioning
34  inline constexpr int PADDING{5};
35  inline constexpr int CELL_SIZE{36};
36  inline constexpr int FOOTER_HEIGHT{60};
37
38  inline constexpr int GRID_HEIGHT{
39    CELL_SIZE * GRID_ROWS
40  };
41  inline constexpr int GRID_WIDTH{
42    CELL_SIZE * GRID_COLUMNS};
43
44  inline constexpr int WINDOW_HEIGHT{
45    GRID_HEIGHT + FOOTER_HEIGHT
46    + PADDING * 2};
47  inline constexpr int WINDOW_WIDTH{
48    GRID_WIDTH + PADDING * 2};
49
50  // Colors
51  inline constexpr SDL_Color BACKGROUND_COLOR{
52    85, 138, 52, 255};
53  inline constexpr SDL_Color CELL_COLOR_A{
54    171, 214, 82, 255};
55  inline constexpr SDL_Color CELL_COLOR_B{
56    161, 208, 74, 255};
57  inline constexpr SDL_Color SNAKE_COLOR{
58    67, 117, 234, 255};
59  inline constexpr SDL_Color BUTTON_COLOR{
60    73, 117, 46, 255};
61  inline constexpr SDL_Color FONT_COLOR{
62    255, 255, 255, 255};
63
64  // Asset Paths
65  inline const std::string APPLE_IMAGE{
66    "apple.png"};
67  inline const std::string FONT{
68    "Rubik-SemiBold.ttf"};
69}
70
71inline void CheckSDLError(
72  const std::string& Msg){
73#ifdef CHECK_ERRORS
74  const char* error = SDL_GetError();
75  if (*error != '\0') {
76    std::cerr << Msg << " Error: "
77      << error << '\n';
78    SDL_ClearError();
79  }
80#endif
81}

RestartButton.h (Created)

1#pragma once
2#include <SDL.h>
3#include "GameConfig.h"
4#include "Engine/Text.h"
5
6class RestartButton {
7public:
8  void Render(SDL_Surface* Surface) {
9    SDL_FillRect(Surface, &ButtonRect,
10      SDL_MapRGB(
11        Surface->format,
12        CurrentColor.r,
13        CurrentColor.g,
14        CurrentColor.b
15      )
16    );
17    Text.Render(Surface, &TextRect);
18  }
19
20  void HandleEvent(SDL_Event& E) {
21    using namespace UserEvents;
22    if (E.type == SDL_MOUSEBUTTONDOWN) {
23      HandleClick(E.button);
24    }
25  }
26
27private:
28  void HandleClick(SDL_MouseButtonEvent& E) {
29    using namespace UserEvents;
30    if (
31      E.x >= ButtonRect.x &&
32      E.x <= ButtonRect.x + ButtonRect.w &&
33      E.y >= ButtonRect.y &&
34      E.y <= ButtonRect.y + ButtonRect.h
35    ) {
36      SDL_Event RestartEvent{RESTART_GAME};
37      SDL_PushEvent(&RestartEvent);
38    }
39  }
40
41  Text Text{"RESTART", 20};
42
43  SDL_Rect ButtonRect{
44    Config::WINDOW_WIDTH - 150,
45    Config::GRID_HEIGHT + Config::PADDING * 2,
46    150 - Config::PADDING,
47    Config::FOOTER_HEIGHT - Config::PADDING
48  };
49
50  SDL_Rect TextRect{
51    ButtonRect.x + Config::PADDING * 5,
52    ButtonRect.y + Config::PADDING * 3,
53    0, 0
54  };
55
56  SDL_Color CurrentColor{Config::BUTTON_COLOR};
57};

GameUI.h (Edited)

1#pragma once
2#include <SDL.h>
3#include "Grid.h"
4#include "Assets.h"
5#include "RestartButton.h"
6
7class GameUI {
8 public:
9  GameUI(): Grid{Assets} {}
10
11  void HandleEvent(SDL_Event& E) {
12    Grid.HandleEvent(E);
13    RestartButton.HandleEvent(E);
14  }
15
16  void Tick(Uint32 DeltaTime) {
17    Grid.Tick(DeltaTime);
18  }
19
20  void Render(SDL_Surface* Surface) {
21    Grid.Render(Surface);
22    RestartButton.Render(Surface);
23  }
24
25 private:
26  Grid Grid;
27  Assets Assets;
28  RestartButton RestartButton;
29};

GameState.h (Edited)

1#pragma once
2#include <SDL.h>
3#include "GameConfig.h"
4#include "SnakeData.h"
5
6class GameState {
7public:
8  void HandleEvent(SDL_Event& E) {
9    using namespace UserEvents;
10    if (E.type == SDL_KEYDOWN) {
11      HandleKeyEvent(E.key);
12    } else if (E.type == APPLE_EATEN) {
13      ++Snake.Length;
14    } else if (E.type == RESTART_GAME) {
15      RestartGame();
16    }
17  }
18
19  void Tick(Uint32 DeltaTime) {
20    if (IsPaused) return;
21
22    ElapsedTime += DeltaTime;
23    if (ElapsedTime >= Config::ADVANCE_INTERVAL) {
24      ElapsedTime = 0;
25      UpdateSnake();
26    }
27  }
28
29private:
30  void HandleKeyEvent(SDL_KeyboardEvent& E) {
31    switch (E.keysym.sym) {
32      case SDLK_UP:
33      case SDLK_w:
34        if (Snake.Direction != Down) {
35          NextDirection = Up;
36        }
37        break;
38      case SDLK_DOWN:
39      case SDLK_s:
40        if (Snake.Direction != Up) {
41          NextDirection = Down;
42        }
43        break;
44      case SDLK_LEFT:
45      case SDLK_a:
46        if (Snake.Direction != Right) {
47          NextDirection = Left;
48        }
49        break;
50      case SDLK_RIGHT:
51      case SDLK_d:
52        if (IsPaused) {
53          IsPaused = false;
54          NextDirection = Right;
55          UpdateSnake();
56        } else if (Snake.Direction != Left) {
57          NextDirection = Right;
58        }
59        break;
60    }
61  }
62
63  void UpdateSnake() {
64    Snake.Direction = NextDirection;
65    switch (NextDirection) {
66      case Up:
67        Snake.HeadRow--;
68        break;
69      case Down:
70        Snake.HeadRow++;
71        break;
72      case Left:
73        Snake.HeadCol--;
74        break;
75      case Right:
76        Snake.HeadCol++;
77        break;
78    }
79
80    SDL_Event Event{UserEvents::ADVANCE};
81    Event.user.data1 = &Snake;
82    SDL_PushEvent(&Event);
83  }
84
85  void RestartGame() {
86    IsPaused = true;
87    ElapsedTime = 0;
88    Snake = {Config::GRID_ROWS / 2, 3, 2, Right};
89    NextDirection = Right;
90  }
91
92  bool IsPaused{true};
93  Uint32 ElapsedTime{0};
94  SnakeData Snake{
95    Config::GRID_ROWS / 2, 3, 2, Right};
96  MovementDirection NextDirection{Right};
97};

Cell.h (Edited)

1#pragma once
2#include <SDL.h>
3#include "GameConfig.h"
4#include "SnakeData.h"
5#include "Assets.h"
6
7enum CellState { Snake, Apple, Empty };
8
9class Cell {
10public:
11  Cell(int Row, int Column, Assets& Assets)
12  : Row(Row),
13    Column(Column),
14    Assets{Assets}
15  {
16    Initialize();
17  }
18
19  void HandleEvent(SDL_Event& E) {
20    using namespace UserEvents;
21    if (E.type == ADVANCE) {
22      Advance(E.user);
23    } else if (E.type == APPLE_EATEN) {
24      if (CellState == Snake) {
25        ++SnakeDuration;
26      }
27    } else if (E.type == RESTART_GAME) {
28      Initialize();
29    }
30  }
31
32  void Tick(Uint32 DeltaTime) {}
33
34  void Render(SDL_Surface* Surface) {
35    SDL_FillRect(Surface, &BackgroundRect,
36      SDL_MapRGB(
37        Surface->format,
38        BackgroundColor.r,
39        BackgroundColor.g,
40        BackgroundColor.b
41      )
42    );
43
44    if (CellState == Apple) {
45      Assets.Apple.Render(Surface, &BackgroundRect);
46    } else if (CellState == Snake) {
47      SDL_FillRect(Surface, &BackgroundRect,
48        SDL_MapRGB(
49          Surface->format,
50          Config::SNAKE_COLOR.r,
51          Config::SNAKE_COLOR.g,
52          Config::SNAKE_COLOR.b
53        )
54      );
55    }
56  }
57
58  bool PlaceApple() {
59    if (CellState != Empty) return false;
60
61    CellState = Apple;
62    return true;
63  }
64
65private:
66  void Initialize() {
67    CellState = Empty;
68    SnakeDuration = 0;
69
70    int MiddleRow{Config::GRID_ROWS / 2};
71    if (Row == MiddleRow && Column == 2) {
72      CellState = Snake;
73      SnakeDuration = 1;
74    } else if (Row == MiddleRow && Column == 3) {
75      CellState = Snake;
76      SnakeDuration = 2;
77    } else if (Row == MiddleRow && Column == 11) {
78      CellState = Apple;
79    }
80  }
81
82  void Advance(SDL_UserEvent& E) {
83    SnakeData* Data{static_cast<SnakeData*>(
84      E.data1)};
85
86    bool isThisCell{
87      Data->HeadRow == Row &&
88      Data->HeadCol == Column
89    };
90
91    if (isThisCell) {
92      if (CellState == Apple) {
93        SDL_Event Event{UserEvents::APPLE_EATEN};
94        SDL_PushEvent(&Event);
95      }
96      CellState = Snake;
97      SnakeDuration = Data->Length;
98    } else if (CellState == Snake) {
99      SnakeDuration--;
100      if (SnakeDuration <= 0) {
101        CellState = Empty;
102      }
103    }
104  }
105
106  int Row;
107  int Column;
108  CellState CellState;
109  int SnakeDuration;
110
111  SDL_Rect BackgroundRect{
112    Column * Config::CELL_SIZE + Config::PADDING,
113    Row * Config::CELL_SIZE + Config::PADDING,
114    Config::CELL_SIZE, Config::CELL_SIZE};
115
116  SDL_Color BackgroundColor{
117    (Row + Column) % 2 == 0
118      ? Config::CELL_COLOR_A
119      : Config::CELL_COLOR_B};
120
121  Assets& Assets;
122};

Files not listed above have not been changed since the previous section.

Summary

We've implemented UI positioning, text rendering, and mouse interaction handling to create a functional button that allows players to restart the game at any time. We've also added a pause mechanism that starts the game in a paused state and resumes when the player presses the right arrow key.

The key things we did in this lesson include:

Positioned a restart button using SDL_Rect structures
Used our Text class to render text within our button
Added event handling to let our button react to the player clicking on it
Dispatched a custom RESTART_GAME event to notify other components when the player wants to restart
We implemented a pause/resume mechanism to improve the game flow

Free and Unlimited Access

Professional C++

Unlock the true power of C++ by mastering complex features, optimizing performance, and learning expert workflows used in professional development

Ryan McCombe

Posted 8 hours ago

Lesson Contents