Building Interactive Buttons

Changing Button Shape on Interaction

Can I implement a button that changes shape when hovered or clicked?

Absolutely! Implementing a button that changes shape when hovered or clicked can add a dynamic and interactive feel to your UI. We can achieve this by extending our existing Button class and modifying its rendering logic. Let's walk through the process step by step.

First, let's create a ShapeChangingButton class that inherits from our Button class:

1#include <SDL.h>
2#include <vector>
3
4class ShapeChangingButton : public Button {
5public:
6  ShapeChangingButton(int x, int y, int w,
7                      int h)
8    : Button{x, y, w, h} {
9    normalShape = CreateRectShape(w, h);
10    hoverShape =
11        CreateCircleShape(std::min(w, h) / 2);
12    clickShape =
13        CreateStarShape(std::min(w, h) / 2);
14  }
15
16  void Render(SDL_Surface* Surface) override {
17    SDL_FillRect(Surface, nullptr,
18                 SDL_MapRGB(Surface->format,
19                            255, 255, 255));
20
21    const std::vector<SDL_Point>& currentShape =
22        GetCurrentShape();
23    RenderShape(Surface, currentShape);
24  }
25
26protected:
27  void HandleMouseEnter() override {
28    Button::HandleMouseEnter();
29    currentState = ButtonState::Hover;
30  }
31
32  void HandleMouseExit() override {
33    Button::HandleMouseExit();
34    currentState = ButtonState::Normal;
35  }
36
37  void HandleLeftClick() override {
38    Button::HandleLeftClick();
39    currentState = ButtonState::Clicked;
40  }
41
42private:
43  enum class ButtonState {
44    Normal,
45    Hover,
46    Clicked
47  };
48
49  std::vector<SDL_Point>
50  CreateRectShape(int w, int h) {
51    return {{0, 0}, {w, 0}, {w, h}, {0, h}};
52  }
53
54  std::vector<SDL_Point> CreateCircleShape(
55      int radius) {
56    std::vector<SDL_Point> points;
57    for (int i = 0; i < 360; i += 10) {
58      int x = static_cast<int>(
59        radius * cos(i * M_PI / 180));
60      int y = static_cast<int>(
61        radius * sin(i * M_PI / 180));
62      points.push_back(
63          {x + radius, y + radius});
64    }
65    return points;
66  }
67
68  std::vector<SDL_Point> CreateStarShape(
69      int radius) {
70    std::vector<SDL_Point> points;
71    for (int i = 0; i < 10; i++) {
72      double r =
73          (i % 2 == 0) ? radius : radius / 2;
74      int x = static_cast<int>(
75        r * cos(i * M_PI / 5));
76      int y = static_cast<int>(
77        r * sin(i * M_PI / 5));
78      points.push_back(
79          {x + radius, y + radius});
80    }
81    return points;
82  }
83
84  void RenderShape(
85      SDL_Surface* Surface,
86      const std::vector<SDL_Point>& shape) {
87    SDL_Point center = {Rect.x + Rect.w / 2,
88                        Rect.y + Rect.h / 2};
89    std::vector<SDL_Point> translatedShape;
90    for (const auto& point : shape) {
91      translatedShape.push_back(
92      {point.x + center.x - Rect.w / 2,
93       point.y + center.y - Rect.h / 2});
94    }
95    SDL_Color color = GetCurrentColor();
96    for (size_t i = 0;
97         i < translatedShape.size(); i++) {
98      SDL_Point start = translatedShape[i];
99      SDL_Point end = translatedShape
100          [(i + 1) % translatedShape.size()];
101      SDL_DrawLine(Surface, start.x, start.y,
102                   end.x, end.y, color);
103    }
104  }
105
106  const std::vector<SDL_Point>&
107  GetCurrentShape() const {
108    switch (currentState) {
109    case ButtonState::Hover:
110      return hoverShape;
111    case ButtonState::Clicked:
112      return clickShape;
113    default:
114      return normalShape;
115    }
116  }
117
118  SDL_Color GetCurrentColor() const {
119    switch (currentState) {
120    case ButtonState::Hover:
121      return {255, 0, 0, 255}; // Red
122    case ButtonState::Clicked:
123      return {0, 255, 0, 255}; // Green
124    default:
125      return {0, 0, 255, 255}; // Blue
126    }
127  }
128
129  std::vector<SDL_Point> normalShape;
130  std::vector<SDL_Point> hoverShape;
131  std::vector<SDL_Point> clickShape;
132  ButtonState currentState{ButtonState::Normal};
133};

In this ShapeChangingButton class, we've added:

Three different shapes: a rectangle for normal state, a circle for hover state, and a star for clicked state.
Methods to create these shapes using SDL_Point vectors.
A currentState to track the button's state.
Overridden HandleMouseEnter(), HandleMouseExit(), and HandleLeftClick() methods to update the current state.
A custom Render() method that draws the appropriate shape based on the current state.

Now, let's see how we can use this ShapeChangingButton in our main game loop:

1#include <SDL.h>
2
3int main(int argc, char* argv[]) {
4  SDL_Init(SDL_INIT_VIDEO);
5
6  Window GameWindow;
7  ShapeChangingButton MyButton{50, 50, 100,
8                               100};
9
10  SDL_Event Event;
11  bool shouldQuit{false};
12  while (!shouldQuit) {
13    while (SDL_PollEvent(&Event)) {
14      MyButton.HandleEvent(Event);
15      if (Event.type == SDL_QUIT) {
16        shouldQuit = true;
17      }
18    }
19
20    GameWindow.Render();
21    MyButton.Render(GameWindow.GetSurface());
22    GameWindow.Update();
23
24    SDL_Delay(16); // Cap at ~60 FPS
25  }
26
27  SDL_Quit();
28  return 0;
29}

This main loop creates a ShapeChangingButton and handles its events. The button will now change shape:

Rectangle (blue) when in normal state
Circle (red) when hovered over
Star (green) when clicked

This implementation provides a visually engaging button that responds to user interactions by changing both its shape and color. You can further customize this by adding more shapes, adjusting colors, or even implementing smooth transitions between shapes for an even more dynamic effect.

Remember to include the necessary headers (like <cmath> for trigonometric functions) and implement any missing utility functions (like SDL_DrawLine()) that this code assumes are available.

This Question is from the Lesson: