Building the Score Display

We'll continue from where we left off in the previous lesson. Our project already has a grid of interactive cells, win/loss detection, and a restart button.

Let's begin by creating a ScoreCounter class to manage our UI element. To get access to the apple image, we'll accept a reference to the Assets manager as a constructor argument.

Our score counter will also need to be notified of events and render itself, so let's add HandleEvent() and Render() methods:

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

Over in our SnakeUI class, we'll create an instance of our ScoreCounter, pass the Assets to the constructor, and hook it up to our HandleEvent() and Render() pipelines:

1#pragma once
2#include <SDL3/SDL.h>
3#include "Assets.h"
4#include "Snake/Grid.h"
5#include "Snake/RestartButton.h"
6#include "Snake/ScoreCounter.h"
7
8class SnakeUI {
9 public:
10  SnakeUI()
11    : Grid{AssetList},
12      ScoreCounter{AssetList},
13      RestartBtn{
14        Config::WINDOW_WIDTH - 150,
15        Config::GRID_HEIGHT + Config::PADDING * 2,
16        150 - Config::PADDING,
17        Config::FOOTER_HEIGHT - Config::PADDING
18      } {}
19
20  void HandleEvent(const SDL_Event& E) {
21    Grid.HandleEvent(E);
22    ScoreCounter.HandleEvent(E);
23    RestartBtn.HandleEvent(E);
24  }
25
26  void Tick(Uint64 DeltaTime) {
27    Grid.Tick(DeltaTime);
28  }
29
30  void Render(SDL_Surface* Surface) {
31    Grid.Render(Surface);
32    ScoreCounter.Render(Surface);
33    RestartBtn.Render(Surface);
34  }
35
36 private:
37  Assets AssetList;
38  Grid Grid;
39  ScoreCounter ScoreCounter;
40  RestartButton RestartBtn;
41};

To render our ScoreCounter, we'll start by rendering a solid rectangle, acting as the background of our element. We'll add a configuration variable to Globals.h to control what color this background should be:

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

To control where our ScoreCounter is positioned within the window, we'll need to define an SDL_Rect, with the usual x, y, w, and h values.

In this case, the width (w) for our rectangle depends on how much text is going to be rendered on top of it. If our maximum possible score contains 3 digits, we need more space than if it contains only 2 - for example, "12/75" requires more space than "123/520".

To help with this, we'll calculate a MaxScore variable from the maximum length of our snake, and we'll subtract 2 because our snake starts with a length of 2:

1#pragma once
2#include <SDL3/SDL.h>
3#include "Assets.h"
4#include "Globals.h"
5
6class ScoreCounter {
7public:
8  ScoreCounter(Assets& Assets) : AssetList{Assets} {}
9  void HandleEvent(const SDL_Event& E) {}
10  void Render(SDL_Surface* Surface) {}
11  
12private:
13  Assets& AssetList;
14  int MaxScore{Config::MAX_LENGTH - 2};
15};

Next, we'll define an SDL_Rect scaled in the following way:

• x: We want the score counter aligned to the left of our window with some padding to offset it from the edge, so our horizontal position will simply be Config::PADDING.
• y: We want the vertical position to be below the grid. The grid's bottom edge is located at Config::PADDING + Config::GRID_HEIGHT. We want additional padding between our grid and score counter, so we'll set the y position to be Config::GRID_HEIGHT + Config::PADDING * 2.
• w: We'll set the width of our score counter based on our MaxScore variable. For example: MaxScore > 99 ? 250 : 190 will adopt a size of 250 pixels if we need to support 3 digits or 190 otherwise.
• h: We'll set our score counter to match the full height of the footer, with some padding below. So we'll set h to Config::FOOTER_HEIGHT - Config::PADDING

Let's add this to our class. Note that because it depends on the MaxScore variable, we need to initialize it after MaxScore:

1#pragma once
2#include <SDL3/SDL.h>
3#include "Assets.h"
4
5class ScoreCounter {
6public:
7  ScoreCounter(Assets& Assets) : AssetList{Assets} {}
8  void HandleEvent(const SDL_Event& E) {}
9  void Render(SDL_Surface* Surface) {}
10  
11private:
12  Assets& AssetList;
13  int MaxScore{Config::MAX_LENGTH - 2};
14
15  SDL_Rect BackgroundRect{
16    Config::PADDING,
17    Config::GRID_HEIGHT + Config::PADDING * 2,
18    MaxScore > 99 ? 250 : 190,
19    Config::FOOTER_HEIGHT - Config::PADDING
20  };
21};

We can now update our Render() function to use these BackgroundRect and Config::SCORE_BACKGROUND_COLOR to render our background rectangle in the correct position:

1#pragma once
2#include <SDL3/SDL.h>
3#include "Assets.h"
4
5class ScoreCounter {
6public:
7  ScoreCounter(Assets& Assets) : AssetList{Assets} {}
8  void HandleEvent(const SDL_Event& E) {}
9  
10  void Render(SDL_Surface* Surface) {
11    using namespace Config;
12    SDL_FillSurfaceRect(Surface, &BackgroundRect,
13      SDL_MapRGB(
14        SDL_GetPixelFormatDetails(Surface->format),
15        nullptr,
16        SCORE_BACKGROUND_COLOR.r,
17        SCORE_BACKGROUND_COLOR.g,
18        SCORE_BACKGROUND_COLOR.b
19      )
20    );
21  }
22  // ...
23};

Running our program, we should now see our score counter's background rendered in the correct location:

Let's add the apple image to our score counter. We already have access to the apple image through the AssetList member, so we just need to define an SDL_Rect to control where the image is rendered.

The x and y positions will match the x and y positions of our background rectangle, with some additional padding to move the apple away from the edge.

Our apple image is square, so we can set both the w and h of our image to match the background rectangle's height. We'll subtract Config::PADDING * 2 from these values, to add spacing on both sides of each dimension:

src/Snake/ScoreCounter.h

1#pragma once
2#include <SDL3/SDL.h>
3#include "Assets.h"
4
5class ScoreCounter {
6  // ...
7private:
8  // ...
9  SDL_Rect AppleRect{
10    BackgroundRect.x + Config::PADDING,
11    BackgroundRect.y + Config::PADDING,
12    BackgroundRect.h - Config::PADDING * 2,
13    BackgroundRect.h - Config::PADDING * 2
14  };
15};

We can now update our Render() function to render the apple image in this rectangle:

src/Snake/ScoreCounter.h

1#pragma once
2#include <SDL3/SDL.h>
3#include "Assets.h"
4
5class ScoreCounter {
6public:
7  // ...
8  void Render(SDL_Surface* Surface) {
9    using namespace Config;
10    SDL_FillSurfaceRect(Surface, &BackgroundRect,
11      SDL_MapRGB(
12        SDL_GetPixelFormatDetails(Surface->format),
13        nullptr,
14        SCORE_BACKGROUND_COLOR.r,
15        SCORE_BACKGROUND_COLOR.g,
16        SCORE_BACKGROUND_COLOR.b
17      )
18    );
19
20    AssetList.Apple.Render(Surface, &AppleRect);
21  }
22  // ...
23};

Score Tracking

We want to render text in the format "12/34" where "12" is our current score, and "34" is the maximum possible score. We already have the MaxScore variable, so we just need to add the CurrentScore, which we'll initialize to 0:

src/Snake/ScoreCounter.h

1#pragma once
2#include <SDL3/SDL.h>
3#include "Assets.h"
4
5class ScoreCounter {
6  // ...
7private:
8  int CurrentScore{0}; 
9  // ...
10};

In our HandleEvent() function, we'll increment this score every time an apple is eaten, and set it back to 0 every time our game restarts:

src/Snake/ScoreCounter.h

1// ...
2
3class ScoreCounter {
4public:
5  // ...
6  void HandleEvent(const SDL_Event& E) {
7    if (E.type == UserEvents::APPLE_EATEN) {
8      ++CurrentScore;
9    } else if (E.type == UserEvents::RESTART_GAME) {
10      CurrentScore = 0;
11    }
12  }
13  // ...
14};

To create the CurrentScore/MaxScore string, we'll create a private GetScoreString() helper:

src/Snake/ScoreCounter.h

1#pragma once
2#include <SDL3/SDL.h>
3#include <string>
4#include "Assets.h"
5
6class ScoreCounter {
7// ...
8private:
9  std::string GetScoreString() {
10    return std::to_string(CurrentScore) + "/"
11      + std::to_string(MaxScore);
12  }
13// ...
14};

Text Rendering

To manage our text, we'll create an instance of our Text class from Engine/Text.h. For the constructor, we pass in the initial content of our text, and the font size we want to use:

src/Snake/ScoreCounter.h

1#pragma once
2#include <SDL3/SDL.h>
3#include <string>
4#include "Assets.h"
5#include "Engine/Text.h"
6
7class ScoreCounter {
8  // ...
9private:
10  // ...
11  Engine::Text Text{GetScoreString(), 40};
12};

We need to define another SDL_Rect to control where our text should be rendered.

• Horizontally, we want the text to be after our apple image, with some additional padding. So we'll set the x position to be AppleRect.x + AppleRect.w + Config::PADDING.
• Vertically, we want the text aligned with the apple image, so we'll set y to be the same as AppleRect.y.

The Render() method within Text uses SDL_BlitSurface(), which doesn't require the SDL_Rect to have a width and height. As such, we can just set these to 0.

Let's create an SDL_Rect object called TextRect that uses these values. Note that because TextRect depends on AppleRect, we should ensure AppleRect is initialized first:

src/Snake/ScoreCounter.h

1// ...
2class ScoreCounter {
3  // ...
4private:
5  // ...
6  SDL_Rect TextRect{
7    AppleRect.x + AppleRect.w + Config::PADDING,
8    AppleRect.y,
9    0, 0
10  };
11};

We now have what we need to render our Text object to the Surface provided to ScoreCounter::Render():

src/Snake/ScoreCounter.h

1// ...
2class ScoreCounter {
3public:
4  // ...
5  void Render(SDL_Surface* Surface) {
6    using namespace Config;
7    SDL_FillSurfaceRect(Surface, &BackgroundRect,
8      SDL_MapRGB(
9        SDL_GetPixelFormatDetails(Surface->format),
10        nullptr,
11        SCORE_BACKGROUND_COLOR.r,
12        SCORE_BACKGROUND_COLOR.g,
13        SCORE_BACKGROUND_COLOR.b
14      )
15    );
16
17    AssetList.Apple.Render(Surface, &AppleRect);
18    Text.Render(Surface, &TextRect);
19  }
20  // ...
21};

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

Finally, we need to update the content our Text object is rendering any time the score changes. We can do this in our HandleEvent() function:

src/Snake/ScoreCounter.h

1// ...
2#include "Engine/Text.h"
3
4class ScoreCounter {
5public:
6  // ...
7  void HandleEvent(const SDL_Event& E) {
8    if (E.type == UserEvents::APPLE_EATEN) {
9      ++CurrentScore;
10      Text.SetText(GetScoreString());
11    } else if (E.type == UserEvents::RESTART_GAME) {
12      CurrentScore = 0;
13      Text.SetText(GetScoreString());
14    }
15  }
16  // ...
17};

Complete Code

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

Files

src

Select a file to view its content

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

Summary

In this lesson, we built a score counter UI component for our game. We implemented background rendering, image display, and text updates to create a user interface element that tracks the player's progress.

In the final lesson, we'll finish off by updating the visual rendering of our snake, letting it smoothly slide between cells using frame-by-frame animation.