Building the Score Display

Build a dynamic score counter that tracks the player's progress and displays it with custom graphics and text.

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

In this lesson, we'll implement a score counter for our Snake game to help players track their progress.

We'll build a UI component that displays the current score alongside the maximum possible score, complete with a custom background and an apple icon.

Screenshot showing the final state of the snake game

Creating a `ScoreCounter` Class

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};

Background Rendering

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:

Screenshot showing our score counter background in the bottom left of the UI

Apple Rendering

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};

Screenshot showing our score counter background with an apple icon in the bottom left of the UI

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)

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 GAME_WON =
14    SDL_RegisterEvents(1);
15  inline Uint32 GAME_LOST =
16    SDL_RegisterEvents(1);
17  inline Uint32 RESTART_GAME =
18    SDL_RegisterEvents(1);
19}
20
21namespace Config{
22  // Game Settings
23  inline const std::string GAME_NAME{
24    "Snake"};
25  inline constexpr int ADVANCE_INTERVAL{200};
26
27  inline constexpr int GRID_COLUMNS{16};
28  static_assert(
29    GRID_COLUMNS >= 12,
30    "Grid must be at least 12 columns wide");
31
32  inline constexpr int GRID_ROWS{5};
33  static_assert(
34    GRID_ROWS >= 5,
35    "Grid must be at least 5 rows tall");
36
37  inline constexpr int MAX_LENGTH{
38    GRID_COLUMNS * GRID_ROWS};
39
40  // Size and Positioning
41  inline constexpr int PADDING{5};
42  inline constexpr int CELL_SIZE{36};
43  inline constexpr int FOOTER_HEIGHT{60};
44
45  inline constexpr int GRID_HEIGHT{
46    CELL_SIZE * GRID_ROWS};
47  inline constexpr int GRID_WIDTH{
48    CELL_SIZE * GRID_COLUMNS};
49
50  inline constexpr int WINDOW_HEIGHT{
51    GRID_HEIGHT + FOOTER_HEIGHT
52    + PADDING * 2};
53
54  inline constexpr int WINDOW_WIDTH{
55    GRID_WIDTH + PADDING * 2};
56
57  // Colors
58  inline constexpr SDL_Color BACKGROUND_COLOR{
59    85, 138, 52, 255};
60  inline constexpr SDL_Color CELL_COLOR_A{
61    171, 214, 82, 255};
62  inline constexpr SDL_Color CELL_COLOR_B{
63    161, 208, 74, 255};
64  inline constexpr SDL_Color SNAKE_COLOR{
65    67, 117, 234, 255};
66  inline constexpr SDL_Color SNAKE_LOST_COLOR{
67    227, 67, 97, 255};
68  inline constexpr SDL_Color SNAKE_VICTORY_COLOR{
69    255, 140, 0, 255};
70  inline constexpr SDL_Color BUTTON_COLOR{
71    73, 117, 46, 255};
72  inline constexpr SDL_Color BUTTON_HIGHLIGHT_COLOR{
73    67, 117, 234, 255};
74  inline constexpr SDL_Color SCORE_BACKGROUND_COLOR{
75    73, 117, 46, 255};
76  inline constexpr SDL_Color FONT_COLOR{
77    255, 255, 255, 255};
78
79  // Asset Paths
80  inline const std::string APPLE_IMAGE{
81    "apple.png"};
82  inline const std::string FONT{
83    "Rubik-SemiBold.ttf"};
84}
85
86inline void CheckSDLError(
87  const std::string& Msg){
88#ifdef CHECK_ERRORS
89  const char* error = SDL_GetError();
90  if (*error != '\0') {
91    std::cerr << Msg << " Error: "
92      << error << '\n';
93    SDL_ClearError();
94  }
95#endif
96}

ScoreCounter.h (Created)

1#pragma once
2#include <SDL.h>
3#include "Engine/Text.h"
4#include "Assets.h"
5#include "GameConfig.h"
6
7class ScoreCounter {
8public:
9  ScoreCounter(Assets& Assets) : Assets{Assets} {}
10
11  void HandleEvent(SDL_Event& E) {
12    if (E.type == UserEvents::APPLE_EATEN) {
13      ++CurrentScore;
14      Text.SetText(GetScoreString());
15    } else if (E.type == UserEvents::RESTART_GAME) {
16      CurrentScore = 0;
17      Text.SetText(GetScoreString());
18    }
19  }
20
21  void Render(SDL_Surface* Surface) {
22    using namespace Config;
23    SDL_FillRect(Surface, &BackgroundRect,
24      SDL_MapRGB(Surface->format,
25        SCORE_BACKGROUND_COLOR.r,
26        SCORE_BACKGROUND_COLOR.g,
27        SCORE_BACKGROUND_COLOR.b
28      ));
29
30    Assets.Apple.Render(Surface, &AppleRect);
31    Text.Render(Surface, &TextRect);
32  }
33
34private:
35  std::string GetScoreString() {
36    return std::to_string(CurrentScore) + "/"
37      + std::to_string(MaxScore);
38  }
39
40  Assets& Assets;
41  int CurrentScore{0};
42  int MaxScore{Config::MAX_LENGTH - 2};
43  Text Text{GetScoreString(), 40};
44
45  SDL_Rect BackgroundRect{
46    Config::PADDING,
47    Config::GRID_HEIGHT + Config::PADDING * 2,
48    MaxScore > 99 ? 250 : 190,
49    Config::FOOTER_HEIGHT - Config::PADDING};
50
51  SDL_Rect AppleRect{
52    BackgroundRect.x + Config::PADDING,
53    BackgroundRect.y + Config::PADDING,
54    BackgroundRect.h - Config::PADDING * 2,
55    BackgroundRect.h - Config::PADDING * 2};
56
57  SDL_Rect TextRect{
58    AppleRect.x + AppleRect.w + Config::PADDING,
59    AppleRect.y,
60    0, 0};
61};

GameUI.h (Edited)

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

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.

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