Snake Game Core Components

Engine/Text.h

We’ll include a Text class that uses SDL_ttf to load a font and render text onto an SDL_Surface:

1#pragma once
2#include <SDL.h>
3#include <SDL_ttf.h>
4#include <string>
5#include "GameConfig.h"
6
7class Text {
8public:
9  Text(
10    const std::string& InitialText,
11    int FontSize
12  ) : Content(InitialText),
13      Font(nullptr),
14      TextSurface(nullptr) {
15
16    Font = TTF_OpenFont(
17      Config::FONT.c_str(), FontSize);
18    CheckSDLError("Opening Font");
19
20    SetText(InitialText);
21  }
22
23  ~Text() {
24    if (TextSurface) {
25      SDL_FreeSurface(TextSurface);
26    }
27    if (Font) {
28      TTF_CloseFont(Font);
29    }
30  }
31
32  Text(const Text&) = delete;
33  Text& operator=(const Text&) = delete;
34
35  void SetText(const std::string& NewText) {
36    Content = NewText;
37
38    if (TextSurface) {
39      SDL_FreeSurface(TextSurface);
40    }
41    TextSurface = TTF_RenderText_Blended(
42      Font, Content.c_str(), Config::FONT_COLOR);
43    CheckSDLError("Creating Text Surface");
44  }
45
46  void Render(
47    SDL_Surface* Surface, SDL_Rect* Rect
48  ) {
49    if (TextSurface) {
50      SDL_BlitSurface(
51        TextSurface, nullptr, Surface, Rect
52      );
53    }
54  }
55
56private:
57  std::string Content;
58  TTF_Font* Font;
59  SDL_Surface* TextSurface;
60};

This Text class uses the techniques we covered in our introduction to SDL_ttf:

Rendering Text with SDL_ttf

Learn to render and manipulate text in SDL2 applications using the official SDL_ttf extension

Engine/Image.h

The last file in our Engine directory contains an Image class that uses SDL_image to render an image onto an SDL_Surface:

1#pragma once
2#include <SDL.h>
3#include <SDL_image.h>
4#include <string>
5
6class Image {
7 public:
8  Image(const std::string& Path) {
9    ImageSurface = IMG_Load(Path.c_str());
10    CheckSDLError("Loading Image");
11  }
12
13  ~Image() {
14    if (ImageSurface) {
15      SDL_FreeSurface(ImageSurface);
16    }
17  }
18
19  void Render(
20    SDL_Surface* Surface, SDL_Rect* Rect
21  ) {
22    SDL_BlitScaled(
23      ImageSurface, nullptr, Surface, Rect);
24  }
25
26  // Prevent copying
27  Image(const Image&) = delete;
28  Image& operator=(const Image&) = delete;
29
30 private:
31  SDL_Surface* ImageSurface;
32};

This Image class uses the techniques we covered in our introduction to images, surface blitting, and SDL_Image:

Loading and Displaying Images

Learn how to load, display, and optimize image rendering in your applications

Assets.h

We’ll create an asset manager class to make our shared assets available to any component that needs them. In this project, we’ll only need to share our apple image, but we’ll create an Assets class to take care of this and give us an easy way to expand our asset collection as needed:

1#pragma once
2#include "GameConfig.h"
3#include "Engine/Image.h"
4
5struct Assets {
6  Image Apple{Config::APPLE_IMAGE};
7};

GameUI.h

To manage our UI elements, we’ll create a GameUI class. It includes our standard set of game loop methods, HandleEvent(), Tick() and Render().

It will forward these calls to the UI elements it manages, once we create them.

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

main.cpp

Let’s hook everything up in our main() function. It implements the standard game loop and event loop setup we’ve used throughout the course. We’ll forward events, tick, and render our Window and GameUI as appropriate.

We’ll also calculate the time delta between frames to help our Tick() functions. We’ll provide these time deltas in milliseconds:

1#include <SDL.h>
2#include <SDL_image.h>
3#include <SDL_ttf.h>
4
5#include "Engine/Window.h"
6#include "GameUI.h"
7
8int main(int argc, char** argv) {
9  SDL_Init(SDL_INIT_VIDEO);
10  CheckSDLError("Initializing SDL");
11
12  IMG_Init(IMG_INIT_PNG);
13  CheckSDLError("Initializing SDL_image");
14
15  TTF_Init();
16  CheckSDLError("Initializing SDL_ttf");
17
18  Window GameWindow{};
19  GameUI UI{};
20
21  Uint32 PreviousTick{SDL_GetTicks()};
22  Uint32 CurrentTick;
23  Uint32 DeltaTime;
24
25  SDL_Event Event;
26  while (true) {
27    CurrentTick = SDL_GetTicks();
28    DeltaTime = CurrentTick - PreviousTick;
29
30    // Events
31    while (SDL_PollEvent(&Event)) {
32      UI.HandleEvent(Event);
33      if (Event.type == SDL_QUIT) {
34        SDL_Quit();
35        IMG_Quit();
36        return 0;
37      }
38    }
39
40    // Tick
41    UI.Tick(DeltaTime);
42
43    // Render
44    GameWindow.Render();
45    UI.Render(GameWindow.GetSurface());
46
47    // Swap
48    GameWindow.Update();
49
50    PreviousTick = CurrentTick;
51  }
52
53  return 0;
54}

Assets and Dependencies

This project requires a font to render text, and an image to represent the apples that our snake eats. Our implementation assumes that the apple image is an approximately square .png file with a transparent background. The screenshot and code examples in this chapter are using the following assets:

• Rubik-SemiBold.tff from Google Fonts
• apple.png by AomAm on IconFinder

We’ll save our font and image in the Assets/ directory to ensure our project files contain all the required assets. However, we also need to ensure we ship them alongside our executable. This is also the case when running the game on our machine - we need to place these assets in the same location where our build tools are creating our executable.

We additionally need to ensure this directory also contains the required SDL libraries:

• The SDL library (eg SDL.dll)
• The SDL_image (eg SDL_image.dll)
• The SDL_ttf library (eg SDL_ttf.dll)

We covered this process in detail in our introductory chapter where we installed these libraries for the first time.

CMakeLists.txt

Those using the CMake build automation tool may find the following CMakeLists.txt file helpful. It assumes we’re building the SDL libraries (SDL, SDL_image, and SDL_ttf) from a subdirectory called /external.

This CMake configuration also automatically copies our image, font, and DLL files to the output directory when we build our game:

1cmake_minimum_required(VERSION 3.16)
2
3set(CMAKE_CXX_STANDARD 20)
4
5project(Snake VERSION 1.0.0)
6add_executable(Snake
7  "main.cpp"
8  "GameConfig.h"
9  "Engine/Window.h"
10  "Engine/Image.h"
11  "Engine/Text.h"
12  "Engine/Random.h"
13  "GameUI.h"
14  "Assets.h"
15
16  # Files that will be added later:
17  # "GameState.h"
18  # "Cell.h"
19  # "Grid.h"
20  # "SnakeData.h"
21  # "ScoreCounter.h"
22  # "RestartButton.h"
23)
24
25target_include_directories(
26  Snake PUBLIC ${PROJECT_SOURCE_DIR}
27)
28
29add_subdirectory(external/SDL)
30add_subdirectory(external/SDL_image)
31add_subdirectory(external/SDL_ttf)
32
33target_link_libraries(Snake PRIVATE
34  SDL2
35  SDL2_image
36  SDL2_ttf
37)
38
39if (WIN32)
40  target_link_libraries(
41    Snake PRIVATE SDL2main
42  )
43endif()
44
45set(AssetDirectory "${PROJECT_SOURCE_DIR}/Assets")
46add_custom_command(
47  TARGET Snake POST_BUILD COMMAND
48  ${CMAKE_COMMAND} -E copy_if_different
49    "$<TARGET_FILE:SDL2>"
50    "$<TARGET_FILE:SDL2_image>"
51    "$<TARGET_FILE:SDL2_ttf>"
52    "${AssetDirectory}/apple.png"
53    "${AssetDirectory}/Rubik-SemiBold.ttf"
54    "$<TARGET_FILE_DIR:Snake>"
55  VERBATIM
56)

We covered this approach to setting up an SDL project in a dedicated chapter earlier in the course:

Building SDL2 from a Subdirectory (CMake)

A step-by-step guide on setting up SDL2 and useful extensions in a project that uses CMake as its build system

Running the Project

Our project should compile and run successfully. We should see a window with the title, width, height, and background color we defined in GameConfig.h:

Summary

This lesson covered the essential building blocks of our Snake game, implementing the core game loop and supporting features. Key components:

• The GameConfig.h header file stores configuration variables that will control our game’s logic and presentation
• The Window class is responsible for managing our window, including the underlying SDL_Window pointer
• The Random namespace allows us to generate random integers, which we’ll need to dynamically position the apples our snake needs to eat
• The Text and Image classes manage the rendering of fonts and image files, providing the content in the form of an SDL_Surface.
• The Asset class manages our image assets, allowing them to be shared across multiple components later in our game
• The GameUI class is where we will construct and orchestrate all of our UI elements as we build them in future lessons
• The main function in main.cpp pulls everything together by initializing the core components and implementing a standard application loop to manage our systems.