Building Interactive Buttons

Welcome to this lesson on building interactive UI components using SDL in C++. In this tutorial, we'll explore how to create dynamic buttons that respond to user input.

We'll cover topics such as event handling, creating custom button classes, and implementing hover and click behaviors.

Reviewing the UI Components

The topics in this lesson build on our earlier work, in particular the previous lesson where we set up our UI architecture.

Our main.cpp looks like the following, where we implement a standard event loop. For the purposes of this lesson, the key thing to note is that we have a UI object called GameUI.

This object is receiving all events through the HandleEvent() method, and is being asked to Render() onto the window surface every frame:

1#include <SDL.h>
2#include "UI.h"
3
Window Class|Show
4class Window {/*...*/};
36
37int main(int argc, char** argv){
38  SDL_Init(SDL_INIT_VIDEO);
39
40  Window GameWindow;
41  UI GameUI;
42
43  SDL_Event Event;
44  bool shouldQuit{false};
45
46  while (!shouldQuit) {
47    while (SDL_PollEvent(&Event)) {
48      GameUI.HandleEvent(Event);
49      if (Event.type == SDL_QUIT) {
50        shouldQuit = true;
51      }
52    }
53    GameWindow.Render();
54    GameUI.Render(GameWindow.GetSurface());
55    GameWindow.Update();
56  }
57
58  SDL_Quit();
59  return 0;
60}

Both of these methods are currently empty in the UI class, but we’ll add to them soon:

1// UI.h
2#pragma once
3
4class UI {
5public:
6  void HandleEvent(const SDL_Event& E){
7    // ...
8  };
9  
10  void Render(SDL_Surface* Surface){
11    // ...
12  }
13};

Creating a Button Class

To create our buttons, we’ll rely on a Rectangle class which we also introduced in the previous lesson.

Rectangle objects currently receive a position (x and y) and size (w and h) in their constructor. They construct an SDL_Rect from these arguments, and every call to Render() fills the corresponding area of a SDL_Surface with a solid color:

1// Rectangle.h
2#pragma once
3#include <SDL.h>
4
5class Rectangle {
6public:
7  Rectangle(int x, int y, int w, int h)
8    : Rect{x, y, w, h}{}
9
10  void Render(SDL_Surface* Surface){
11    SDL_FillRect(
12      Surface, &Rect, SDL_MapRGB(
13        Surface->format, 255, 0, 0
14      )
15    );
16  }
17
18private:
19  SDL_Rect Rect{0, 0, 0, 0};
20};

Let’s create our Button class by inheriting from Rectangle. It receives the same 4 arguments and forwards them to the Rectangle constructor. We also have a HandleEvent() method, which is currently not doing anything:

1// Button.h
2#pragma once
3
4#include <SDL.h>
5#include "Rectangle.h"
6
7class Button : public Rectangle {
8public:
9  Button(int x, int y, int w, int h)
10    : Rectangle{x, y, w, h}{}
11
12  void HandleEvent(const SDL_Event& E){
13    // ...
14  };
15};

Finally, let’s create a Button and add it to our UI. Our UI will forward events to our Button by calling HandleEvent(), and will forward render requests by calling Render() (which Button is inheriting from Rectangle):

1// UI.h
2#pragma once
3#include "Button.h"
4
5class UI {
6public:
7  void Render(SDL_Surface* Surface){
8    MyButton.Render(Surface);
9  }
10
11  void HandleEvent(const SDL_Event& E) {
12    MyButton.HandleEvent(E);
13  }
14  
15  // x = 50, y = 50, w = 50, h = 50
16  Button MyButton{50, 50, 50, 50};
17};

Running our game, we should now see the button rendered on our screen:

Currently, it’s not doing anything beyond what a basic Rectangle would, so lets add some capabilities to it.

Handling Hover Events

We’ll start by giving buttons the capability to change color when the player hovers their mouse over them.

When planning how we will add a new capability, it’s helpful to break down the requirements into parts. This is particularly true if we can identify some parts that are more suitable to be added to the base class.

When we add capabilities to the base class, those capabilities becomes available to all subtypes of Rectangle, not just Button. This makes our UI components more powerful over time.

To implement hover reactions, we can identify two aspects that are generally relevant to rectangles, so could be added to our Rectangle class:

• Determining if a set of x and y coordinates are within the bounds of the rectangle
• Customising the color of the rectangle

Let’s add these capabilities to our Rectangle:. We’ll make the following changes:

• Add a Color member to store what color the rectangle should render as, and a SetColor() setter to let people change it
• Add an optional constructor parameter to let consumers specify the starting color
• Update Render() to make use of the Color
• Add an IsWithinBounds() function to determine if a position overlaps with the rectangle.

1#pragma once
2#include <SDL.h>
3
4class Rectangle {
5public:
6  Rectangle(
7    int x, int y, int w, int h,
8    SDL_Color Color = {0, 0, 0, 255})
9    : Rect{x, y, w, h}, Color{Color}{}
10
11  virtual void Render(SDL_Surface* Surface){
12    SDL_FillRect(
13      Surface, &Rect, SDL_MapRGB(
14        Surface->format,
15        Color.r, Color.g, Color.b
16      )
17    );
18  }
19
20  void SetColor(SDL_Color C){ Color = C; }
21
22  bool IsWithinBounds(int x, int y) const{
23    // Too far left
24    if (x < Rect.x) return false;
25    // Too far right
26    if (x > Rect.x + Rect.w) return false;
27    // Too high
28    if (y < Rect.y) return false;
29    // Too low
30    if (y > Rect.y + Rect.h) return false;
31    // Within bounds
32    return true;
33  }
34
35private:
36  SDL_Rect Rect{0, 0, 0, 0};
37  SDL_Color Color{0, 0, 0, 0};
38};

Implementing the state change when the user’s cursor is hovering the component is a behavior that’s more specific to buttons. So, we’ll add that logic to the Button class. Let’s make the following changes:

• Provide a color to the Rectangle constructor. We’ll use green (0, 255, 0)
• Update HandleEvent() to forward any SDL_MOUSEMOTION events to the new HandleMouseMotion() function
• Within HandleMouseMotion(), set the rectangle’s color to red (255, 0, 0) if the cursor is within the bounds of the rectangle, and back to green (0, 255, 0) otherwise

1#pragma once
2#include "Rectangle.h"
3
4class Button : public Rectangle {
5public:
6  Button(int x, int y, int w, int h)
7    : Rectangle{x, y, w, h, {0, 255, 0}}
8  {}
9
10  void HandleEvent(const SDL_Event& E){
11    if (E.type == SDL_MOUSEMOTION) {
12      HandleMouseMotion(E.motion);
13    }
14  }
15
16protected:
17  void HandleMouseMotion(
18    const SDL_MouseMotionEvent& E){
19    if (IsWithinBounds(E.x, E.y)) {
20      SetColor({255, 0, 0});
21    } else {
22      SetColor({0, 255, 0});
23    }
24  }
25};

Running our program, we should now see that our button is rendered in green, and changes to red when our cursor is over it.

Handling Click Events

Let’s allow our buttons to react to being clicked. However, in the base Button class, we don’t know what behavior we need to perform in response to a click.

Instead, our goal can be to let derived classes implement their behavior as easily as possible.

To accomplish this, we can take care of the complexity of understanding when the player clicked the button, call simple HandleLeftClick() and HandleRightClick() functions at the appropriate time.

We’ll mark these functions as virtual, allowing the base classes to override them. Our changes are:

• Add new HandleLeftClick() and HandleRightClick() functions. The functions don’t do anything, but derived classes can override them to provide implementations.
• Updating HandleEvent() to call a new HandleMouseButton() function
• Within HandleMouseButton(), analyse the SDL_MouseButtonEvent to determine it represents the user clicking on our button. If they did, call HandleLeftClick() or HandleRightClick() as appropriate.

1#pragma once
2#include "Rectangle.h"
3
4class Button : public Rectangle {
5public:
6  Button(int x, int y, int w, int h) : Rectangle
7    {x, y, w, h, {0, 255, 0}}{}
8
9  void HandleEvent(const SDL_Event& E){
10    if (E.type == SDL_MOUSEMOTION) {
11      HandleMouseMotion(E.motion);
12    } else if (E.type == SDL_MOUSEBUTTONDOWN) {
13      HandleMouseButton(E.button);
14    }
15  }
16
17protected:
18  virtual void HandleLeftClick(){}
19  virtual void HandleRightClick(){}
20
21private:
22  void HandleMouseMotion(
23    const SDL_MouseMotionEvent& E){
24    if (IsWithinBounds(E.x, E.y)) {
25      SetColor({255, 0, 0});
26    } else {
27      SetColor({0, 255, 0});
28    }
29  }
30  void HandleMouseButton(
31    const SDL_MouseButtonEvent& E) {
32    if (IsWithinBounds(E.x, E.y)) {
33      const Uint8 Button{E.button};
34      if (Button == SDL_BUTTON_LEFT) {
35        HandleLeftClick();
36      } else if (Button == SDL_BUTTON_RIGHT) {
37        HandleRightClick();
38      }
39    }
40  }
41};

Creating Derived Buttons

With our base Button class now set up, we can create new classes that derive from it, and are designed to implement the specific behaviors required of our application.

We simply need to override the HandleLeftClick() and / or the HandleRightClick() methods as needed:

1#pragma once
2#include "Button.h"
3
4class DerivedButton : public Button {
5public:
6  DerivedButton(int x, int y, int w, int h)
7  : Button{x, y, w, h} {}
8  
9 protected:
10  void HandleLeftClick() override{
11    std::cout << "I have been left-clicked\n";
12  }
13
14  void HandleRightClick() override {
15    std::cout << "I have been right-clicked\n";
16  }
17};

Often, our buttons use the SDL event queue to report when the player clicks them, allowing other parts of our application to react to the action.

In the next lesson, we’ll see how we can define custom event types that correspond to specific to the actions that players can perform within our game.

For now, we can see this principle in action by pushing an SDL_QUIT event onto the queue:

1#pragma once
2#include <SDL.h>
3#include "Button.h"
4
5class QuitButton : public Button {
6public:
7  QuitButton(int x, int y, int w, int h)
8  : Button{x, y, w, h} {}
9
10 protected:
11  void HandleLeftClick() override {
12    SDL_Event Quit{SDL_QUIT};
13    SDL_PushEvent(&Quit);
14  }
15};

If the player left clicks this button, our main application loop will receive an SDL_QUIT event, triggering the loop to end and our program to quit.

Remember, to add any of these components to our UI, we can construct them in our UI class, and add them to the Render() and HandleEvent() methods:

1#pragma once
2#include "Button.h"
3#include "QuitButton.h"
4
5class UI {
6public:
7  void Render(SDL_Surface* Surface){
8    MyButton.Render(Surface);
9    MyQuitButton.Render(Surface);
10  }
11
12  void HandleEvent(const SDL_Event& E) {
13    MyButton.HandleEvent(E);
14    MyQuitButton.HandleEvent(E);
15  }
16
17  Button MyButton{50, 50, 50, 50};
18  QuitButton MyQuitButton{150, 50, 50, 50};
19};

Expanding Capability

Let's explore two more examples of how we can enhance our UI components to make them more powerful and flexible

Disabling and Enabling Buttons

A common requirement in user interfaces is the ability to enable or disable buttons. A disabled button remains visible but doesn't react to mouse events.

This feature is likely to be useful across various Button subtypes, so we'll add it to the base class:

1#pragma once
2#include "Rectangle.h"
3
4class Button : public Rectangle {
5public:
6  // ...
7  void HandleEvent(const SDL_Event& E){
8    if (isDisabled) return; 
9    if (E.type == SDL_MOUSEMOTION) {
10      HandleMouseMotion(E.motion);
11    } else if (E.type == SDL_MOUSEBUTTONDOWN) {
12      HandleMouseButton(E.button);
13    }
14  }
15
16protected:
17  // ...
18  void SetIsDisabled(bool newValue){
19    isDisabled = newValue;
20  }
21
22private:
23  // ...
24  bool isDisabled{false};
25};

By adding this functionality to the base Button class, we allow all derived classes to take advantage of this feature.

Here's an example of how we might use this in a LimitedClickButton class, which becomes disabled after the user clicks it three times:

1#pragma once
2#include <SDL.h>
3#include "Button.h"
4
5class LimitedClickButton: public Button {
6public:
7  LimitedClickButton(int x, int y, int w, int h)
8  : Button{x, y, w, h} {}
9
10 protected:
11  void HandleLeftClick() override {
12    --ClicksRemaining;
13    if (ClicksRemaining == 0){
14      SetIsDisabled(true);
15    }
16  }
17  
18private:
19  int ClicksRemaining{3};
20};

Mouse Hover Reactions

While our base Button class already handles mouse hover events, we can improve it to allow derived classes to easily implement custom hover behaviors.

Let's refactor our HandleMouseMotion() function to call new HandleMouseEnter() and HandleMouseExit() virtual functions:

1#pragma once
2#include "Rectangle.h"
3
4class Button : public Rectangle {
5public:
6  // ...
7
8protected:
9  // ...
10  virtual void HandleMouseEnter(){
11    SetColor({255, 0, 0});
12  }
13
14  virtual void HandleMouseExit(){
15    SetColor({255, 0, 0});
16  }
17
18private:
19  void HandleMouseMotion(
20    const SDL_MouseMotionEvent& E){
21    if (IsWithinBounds(E.x, E.y)) {
22      SetColor({255, 0, 0});
23      HandleMouseEnter();
24    } else {
25      SetColor({0, 255, 0});
26      HandleMouseExit();
27    }
28  }
29};

With this refactoring, button subtypes can now easily implement custom behaviors when the user hovers over them. For instance, this BlueHoverButton uses blue as the hover color instead of the default red:

1#pragma once
2#include <SDL.h>
3#include "Button.h"
4
5class BlueHoverButton: public Button {
6public:
7  BlueHoverButton(int x, int y, int w, int h)
8  : Button{x, y, w, h} {}
9
10 protected:
11   virtual void HandleMouseEnter(){
12    SetColor({0, 0, 255});
13  }
14};

Remember, if you want to extend the inherited behaviors rather than replace them entirely, you can call the base implementation from your override:

1#pragma once
2#include <SDL.h>
3#include "Button.h"
4
5class CustomHoverButton: public Button {
6public:
7  CustomHoverButton(int x, int y, int w, int h)
8  : Button{x, y, w, h} {}
9
10 protected:
11   virtual void HandleMouseEnter(){
12    // Do the standard stuff
13    Button::HandleMouseEnter();
14    
15    // Do extra stuff, too
16    std::cout << "Extra Stuff";
17  }
18};

These examples demonstrate how we can continue to expand and customize our UI components to meet the specific needs of our application while maintaining a clean and extensible design.

Summary

In this lesson, we've explored the process of creating interactive UI components using SDL and C++. We started by reviewing our existing UI architecture and then delved into creating a button class that inherits from our Rectangle class.

We implemented hover and click event handling, allowing our buttons to change appearance and respond to user input.

We also learned how to create derived button classes with custom behaviors, such as a quit button and a limited-click button. Additionally, we expanded our button capabilities by adding features like enabling/disabling buttons and customizing hover reactions.

These techniques provide a solid foundation for building more complex and interactive user interfaces in your SDL-based applications.

In the next lesson, we'll explore how to register custom events, allowing us to use SDL's event loop for behaviors specific to our games. This will enable even more sophisticated interactions and game-specific functionality in our UI components.

Next Lesson

Custom User Events

Discover how to use the SDL2 event system to handle custom, game-specific interactions

ContinueView Course