Pausing and Restarting

We'll continue from where we left off in the previous lesson. Our project already has a grid of interactive cells, a controllable snake, and the ability for the snake to eat apples and grow.

To keep this lesson focused, the starting point below is a direct continuation of the previous lesson's final code.

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

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

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

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 later.

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

1// ...
2
3namespace Config{
4  inline constexpr int FOOTER_HEIGHT{60};
5  inline constexpr int WINDOW_HEIGHT{
6    GRID_HEIGHT
7    + FOOTER_HEIGHT
8    + PADDING * 2};
9
10  // ...
11}
12// ...

We'll create a RestartButton class to manage our button. We'll include the standard Render() and HandleEvent() methods:

1#pragma once
2#include <SDL3/SDL.h>
3
4class RestartButton {
5public:
6  RestartButton(int x, int y, int w, int h);
7
8  void Render(SDL_Surface* Surface);
9  void HandleEvent(const SDL_Event& E);
10};

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

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

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_FillSurfaceRect(), meaning we need an SDL_Rect to position our button, and a color value to control what color our blitted pixels will have. As a reminder, the API looks like this:

1SDL_FillSurfaceRect(Surface, &Rect, Color);

Let's start by defining the SDL_Rect's x, y, w, and h values in the SnakeUI constructor and passing them to our RestartButton.

• x: We want the horizontal position of our button to start 150 points 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 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 points 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 the bottom of the window. So we'll set the height of the button to be FOOTER_HEIGHT - PADDING.

1// ...
2class SnakeUI {
3 public:
4  SnakeUI()
5    : Grid{AssetList},
6      RestartBtn{
7        Config::WINDOW_WIDTH - 150,
8        Config::GRID_HEIGHT + Config::PADDING * 2,
9        150 - Config::PADDING,
10        Config::FOOTER_HEIGHT - Config::PADDING
11      } {}
12 // ...
13 private:
14  // ...
15  RestartButton RestartBtn;
16};

Now, inside the RestartButton class, we'll store this geometry in a private ButtonRect member. We'll also store its color in a CurrentColor member.

1#pragma once
2#include <SDL3/SDL.h>
3#include "Globals.h"
4
5class RestartButton {
6public:
7  RestartButton(int x, int y, int w, int h)
8    : ButtonRect{x, y, w, h},
9      CurrentColor{Config::BUTTON_COLOR} {}
10
11  void Render(SDL_Surface* Surface);
12  void HandleEvent(const SDL_Event& E);
13
14private:
15  SDL_Rect ButtonRect;
16  SDL_Color CurrentColor;
17};

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

1#pragma once
2#include <SDL3/SDL.h>
3#include "Globals.h"
4
5class RestartButton {
6public:
7  // ...
8  void Render(SDL_Surface* Surface) {
9    SDL_FillSurfaceRect(Surface, &ButtonRect,
10      SDL_MapRGB(
11        SDL_GetPixelFormatDetails(Surface->format),
12        nullptr,
13        CurrentColor.r,
14        CurrentColor.g,
15        CurrentColor.b
16      )
17    );
18  }
19  // ...
20};

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

Let's add the "RESTART" text to our button. We have 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.

We'll also add a TextRect member to control the positioning of our text:

1#pragma once
2#include <SDL3/SDL.h>
3#include "Globals.h"
4#include "Engine/Text.h"
5
6class RestartButton {
7public:
8  RestartButton(int x, int y, int w, int h)
9    : ButtonRect{x, y, w, h},
10      Text{"RESTART", 20} {}
11
12  void Render(SDL_Surface* Surface) override {
13    SDL_FillSurfaceRect(
14      Surface, &ButtonRect,
15      SDL_MapRGB(
16        SDL_GetPixelFormatDetails(Surface->format),
17        nullptr,
18        CurrentColor.r,
19        CurrentColor.g,
20        CurrentColor.b
21      )
22    );
23    Text.Render(Surface, &ButtonRect);
24  }
25  
26  void HandleEvent(const SDL_Event& E);
27
28private:
29  Engine::Text Text;
30  SDL_Rect ButtonRect;
31  SDL_Color CurrentColor;
32};

The base Button::Render() will draw the background, and then we call Text.Render() to draw the text on top of it. Our Engine::Text class automatically centers the text within the provided rectangle.

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

Now that our button is visually complete, we need to make it functional. First, let's define a new user event type in our Globals.h file:

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

This custom event will signal that the game should be restarted. Next, let's update the RestartButton class to detect clicks. It can do this by checking for SDL_MOUSEBUTTONDOWN events and performing a bounds check.

1// ...
2class RestartButton {
3public:
4  // ...
5  void HandleEvent(const SDL_Event& E) {
6    if (E.type == SDL_EVENT_MOUSE_BUTTON_DOWN) {
7      HandleClick(E.button);
8    }
9  }
10
11private:
12  void HandleClick(const SDL_MouseButtonEvent& E) {}
13  // ...
14};

Our HandleClick method checks if the mouse coordinates are within the button's rectangle. If they are, it creates and dispatches our custom RESTART_GAME event:

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

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

1// ...
2
3class GameState {
4  // ...
5private:
6  void RestartGame() {
7    ElapsedTime = 0;
8    Snake = {
9      .HeadRow = Config::GRID_ROWS / 2,
10      .HeadCol = 3,
11      .Length = 2,
12      .Direction = Right
13    };
14    NextDirection = Right;
15  }
16  // ...
17};

1// ...
2class Cell {
3public:
4  //...
5  void Reset();
6private:
7  void Initialize();
8  //...
9};

1// ...
2void Cell::Reset() { // Renamed from Initialize
3  //...
4}
5
6void Cell::HandleEvent(const SDL_Event& E) {
7  if (E.type == UserEvents::ADVANCE) {
8    Advance(E.user);
9  } else if (E.type == UserEvents::APPLE_EATEN) {
10    if (State == CellState::Snake) {
11      ++SnakeDuration;
12    }
13  } else if (E.type == UserEvents::RESTART_GAME) {
14    Reset();
15  }
16}
17//...

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

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

1// ...
2class GameState {
3// ...
4private:
5  void HandleKeyEvent(const SDL_KeyboardEvent& E) {
6    switch (E.key) {
Other Keys|Show
25      case SDLK_RIGHT:
26      case SDLK_D:
27        if (IsPaused) {
28          IsPaused = false;
29          NextDirection = Right;
30          UpdateSnake();
31        } else if (Snake.Direction != Left) {
32          NextDirection = Right;
33        }
34        break;
35    }
36  }
37  // ...
38};