Level Editor Starting Point

Large games tend to be complex projects, developed over many years. Because of this, developers often spend as much time building the tools that help build the game as they do building anything that players will directly see.

In this project, we apply the techniques we learned in the previous few chapters around window and mouse management and serialization and deserialization to create a basic level editor tool

On the right of our tool, we’ll have a menu where users have a list of objects - or "actors" - they can choose from. They can drag and drop actors from this menu onto the level on the left to add instances of them to the level. The footer will also allow them to save levels to their hard drive, and load levels they previously saved

The techniques we cover will be applicable to a huge range of tools but, as the project continues, we’ll direct it more towards creating levels for a breakout game. Later in the course, we’ll add the game that loads and plays these levels

In this introduction, we’ll quickly add a lot of files and classes to serve as a starting point. There’s a lot of code here, but it’s all files and techniques we’re already familiar with from previous projects.

We’ll give a quick tour of the starting point in this lesson, and then slow down in future sections as we start to implement newer concepts.

Application Loop

As usual, our starting point is main.cpp, which orchestrates the application's lifecycle in much the same way we did in previous projects. It begins by initializing the necessary SDL subsystems using SDL_Init(), IMG_Init(), and TTF_Init(), along with error checking.

Next, it instantiates the main Editor::Window and the corresponding Editor::Scene. The primary while loop continuously polls for events, calculates frame timing (DeltaTime), updates the editor's state via EditorScene.Tick(), and handles rendering through the EditorWindow and EditorScene.

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

Preprocessor Definition: WITH_EDITOR

We use preprocessor directives, specifically #ifdef WITH_EDITOR, to manage which parts of the code get compiled. This project structure anticipates having both the editor and the actual game coexist within the same codebase eventually. We’ll add the game as a later project in the course.

The editor itself is a tool for developers or designers, not part of the final product shipped to players. Therefore, we enclose all editor-specific initialization, includes, and logic within these #ifdef blocks.

If the WITH_EDITOR symbol is defined when compiling, the editor code is included. If it's not defined, the compiler skips these sections, resulting in a build that contains only the game logic (once we add it).

Preprocessor Definitions

Explore the essential concepts of C++ preprocessing, from understanding directives to implementing macros

Tick Function: DeltaTime

Our main loop calculates DeltaTime, representing the time elapsed between frames, using SDL_GetPerformanceCounter() and SDL_GetPerformanceFrequency(). This value is passed to the EditorScene.Tick() function, which will eventually pass it along to all the objects it is managing.

In this initial stage of the editor project, none of our components actively use DeltaTime for frame-rate independent movement or animation. We're primarily dealing with static UI elements and event-driven interactions.

However, we include the DeltaTime calculation and pass it through our Tick() functions anyway. It anticipates potential future needs, either for custom editor features you might add or for the game logic we'll integrate later, which will require time-based updates.

Tick Rate and Time Deltas

Learn how to create smooth, time-aware game loops that behave consistently across different hardware configurations

Quit Event

Our quit detection is a little more elaborate than previous projects, because our level editor will have multiple windows. We’ll have our main window, and a small utility window for displaying tooltips.

By default, SDL only pushes an SDL_QUIT even when every window is closed. Users will have no way to directly close our tooltip window, so we’ve modified our application loop to end when any window is closed. We do this by checking not just for SDL_QUIT events, but also for SDL_WINDOWEVENT_CLOSE events

We covered utility windows, multiple-window applications, and the SDL_WINDOWEVENT_CLOSE in our earlier lesson:

Multiple Windows and Utility Windows

Learn how to manage multiple windows, and practical examples using utility windows.

Window Class

The Editor/Window.h file introduces our Window class, designed specifically for the editor's main window. Our Window class is very similar to what we have been using previously. It handles creating the SDL_Window in its constructor and destroying it in the destructor, managing the resource lifecycle.

To keep the editor code distinct and well-organized, we've placed this class (and others related to the editor) inside an Editor namespace. Correspondingly, the header and source files reside in an Editor/ subdirectory within our project structure.

1#pragma once
2#include <SDL.h>
3#include "Config.h"
4
5namespace Editor{
6class Window {
7public:
8  Window() {
9    SDLWindow = SDL_CreateWindow(
10      Config::Editor::WINDOW_TITLE.c_str(),
11      SDL_WINDOWPOS_UNDEFINED,
12      SDL_WINDOWPOS_UNDEFINED,
13      Config::Editor::WINDOW_WIDTH,
14      Config::Editor::WINDOW_HEIGHT,
15      0
16    );
17    CheckSDLError("Creating Editor Window");
18  }
19
20  ~Window() {
21    if (SDLWindow && SDL_WasInit(SDL_INIT_VIDEO)) {
22      SDL_DestroyWindow(SDLWindow);
23    }
24  }
25
26  Window(const Window&) = delete;
27  Window& operator=(const Window&) = delete;
28
29  void Render() {
30    auto [r, g, b, a]{
31      Config::Editor::WINDOW_BACKGROUND
32    };
33
34    SDL_FillRect(
35      GetSurface(), nullptr,
36      SDL_MapRGB(GetSurface()->format, r, g, b));
37  }
38
39  void Update() {
40    SDL_UpdateWindowSurface(SDLWindow);
41  }
42
43  SDL_Surface* GetSurface() const {
44    return SDL_GetWindowSurface(SDLWindow);
45  }
46
47  bool HasMouseFocus() const {
48    int x, y, w, h, MouseX, MouseY;
49    SDL_GetWindowPosition(SDLWindow, &x, &y);
50    SDL_GetWindowSize(SDLWindow, &w, &h);
51    SDL_GetGlobalMouseState(&MouseX, &MouseY);
52
53    if (
54      MouseX < x ||
55      MouseX > x + w ||
56      MouseY < y ||
57      MouseY > y + h
58    ) {
59      return false;
60    }
61    return true;
62  }
63
64  SDL_Point GetPosition() const {
65    int x, y;
66    SDL_GetWindowPosition(SDLWindow, &x, &y);
67    return {x, y};
68  }
69
70  SDL_Point GetSize() const {
71    int x, y;
72    SDL_GetWindowSize(SDLWindow, &x, &y);
73    return {x, y};
74  }
75
76private:
77  SDL_Window* SDLWindow{nullptr};
78};
79}

Getters

Two helpful additions to the Editor::Window class are the GetPosition() and GetSize() methods. They act as convenient wrappers around the underlying SDL functions SDL_GetWindowPosition() and SDL_GetWindowSize().

This information is exposed because other parts of our editor system, particularly those dealing with mouse input relative to the window or UI element placement, will need access to the window's current state.

They return the requested information packaged within an SDL_Point structure. This built-in SDL type is a basic container for two integers, x and y. We’ll use this type any time a function needs to return two such integers but, of course, we can design our API in any way we want

The HasMouseFocus() Function

In the future, our project will contain multiple main windows - one for the level editor, and one for the game. Because of this, we need a way to check which window certain events, such as SDL_MouseMotionEvents, correspond to.

Ideally, we’d prefer to use the SDL_GetMouseFocus() function to understand which window has mouse focus. However, when we have utility windows such as a tooltip, the tooltip window may have mouse focus rather than our main window.

As such, our HasMouseFocus() window, and some of our future code, uses indirect ways to determine if the mouse is hovering over a specific window.

Managing Mouse Focus with SDL2

Learn how to track and respond to mouse focus events in SDL2, including handling multiple windows and customizing focus-related click behavior.

Scene Class

The Editor::Scene class acts as the main container and manager for the content displayed within our Editor::Window. It holds references to assets and will eventually manage all the UI elements and actors within the editor.

It includes the standard HandleEvent(), Tick(), and Render() methods, forming the core interface for interacting with the scene from the main application loop. It also holds an AssetManager instance to provide access to shared resources like images.

It also keeps a reference to its parent Window. This allows the scene to query the window for information, such as whether it currently has mouse focus via the scene's own HasMouseFocus() method.

Our scene takes up the full area of its parent window, so if our ParentWindow has mouse focus, then the scene inherently also has mouse focus. As such, Sceen::HasMouseFocus() just offloads the work to the equivalent function on the ParentWindow.

1#pragma once
2#include <SDL.h>
3#include "AssetManager.h"
4#include "Window.h"
5
6namespace Editor{
7class Scene {
8 public:
9  Scene(Window& ParentWindow)
10  : ParentWindow{ParentWindow}
11  {}
12
13  void HandleEvent(const SDL_Event& E) {
14
15  }
16
17  void Tick(float DeltaTime) {
18
19  }
20
21  void Render(SDL_Surface* Surface) {
22
23  }
24
25  AssetManager& GetAssets() {
26    return Assets;
27  }
28
29  bool HasMouseFocus() const {
30    return ParentWindow.HasMouseFocus();
31  }
32
33  Window& GetWindow() const {
34    return ParentWindow;
35  }
36
37 private:
38  Window& ParentWindow;
39  AssetManager Assets;
40};
41}

Image Class

The Editor::Image class is our wrapper around SDL_Surface for loading and rendering image files. It's functionally very similar to image classes we have used in previous projects, handling image loading via IMG_Load() in its constructor and cleanup via SDL_FreeSurface() in its destructor.

As with other editor components, it resides in the Editor namespace. One subtle but important change is in the Render() method's signature: the SDL_Rect Rect parameter is now passed by copy, not by reference (SDL_Rect* or SDL_Rect&).

This change is necessary because SDL_BlitScaled() can modify the destination rectangle pointer (&Rect in this case) if the blit operation results in clipping. By passing the SDL_Rect by copy, we ensure that the original rectangle object used by the caller of Render() remains unchanged, preventing unexpected side effects.

We covered blitting and this cropping behaviour in detail here:

Loading and Displaying Images

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

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

Text Class

The Editor::Text class provides functionality for rendering text using SDL_ttf. It's very similar to text rendering classes we've implemented before, managing a TTF_Font and an SDL_Surface to hold the rendered text.

Its constructor takes the initial string and font size. It uses the font file path and color defined in our Config namespace (Config::FONT and Config::FONT_COLOR) to load the font and render the initial text surface using TTF_RenderText_Blended().

The Render() method takes a destination SDL_Surface and an SDL_Rect*. It calculates the position needed to center the text surface within the provided rectangle and then blits the text using SDL_BlitSurface(). A SetText() method allows updating the displayed text dynamically.

1#pragma once
2#include <SDL.h>
3#include <SDL_ttf.h>
4#include <string>
5#include "Config.h"
6
7namespace Editor{
8class Text {
9public:
10  Text(
11    const std::string& InitialText,
12    int FontSize
13  ) : Content(InitialText) {
14    Font = TTF_OpenFont(
15      Config::FONT.c_str(), FontSize);
16    CheckSDLError("Opening Font");
17    SetText(InitialText);
18  }
19
20  ~Text() {
21    if (!SDL_WasInit(SDL_INIT_VIDEO)) {
22      return;
23    }
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(Font,
42      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) return;
50
51    int TextW{TextSurface->w};
52    int TextH{TextSurface->h};
53
54    // Center the text
55    SDL_Rect Destination {
56      Rect->x + (Rect->w - TextW) / 2,
57      Rect->y + (Rect->h - TextH) / 2,
58      TextW, TextH
59    };
60
61    SDL_BlitSurface(
62      TextSurface, nullptr,
63      Surface, &Destination
64    );
65  }
66
67private:
68  std::string Content;
69  TTF_Font* Font{nullptr};
70  SDL_Surface* TextSurface{nullptr};
71};
72}

Button Class

Editor/Button.h defines a general-purpose Button class for our editor's interface. Each button has a defined rectangular area (Rect), a text label managed by an Editor::Text instance, and a visual state represented by the ButtonState enum.

The button automatically manages hover detection, switching between ButtonState::Normal and ButtonState::Hover. A click action is tied to the virtual HandleLeftClick() function, designed to be overridden by specific button types.

Furthermore, the button's state can be explicitly set using SetState(). This allows us to visually indicate an Active state (e.g., a button corresponding to the level that is currenty loaded) or a Disabled state, where the button becomes unresponsive to mouse events and changes color to indicate unavailability.

1#pragma once
2#include <SDL.h>
3#include <string>
4#include "Text.h"
5
6enum class ButtonState {
7  Normal = 0,
8  Hover = 1,
9  Active = 2,
10  Disabled = 3
11};
12
13namespace Editor{
14class Scene;
15class Button {
16public:
17  Button(
18    Scene& ParentScene,
19    const std::string& Text,
20    SDL_Rect Rect
21  ) : ButtonText{Text, 20},
22      Rect{Rect},
23      ParentScene{ParentScene} {}
24
25  virtual void HandleLeftClick() {}
26  void HandleEvent(const SDL_Event& E);
27  void Render(SDL_Surface* Surface);
28  void Tick(float DeltaTime) {}
29
30  ButtonState GetState() const {
31    return State;
32  }
33
34  void SetState(ButtonState NewState) {
35    State = NewState;
36  }
37
38private:
39  Scene& ParentScene;
40  ButtonState State{ButtonState::Normal};
41  Text ButtonText;
42  SDL_Rect Rect;
43};
44}

The behaviour of our Button class is implemented in Editor/Source/Button.cpp. The Render() function is straightforward: it looks up the appropriate color for the current ButtonState in Config::BUTTON_COLORS, fills the button's rectangle (Rect) with that color, and overlays the text label using ButtonText.Render().

The HandleEvent() method filters incoming SDL events. It calls HandleLeftClick() on a left mouse click, but only if the button's state is currently Hover. When handling SDL_MOUSEMOTION, it performs an important preliminary check: ParentScene.HasMouseFocus().

This ensures that hover effects are only triggered when the mouse cursor is genuinely interacting with the scene containing the button, preventing incorrect highlighting if multiple windows are present. If the scene has focus, it then tests if the mouse position falls within the button's Rect to update the State between Normal and Hover.

1#include "Editor/Button.h"
2#include "Editor/Scene.h"
3
4using namespace Editor;
5
6void Button::HandleEvent(const SDL_Event& E) {
7  using enum ButtonState;
8  if (E.type == SDL_MOUSEBUTTONDOWN &&
9      E.button.button == SDL_BUTTON_LEFT &&
10      State == Hover
11  ) {
12    HandleLeftClick();
13  } else if (
14    E.type == SDL_MOUSEMOTION &&
15    ParentScene.HasMouseFocus()
16  ) {
17    SDL_Point Pos{E.motion.x, E.motion.y};
18    bool Hovering(SDL_PointInRect(&Pos, &Rect));
19    if (State == Normal && Hovering) {
20      State = Hover;
21    } else if (State == Hover && !Hovering) {
22      State = Normal;
23    }
24  }
25}
26
27void Button::Render(SDL_Surface* Surface) {
28  using namespace Config;
29  auto [r, g, b, a]{
30    BUTTON_COLORS[static_cast<int>(State)]};
31
32  SDL_FillRect(Surface, &Rect, SDL_MapRGB(
33                 Surface->format, r, g, b
34               ));
35
36  ButtonText.Render(Surface, &Rect);
37}

The Config Namespace

We use a Config.h file, placed in the project root, to centralize various configuration values and helper functions used throughout the application. Constants like button colors (BUTTON_COLORS), font settings (FONT, FONT_COLOR), and window properties are defined here using inline variables or constexpr.

Notice that editor-specific settings, like the window title and dimensions, are nested within a Config::Editor namespace. This separates configuration relevant only to the editor tool from potentially shared configuration (like font choices) that the game might also use later. These editor-specific values are also wrapped in #ifdef WITH_EDITOR.

The file also includes the CheckSDLError() helper function that we’ve been using in previous projects. Wrapped in an #ifdef CHECK_ERRORS, this function provides a way to check for and log SDL errors after critical SDL function calls during development builds, without adding overhead to release builds.

1#pragma once
2#include <iostream>
3#include <SDL.h>
4#include <string>
5#include <vector>
6
7namespace Config {
8inline const std::vector BUTTON_COLORS{
9  SDL_Color{15, 15, 15, 255},  // Normal
10  SDL_Color{15, 155, 15, 255}, // Hover
11  SDL_Color{225, 15, 15, 255}, // Active
12  SDL_Color{60, 60, 60, 255}   // Disabled
13};
14
15inline constexpr SDL_Color FONT_COLOR{
16  255, 255, 255, 255};
17
18inline const std::string FONT{
19  "Assets/Rubik-SemiBold.ttf"};
20}
21
22#ifdef WITH_EDITOR
23namespace Config::Editor {
24inline const std::string WINDOW_TITLE{
25  "Editor"};
26inline const int WINDOW_WIDTH{730};
27inline const int WINDOW_HEIGHT{300};
28inline const SDL_Color WINDOW_BACKGROUND{
29  35, 35, 35, 255};
30}
31#endif
32
33inline void CheckSDLError(
34  const std::string& Msg) {
35#ifdef CHECK_ERRORS
36  const char* error = SDL_GetError();
37  if (*error != '\0') {
38    std::cerr << Msg << " Error: "
39      << error << '\n';
40    SDL_ClearError();
41  }
42#endif
43}

Asset Manager

The Editor/AssetManager.h file defines a simple AssetManager struct within the Editor namespace. Its purpose is to load and hold shared Image resources needed by the editor UI.

Instead of having multiple different UI elements each load their own copy of "Assets/Brick_Blue_A.png", they can all access the single BlueBlock instance stored in the AssetManager. This avoids redundant memory usage for identical SDL_Surface objects and centralizes asset loading.

1#pragma once
2#include "Image.h"
3
4namespace Editor {
5struct AssetManager {
6  Image BlueBlock{"Assets/Brick_Blue_A.png"};
7  Image GreenBlock{"Assets/Brick_Green_A.png"};
8  Image CyanBlock{"Assets/Brick_Cyan_A.png"};
9  Image OrangeBlock{"Assets/Brick_Orange_A.png"};
10  Image RedBlock{"Assets/Brick_Red_A.png"};
11  Image YellowBlock{"Assets/Brick_Yellow_A.png"};
12};
13}

Assets and DLL Files

As with previous projects, we need to ensure the SDL DLL files are provided alongside our executable file. We also need to ensure that the image files listed in Editor::AssetManager and the font specified in Config::FONT are also in that location.

The Config and AssetManager files above, as well as the screenshots within the lessons, are using the following assets:

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

Our starting point should compile and run successfully, opening a blank window:

CMakeLists.txt

If you’re using CMake, a CMakeLists.txt file is provided below that will 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(Editor VERSION 1.0.0)
4
5add_executable(Editor
6  "main.cpp"
7  "Editor/Source/Button.cpp"
8
9  # These files will be added later
10  # "Editor/Source/Blocks.cpp"
11  # "Editor/Source/Level.cpp"
12  # "Editor/Source/Actor.cpp"
13  # "Editor/Source/ActorTooltip.cpp"
14)
15
16target_compile_definitions(
17  Editor PUBLIC
18  WITH_EDITOR
19  CHECK_ERRORS
20)
21
22target_include_directories(
23  Editor PUBLIC ${PROJECT_SOURCE_DIR}
24)
25
26add_subdirectory(external/SDL)
27add_subdirectory(external/SDL_image)
28add_subdirectory(external/SDL_ttf)
29
30target_link_libraries(Editor PRIVATE
31  SDL2
32  SDL2_image
33  SDL2_ttf
34)
35
36if (WIN32)
37  target_link_libraries(
38    Editor PRIVATE SDL2main
39  )
40endif()
41
42set(AssetDirectory "${PROJECT_SOURCE_DIR}/Assets")
43add_custom_command(
44  TARGET Editor POST_BUILD
45  COMMAND
46  ${CMAKE_COMMAND} -E copy_if_different
47    "$<TARGET_FILE:SDL2>"
48    "$<TARGET_FILE:SDL2_image>"
49    "$<TARGET_FILE:SDL2_ttf>"
50    "$<TARGET_FILE_DIR:Editor>"
51
52  COMMAND
53  ${CMAKE_COMMAND} -E copy_directory_if_different
54    "${AssetDirectory}"
55    "$<TARGET_FILE_DIR:Editor>/Assets"
56  VERBATIM
57)

Summary

In this lesson, we laid the essential groundwork for our level editor. We established the main application structure, including SDL initialization and the core event/update/render loop in main.cpp.

We created foundational classes within an Editor namespace:

• Window: Manages the main editor window.
• Scene: Orchestrates the content within the window.
• Image & Text: Handle graphical and text rendering.
• Button: Provides a base for interactive UI elements.
• AssetManager: Loads and shares image resources.

We also set up a Config.h for centralized settings and introduced conditional compilation (#ifdef WITH_EDITOR) to separate editor code from potential future game code. Techniques for handling multiple windows, like the HasMouseFocus() check and specific quit conditions, were implemented. Our project now compiles and runs, displaying a blank window, ready for the next steps.

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