Building the Score Display

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.

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

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

Over in our GameUI 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// GameUI.h
2// ...
3#include "ScoreCounter.h"
4
5class GameUI {
6 public:
7  GameUI()
8  : Grid{Assets},
9    ScoreCounter{Assets}
10  {}
11
12  void HandleEvent(SDL_Event& E) {
13    Grid.HandleEvent(E);
14    ScoreCounter.HandleEvent(E);
15    RestartButton.HandleEvent(E);
16  }
17
18  void Tick(Uint32 DeltaTime) {
19    Grid.Tick(DeltaTime);
20  }
21
22  void Render(SDL_Surface* Surface) {
23    Grid.Render(Surface);
24    ScoreCounter.Render(Surface);
25    RestartButton.Render(Surface);
26  }
27
28 private:
29  ScoreCounter ScoreCounter;
30  // ...
31};

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 GameConfig.h to control what color this background should be:

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

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// ScoreCounter.h
2// ...
3#include "GameConfig.h"
4
5class ScoreCounter {
6  // ...
7private:
8  int MaxScore{Config::MAX_LENGTH - 2};
9  // ...
10};

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 y 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// ScoreCounter.h
2// ...
3
4class ScoreCounter {
5  // ...
6private:
7  // Snake's initial length is 2
8  int MaxScore{Config::MAX_LENGTH - 2};
9    
10  SDL_Rect BackgroundRect{
11    Config::PADDING,
12    Config::GRID_HEIGHT + Config::PADDING * 2,
13    MaxScore > 99 ? 250 : 190,
14    Config::FOOTER_HEIGHT - Config::PADDING
15  };
16  // ...
17};

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

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

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 Assets 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:

1// ScoreCounter.h
2// ...
3
4class ScoreCounter {
5  // ...
6private:
7  // ...
8  SDL_Rect AppleRect{
9    BackgroundRect.x + Config::PADDING,
10    BackgroundRect.y + Config::PADDING,
11    BackgroundRect.h - Config::PADDING * 2,
12    BackgroundRect.h - Config::PADDING * 2
13  };
14};

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

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

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:

1// ScoreCounter.h
2// ...
3
4class ScoreCounter {
5  // ...
6private:
7  int CurrentScore{0}; 
8  int MaxScore{Config::MAX_LENGTH - 2};
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:

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

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

1// ScoreCounter.h
2// ...
3
4class ScoreCounter {
5  // ...
6private:
7  std::string GetScoreString() {
8    return std::to_string(CurrentScore) + "/"
9      + std::to_string(MaxScore);
10  }
11  // ...
12};

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:

1// ScoreCounter.h
2// ...
3#include "Engine/Text.h"
4
5class ScoreCounter {
6  // ...
7private:
8  // ...
9  Text Text{GetScoreString(), 40};
10};

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:

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

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

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

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:

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

Complete Code

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

GameConfig.h (Edited)

ScoreCounter.h (Created)

GameUI.h (Edited)

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 Snake game. We implemented background rendering, image display, and text updates to create a polished user interface element that tracks the player's progress.

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