Building Interactive Buttons

Creating Image Buttons in SDL

Can I create a button with an image instead of a solid color?

Absolutely! Creating buttons with images instead of solid colors can greatly enhance the visual appeal of your UI. Let's modify our Button class to support image-based buttons using SDL.

First, we'll need to include the SDL_image library to handle image loading:

1#include <SDL.h>
2#include <SDL_image.h>
3#include <string>
4
5class ImageButton : public Button {
6public:
7  ImageButton(int x, int y, int w, int h,
8              const std::string& imagePath)
9    : Button{x, y, w, h},
10      imagePath{imagePath} { LoadImage(); }
11
12  ~ImageButton() {
13    if (buttonImage) {
14      SDL_FreeSurface(buttonImage);
15    }
16  }
17
18  void Render(SDL_Surface* Surface) override {
19    if (buttonImage) {
20      SDL_BlitScaled(buttonImage, nullptr,
21                     Surface, &Rect);
22    } else { Button::Render(Surface); }
23  }
24
25private:
26  void LoadImage() {
27    buttonImage = IMG_Load(imagePath.c_str());
28    if (!buttonImage) {
29      std::cerr << "Failed to load image: "
30          << IMG_GetError() << '\n';
31    }
32  }
33
34  std::string imagePath;
35  SDL_Surface* buttonImage{nullptr};
36};

In this ImageButton class, we're loading an image file in the constructor and using it in the Render() method. If the image fails to load, it falls back to the default solid color rendering.

To use this new ImageButton class:

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  ImageButton PlayButton{
10      50, 50, 100, 50,
11      "assets/play_button.png"};
12  ImageButton QuitButton{
13      50, 120, 100, 50,
14      "assets/quit_button.png"};
15
16  // Main game loop
17  SDL_Event Event;
18  bool shouldQuit{false};
19  while (!shouldQuit) {
20    while (SDL_PollEvent(&Event)) {
21      PlayButton.HandleEvent(Event);
22      QuitButton.HandleEvent(Event);
23      if (Event.type == SDL_QUIT) {
24        shouldQuit = true;
25      }
26    }
27    GameWindow.Render();
28    PlayButton.Render(GameWindow.GetSurface());
29    QuitButton.Render(GameWindow.GetSurface());
30    GameWindow.Update();
31  }
32
33  IMG_Quit();
34  SDL_Quit();
35  return 0;
36}

This code creates two image buttons: a "Play" button and a "Quit" button, each with its own image.

Remember to handle different button states (normal, hovered, pressed) by either loading multiple images or modifying the button image at runtime. For example:

1class ImageButton : public Button {
2public:
3  ImageButton(int x, int y, int w, int h,
4              const std::string& normalImage,
5              const std::string& hoverImage,
6              const std::string& pressedImage)
7    : Button{x, y, w, h} {
8    LoadImages(normalImage, hoverImage,
9               pressedImage);
10  }
11
12  // ... rest of the class ...
13
14private:
15  void LoadImages(const std::string& normal,
16                  const std::string& hover,
17                  const std::string& pressed) {
18    normalImage = IMG_Load(normal.c_str());
19    hoverImage = IMG_Load(hover.c_str());
20    pressedImage = IMG_Load(pressed.c_str());
21    // Error handling...
22  }
23
24  SDL_Surface* normalImage{nullptr},
25             * hoverImage{nullptr},
26             * pressedImage{nullptr};
27};