Breakout: Project Setup

In this project, we'll build a complete clone of the classic arcade game, Breakout. We'll implement all the core mechanics, including a paddle, a ball, breakable bricks, scoring, and multiple levels.

To get started, we'll set up our project structure. We will be reusing a lot of code from our previous projects, including the component-based game engine and the level editor. This allows us to hit the ground running and focus on game-specific logic rather than rebuilding foundational systems.

This first lesson will walk you through all the starting files, highlighting the minor changes we've made to our engine since we last worked on it. By the end, you'll have a running application that shows both our editor window and a new, empty window for our Breakout game.

Starting Point

Our starting point for this project is provided below, which primarily is split across three directories:

• Editor/ contains the files we built in the map editor project, which we can use to build levels for our game.
• Engine/ contains the code we wrote in the previous few chapters, covering the scene management as well as our entity and component system. We've made some minor changes to these files since the previous chapter, which we'll walk through later in this section.
• Breakout/ is where we'll add our new, game-specific functionality.

All of these starting files are available as a zip file:

• breakout-start.zip

This file includes some sample levels in the "/Assets" directory if you don't have any from our earlier level editor project.

Editor

The files in our editor directory haven't been changed since our previous project. The main.cpp and Config.h files are also from our editor project, with a few additions we'll note later in the section.

When WITH_EDITOR is defined, our program loads our editor, which can be used to create and modify levels for our game.

We'll load the files created by this editor into our breakout game later in the project.

Note that, for now, we'll assume that WITH_EDITOR is always defined. Our project may not compile correctly if WITH_EDITOR is not defined. At the end of the project, we'll update our project to allow the editor to be fully excluded, and for our game to ship without it.

Engine

Most of our starting code is in the Engine/ directory, which includes all the code we wrote in the previous few chapters. It matches the code we finished in our previous chapter, but with a few small changes. We'll highlight those changes below.

Include Directories

Our engine files are now stored within Engine/ and Engine/ECS/ directories. Therefore, we need to either update our project's include directories within our build configuration, or update all of our #include directives to reflect this new location.

The starting code we provided above has chosen the latter approach, prepending Engine/ or Engine/ECS/ as appropriate. For example:

1// ...
2
3// Before:
4#include "Component.h"
5#include "Vec2.h"
6
7// After:
8#include "Engine/ECS/Component.h"
9#include "Engine/Vec2.h"
10
11// ...

Config::Engine

The Engine/Window.h class is loading its title, size, and background color from variables defined within the Config::Engine namespace.

We've added these values to our Config.h file:

1// ...
2
3namespace Config::Engine {
4inline const std::string WINDOW_TITLE{"Breakout"};
5inline const int WINDOW_WIDTH{720};
6inline const int WINDOW_HEIGHT{400};
7inline const SDL_Color WINDOW_BACKGROUND{
8  35, 35, 35, 255};
9}
10
11// ...

Scene::GetWidth() and Scene::GetHeight()

To help with the positioning of our elements, our Scene class has added getters to provide access to the private WorldSpaceWidth and WorldSpaceHeight variables:

1// ...
2
3class Scene {
4public:
5  // ...
6  float GetWidth() { return WorldSpaceWidth; }
7  float GetHeight() { return WorldSpaceHeight; }
8  // ...
9};

Entity::AddComponent<>() and Entity::GetComponent<>()

In our component chapters, we mentioned that our approach to defining functions like GetTransformComponent() and GetPhysicsComponent() was problematic. Every time we added a new component type, or a new constructor to an existing component type, we needed to update our Entity class with more functions.

We proposed a more advanced technique involving templates to circumvent that limitation, which we've now implemented:

1// ...
2
3class Entity {
4public:
5  // ...
6  template <typename CType, typename... CArgs>
7  requires std::derived_from<CType, Component>
8  CType* AddComponent(CArgs&&... ConstructorArgs) {
9    ComponentPtr& NewComponent{
10      Components.emplace_back(
11        std::make_unique<CType>(
12          this,
13          std::forward<CArgs>(ConstructorArgs)...
14        )
15      )
16    };
17    NewComponent->Initialize();
18    return static_cast<CType*>(NewComponent.get());
19  }
20
21  template <typename CType>
22  requires std::derived_from<CType, Component>
23  CType* GetComponent() {
24    for (const ComponentPtr& C : Components) {
25      if (auto Ptr{dynamic_cast<CType*>(
26        C.get()
27      )}) {
28        return Ptr;
29      }
30    }
31    return nullptr;
32  }
33  // ...
34};

To add a component to an entity, we now use AddComponent<>(), passing the component type within < and >, and constructor arguments for that component within the ( and ). For a hypothetical AudioComponent, that might look like this:

1// Before:
2AddAudioComponent(42, 9.8, true);
3
4// After:
5AddComponent<AudioComponent>(42, 9.8, true);

To retrieve a component, we use GetComponent<>(), passing the component type within < and >, and an empty set of brackets - ( and )

1// Before:
2GetAudioComponent();
3
4// After:
5GetComponent<AudioComponent>();

This allows us to simplify our Entity class significantly by removing a lot of GetSomeComponent() and AddSomeComponent()-style functions.

Note that, after removing those functions, some of our existing code will need to be updated to use the new API. For example:

1// ...
2// Additional #include directives may also be needed
3#include "TransformComponent.h"
4
5Vec2 Component::GetOwnerPosition() const {
6  TransformComponent* Transform{
7    // Before:
8    GetOwner()->GetTransformComponent()
9    // After:
10    GetOwner()->GetComponent<TransformComponent>()
11  };
12  if (!Transform) {
13    std::cerr << "Error: attempted to get position"
14      " of an entity with no transform component\n";
15    return {0, 0};
16  }
17  return Transform->GetPosition();
18}

Our starting code provided above includes these changes

Vec2 Forward Declaration

An earlier version of a previous lesson was incorrectly forward-declaring our Vec2 type as a class when it was actually a struct. This error was in the Component.h header file.

That has now been corrected in the lesson and the starting code above, but if following on using your own version of the files, you may still have that issue:

1#pragma once
2#include <SDL.h>
3
4class Entity;
5class Scene;
6class AssetManager;
7class Vec2; 
8struct Vec2; 
9
10// ...
11
12class Component {
13  // ...
14};

Breakout Files

Finally, we have the Breakout/ directory, which is where we'll store classes that are specific to our game. However, not all of our work in this project will be within this directory - we'll be adding new capabilities to classes within the Engine/ directory too.

This separation is useful as, if we keep our engine code generic, we can reuse those components over and over again, across multiple projects. Capabilities we add to our engine during the process of making one game can make the next game better, or quicker to build.

The BreakoutScene Class

For now, the only breakout-specific code we'll add is a BreakoutScene class, which will eventually orchestrate our game flow. For now, it just inherits from the base Scene class in our Engine, and forwards the window to the base constructor.

We'll connect this BreakoutScene to our main loop in the next section:

1#pragma once
2#include <SDL.h>
3#include "Engine/Scene.h"
4
5class BreakoutScene : public Scene {
6 public:
7  BreakoutScene(Window& ParentWindow)
8  : Scene{ParentWindow} {}
9};

main.cpp Updates

Our main.cpp primarily uses the same code from our level editor project. We've just added a new Window for our game, a BreakoutScene instance to manage it, and we've connected both to the event and application loops:

1#include <SDL.h>
2#include <SDL_image.h>
3#include <SDL_ttf.h>
4
5#include "Config.h"
6#include "Engine/Window.h"
7#include "Breakout/BreakoutScene.h"
8
9#ifdef WITH_EDITOR
10#include "Editor/Scene.h"
11#include "Editor/Window.h"
12#endif
13
14int main(int argc, char** argv) {
15  SDL_Init(SDL_INIT_VIDEO);
16  CheckSDLError("SDL_Init");
17
18  IMG_Init(IMG_INIT_PNG);
19  CheckSDLError("IMG_Init");
20
21  TTF_Init();
22  CheckSDLError("TTF_Init");
23
24#ifdef WITH_EDITOR
25  Editor::Window EditorWindow;
26  Editor::Scene EditorScene{EditorWindow};
27#endif
28  Window GameWindow;
29  BreakoutScene GameScene{GameWindow};
30
31  Uint64 LastTick{SDL_GetPerformanceCounter()};
32  SDL_Event E;
33  while (true) {
34    while (SDL_PollEvent(&E)) {
35#ifdef WITH_EDITOR
36      EditorScene.HandleEvent(E);
37#endif
38      GameScene.HandleEvent(E);
39      if (
40        E.type == SDL_QUIT ||
41        E.type == SDL_WINDOWEVENT &&
42        E.window.event == SDL_WINDOWEVENT_CLOSE
43      ) {
44        TTF_Quit();
45        IMG_Quit();
46        SDL_Quit();
47        return 0;
48      }
49    }
50
51    Uint64 CurrentTick{SDL_GetPerformanceCounter()};
52    float DeltaTime{
53      static_cast<float>(CurrentTick - LastTick) /
54        SDL_GetPerformanceFrequency()
55    };
56    LastTick = CurrentTick;
57
58#ifdef WITH_EDITOR
59    EditorScene.Tick(DeltaTime);
60    EditorWindow.Render();
61    EditorScene.Render(EditorWindow.GetSurface());
62    EditorWindow.Update();
63#endif
64
65    GameScene.Tick(DeltaTime);
66    GameWindow.Render();
67    GameScene.Render(GameWindow.GetSurface());
68    GameWindow.Update();
69  }
70
71  return 0;
72}

Mouse Focus Clickthrough

By default, SDL will not report a mouse click event on a window that did not have input focus. This is a sensible default for single-window applications but can be a bit unintuitive for multi-window programs.

For example, if we wanted to click the "Play" button in our editor, but the editor does not have input focus, we'd have to click it twice. The first click would make the window active, but not provide a click event to which our button can react.

We can change this behaviour by setting the SDL_HINT_MOUSE_FOCUS_CLICKTHROUGH hint to "1", rather than its default value of "0":

1// ...
2
3int main(int argc, char** argv) {
4  // ...
5
6#ifdef WITH_EDITOR
7  Editor::Window EditorWindow;
8  Editor::Scene EditorScene{EditorWindow};
9  SDL_SetHint(
10    SDL_HINT_MOUSE_FOCUS_CLICKTHROUGH, "1"
11  );
12#endif
13  
14  // ...
15
16  return 0;
17}

Assets

As usual, we should ensure the SDL DLL files are provided alongside our executable file. Any font and image files we reference should also be stored alongside the executable file.

In our code examples, we reference images and fonts using paths like "Assets/Rubik-SemiBold.ttf" and "Assets/Brick_Blue_A.png". That means that an "Assets" directory should exist in the same location as our executable, and that "Assets" directory should include files like "Rubik-SemiBold.ttf" and "Brick_Blue_A.png"

The assets used in our examples are provided below, but feel free to substitute your own if preferred:

• Breakout Free Assets on Itch.io
• Rubik Font on Google Fonts

All of the code we introduced in this lesson, in addition to three example levels serialized from the map editor, are available here:

• breakout-start.zip

CMakeLists.txt

If you're using CMake, a CMakeLists.txt file is provided below that includes all the source files our build needs. It will also automatically copy the DLL files to the same location as the executable.

Files stored in an "Assets" directory within the project folder will also be copied to an "Assets" directory in the same location as the executable.

1cmake_minimum_required(VERSION 3.16)
2set(CMAKE_CXX_STANDARD 20)
3project(Breakout VERSION 1.0.0)
4
5add_executable(Breakout
6  "main.cpp"
7
8  "Editor/Source/Button.cpp"
9  "Editor/Source/Blocks.cpp"
10  "Editor/Source/Actor.cpp"
11  "Editor/Source/ActorTooltip.cpp"
12  "Editor/Source/Level.cpp"
13
14  "Engine/Source/Scene.cpp"
15  "Engine/ECS/Source/Component.cpp"
16  "Engine/ECS/Source/CollisionComponent.cpp"
17  "Engine/ECS/Source/ImageComponent.cpp"
18  "Engine/ECS/Source/PhysicsComponent.cpp"
19  "Engine/ECS/Source/InputComponent.cpp"
20  "Engine/ECS/Source/Commands.cpp"
21  
22  # These will be added later
23  # "Breakout/Source/BreakoutScene.cpp"
24  # "Breakout/Source/Ball.cpp"
25)
26
27target_compile_definitions(
28  Breakout PUBLIC
29  WITH_EDITOR
30  CHECK_ERRORS
31  
32  # We'll use these later
33  # DRAW_DEBUG_HELPERS
34  # ENABLE_CHEATS
35)
36
37target_include_directories(
38  Breakout PUBLIC
39  ${PROJECT_SOURCE_DIR}
40)
41
42add_subdirectory(external/SDL)
43add_subdirectory(external/SDL_image)
44add_subdirectory(external/SDL_ttf)
45
46target_link_libraries(Breakout PRIVATE
47  SDL2
48  SDL2_image
49  SDL2_ttf
50)
51
52if (WIN32)
53  target_link_libraries(
54    Breakout PRIVATE SDL2main
55  )
56endif()
57
58set(AssetDirectory "${PROJECT_SOURCE_DIR}/Assets")
59add_custom_command(
60  TARGET Breakout POST_BUILD
61  COMMAND
62  ${CMAKE_COMMAND} -E copy_if_different
63    "$<TARGET_FILE:SDL2>"
64    "$<TARGET_FILE:SDL2_image>"
65    "$<TARGET_FILE:SDL2_ttf>"
66    "$<TARGET_FILE_DIR:Breakout>"
67
68  COMMAND
69  ${CMAKE_COMMAND} -E copy_directory_if_different
70    "${AssetDirectory}"
71    "$<TARGET_FILE_DIR:Breakout>/Assets"
72  VERBATIM
73)

Summary

Our starting point should compile successfully, showing our Editor window and a currently-empty Breakout window:

We've successfully established the foundation for our Breakout clone. This lesson involved gathering all our previous work on the level editor and game engine, organizing it into a coherent project structure, and creating the initial BreakoutScene class for our game.

Our application now compiles and runs, displaying both the editor and an empty game window, ready for us to start adding gameplay elements.

Here's what we've accomplished:

• We created a project structure that separates game-specific code (Breakout/) from reusable code (Engine/, Editor/).
• We upgraded our Entity class to use generic, templated functions for adding and retrieving components, making our engine more flexible.
• We configured main.cpp to run both the editor and the game loop simultaneously.
• We learned how the SDL_HINT_MOUSE_FOCUS_CLICKTHROUGH hint makes multi-window interactions smoother.

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

View Course