Building Interactive Buttons

Animating Button Clicks in SDL

How would I implement a button that triggers an animation when clicked?

Implementing a button that triggers an animation when clicked is a great way to provide visual feedback to the user. We can achieve this by extending our existing Button class and incorporating a simple animation system. Let's walk through the process step by step.

First, let's create an AnimatedButton class that inherits from our Button class:

1#include <SDL.h>
2#include <chrono>
3#include <vector>
4
5class AnimatedButton : public Button {
6public:
7  AnimatedButton(int x, int y, int w, int h)
8    : Button{x, y, w, h} {}
9
10  void HandleLeftClick() override {
11    Button::HandleLeftClick();
12    StartAnimation();
13  }
14
15  void Render(SDL_Surface* Surface) override {
16    Button::Render(Surface);
17    if (isAnimating) {
18      RenderAnimation(Surface);
19    }
20  }
21
22  void Update() {
23    if (isAnimating) { UpdateAnimation(); }
24  }
25
26private:
27  void StartAnimation() {
28    isAnimating = true;
29    animationStart =
30        std::chrono::steady_clock::now();
31    currentFrame = 0;
32  }
33
34  void UpdateAnimation() {
35    auto now = std::chrono::steady_clock::now();
36    auto elapsed =
37        std::chrono::duration_cast<
38          std::chrono::milliseconds>(
39            now - animationStart)
40        .count();
41
42    if (elapsed > animationDuration) {
43      isAnimating = false;
44    } else {
45      currentFrame = (elapsed / frameDuration) %
46                     frames.size();
47    }
48  }
49
50  void RenderAnimation(SDL_Surface* Surface) {
51    // Render current animation frame
52    SDL_BlitSurface(frames[currentFrame],
53                    nullptr, Surface, &Rect);
54  }
55
56  bool isAnimating{false};
57  std::chrono::steady_clock::time_point
58  animationStart;
59  std::vector<SDL_Surface*> frames;
60  int currentFrame{0};
61  int animationDuration{1000}; // milliseconds
62  int frameDuration{
63      100}; // milliseconds per frame
64};

In this AnimatedButton class, we've added:

An isAnimating flag to track the animation state.
A vector of SDL_Surface pointers to store animation frames.
StartAnimation(), UpdateAnimation(), and RenderAnimation() methods to manage the animation.
An overridden HandleLeftClick() method that starts the animation when the button is clicked.
An Update() method that should be called in your game loop to update the animation state.

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

1#include <SDL.h>
2#include <SDL_image.h>
3
4int main(int argc, char* argv[]) {
5  SDL_Init(SDL_INIT_VIDEO);
6  IMG_Init(IMG_INIT_PNG);
7
8  Window GameWindow;
9  AnimatedButton MyButton{50, 50, 100, 50};
10
11  // Load animation frames
12  std::vector<std::string> framePaths = {
13      "frame1.png", "frame2.png", "frame3.png",
14      "frame4.png"};
15  for (const auto& path : framePaths) {
16    MyButton.AddFrame(IMG_Load(path.c_str()));
17  }
18
19  SDL_Event Event;
20  bool shouldQuit{false};
21  while (!shouldQuit) {
22    while (SDL_PollEvent(&Event)) {
23      MyButton.HandleEvent(Event);
24      if (Event.type == SDL_QUIT) {
25        shouldQuit = true;
26      }
27    }
28
29    MyButton.Update(); // Update animation state
30
31    GameWindow.Render();
32    MyButton.Render(GameWindow.GetSurface());
33    GameWindow.Update();
34
35    SDL_Delay(16); // Cap at ~60 FPS
36  }
37
38  IMG_Quit();
39  SDL_Quit();
40  return 0;
41}

In this main loop, we create an AnimatedButton, load its animation frames, and ensure we call its Update() method each frame to progress the animation.

To make this example more concrete, let's consider a "power-up" button that plays a glowing animation when clicked:

1class PowerUpButton : public AnimatedButton {
2public:
3  PowerUpButton(int x, int y, int w, int h)
4    : AnimatedButton{x, y, w, h} {
5    LoadAnimationFrames();
6  }
7
8  void HandleLeftClick() override {
9    AnimatedButton::HandleLeftClick();
10    std::cout << "Power-up activated!\n";
11    // Add game logic for power-up here
12  }
13
14private:
15  void LoadAnimationFrames() {
16    std::vector<std::string> framePaths = {
17        "powerup_glow1.png",
18        "powerup_glow2.png",
19        "powerup_glow3.png",
20        "powerup_glow4.png"};
21    for (const auto& path : framePaths) {
22      AddFrame(IMG_Load(path.c_str()));
23    }
24  }
25};

This PowerUpButton loads specific "glow" animation frames and includes some game logic when clicked. By using this approach, you can create visually appealing, interactive buttons that provide immediate feedback to the user through animations!

This Question is from the Lesson: