Creating a Simple UI Architecture

The previous lesson covered how we could use an event loop to handle keyboard and mouse events from our users.

Having set up an application and event loop to handle user input, the next step is to build our next set of systems on top of it.

Managing all events directly in the event loop can get quite messy, so we should come up with a better way of managing it. In this lesson, we’ll establish a simple UI system, to handle all the complexity

The design pattern of event layers can be useful here.

Managing UI Complexity with Event Layers

Fundamentally, our goal is to transform an input event into some change in our application state. The change we need to make is based on the user intent that triggered that event.

In a game, for example, we might be rendering a 3D world, and have a series of UI elements layered on top.

If a user clicks their mouse, they might be trying to interact with the 3D world, like firing their weapon in a shooter game, or selecting a unit in a strategy game.

But, if the user was hovering over a button when they clicked their mouse, they were interacting with that button instead.

The input event hasn’t changed, but the user intent is completely different.

Creating an Event Layer System

Out of this, the concept of an event layer was created. We can think of the UI and the game world being two different layers. The UI layer sits on top of the world layer.

When a mouse event is received, the event loop first hands it to the top layer - the UI, in this case. The UI inspects the event and decides whether or not to handle it.

If the UI handles the event, the journey stops there - the lower layers never see it.

If the UI doesn’t handle the event, it then gets passed to the next layer, which will have the opportunity to handle it, and the process repeats.

Let's see a simple example. Note, Window.h is the same file we created in our previous lesson on creating an SDL2 window.

Creating a Window

Learn how to get started with SDL2 in C++ by creating a window. Includes an explanation of all the SDL2 functions we use, and the options we have to modify the window.

1#include <SDL.h>
2#include "Window.h"
3
4class Layer {
5public:
6  bool HandleEvent(const SDL_Event* Event) {
7    // Return true if the event was handled
8    // Return false otherwise
9    return false;
10  }
11};
12
13int main() {
14  Window GameWindow;
15  Layer UI;
16  Layer World;
17
18  SDL_Event Event;
19  while(true) {
20    while(SDL_PollEvent(&Event)) {
21      if (Event.type == SDL_QUIT) {
22        SDL_Quit();
23        return 0;
24      }
25      if (UI.HandleEvent(&Event)) {
26        // The UI took care of this event
27        // Continue to the next
28        continue;
29      }
30      // The UI did not handle this event
31      // Let the next layer see it
32      if (World.HandleEvent(&Event)) {
33        continue;
34      }
35    }
36  }
37}

Letting Objects Register with a Layer

First, we need a way for objects to register themselves with an event layer. To do that, we’ll create a new class: EventReceiver. Similar to the layers, they’ll have a function to receive events, and that function will return a boolean representing whether or not they handled that event:

1class EventReceiver {
2public:
3  virtual bool HandleEvent(const SDL_Event* Event) {
4    return false;
5  }
6};

Then, we’ll update our Layer class with a way to let EventReceivers subscribe to that layer’s events:

1class Layer {
2public:
3  bool HandleEvent(const SDL_Event* Event) {
4    // Return true if the event was handled
5    // Return false otherwise
6    return false;
7  }
8
9  void SubscribeToEvents(EventReceiver* Receiver) {
10    Subscribers.push_back(Receiver);
11  }
12
13private:
14  std::vector<EventReceiver*> Subscribers;
15};

Finally, the HandleEvent function on our Layer needs to notify all of its subscribers of the event. It will return true if one of its subscribers handled it, and false otherwise:

1class Layer {
2public:
3  bool HandleEvent(const SDL_Event* Event) {
4    for (const auto Handler : Subscribers) {
5      if (Handler->HandleEvent(Event)) {
6        return true;
7      }
8    }
9    return false;
10  }
11  // ...
12}

Lets see everything we’ve got so far:

1#include <SDL.h>
2#include <vector>
3#include <iostream>
4#include "Window.h"
5
6class EventReceiver {
7public:
8  virtual bool HandleEvent(const SDL_Event* Event) {
9    std::cout << "It's working!!\n";
10    return false;
11  }
12};
13
14class Layer {
15public:
16  bool HandleEvent(const SDL_Event* Event) {
17    for (const auto Handler : Subscribers) {
18      if (Handler->HandleEvent(Event)) {
19        return true;
20      }
21    }
22    return false;
23  }
24
25  void SubscribeToEvents(EventReceiver* Receiver) {
26    Subscribers.push_back(Receiver);
27  }
28
29private:
30  std::vector<EventReceiver*> Subscribers;
31};
32
33int main() {
34  Window GameWindow;
35  Layer UI;
36  Layer World;
37  EventReceiver ExampleButton;
38  UI.SubscribeToEvents(&ExampleButton);
39
40  SDL_Event Event;
41  while(true) {
42    while(SDL_PollEvent(&Event)) {
43      if (Event.type == SDL_QUIT) {
44        SDL_Quit();
45        return 0;
46      }
47      if (UI.HandleEvent(&Event)) {
48        // The UI took care of this event
49        // Continue to the next
50        continue;
51      }
52      // The UI did not handle this event
53      // Let the next layer see it
54      if (World.HandleEvent(&Event)) {
55        continue;
56      }
57    }
58  }
59}

Running this application, we should see our window pop up, and our ExampleButton receiving lots of events as we move our mouse around. Most importantly, our main event loop, and main function in general, is simple and clean.

Our example here is quite basic, but the core principles are what is important. Some enhancements we could make include:

• Separating the classes into their own files
• Adding a constructor to EventReceiver that accepts a Layer, then handling event subscription within the EventReceiver class.
• Allowing EventReceivers to subscribe to only certain types of events. For example, SubscribeToEvents and Subscribers could be separated out, allowing distinction between keyboard events, mouse click events, mouse motion events

Typically, the architecture here will just evolve as our requirements develop.

In the next lesson, we’ll expand on this UI architecture to create buttons that can interact with our core application.

Next Lesson

Creating Buttons in SDL2

Expanding on our UI architecture to add a simple button to our application, complete with hover and click events.

ContinueView Course