Ending and Restarting Games

Customizing the New Game Button

How can we customize the appearance of the "New Game" button?

Abstract art representing computer programming

Customizing the appearance of the "New Game" button is a great way to enhance the visual appeal of your Minesweeper game. Let's explore a few ways to do this:

Changing Colors

One simple way to customize the button is by changing its colors. We can modify the NewGameButton class to accept custom colors:

#include "Globals.h"
#include "Engine/Button.h"
#include "Engine/Text.h"

class NewGameButton : public Engine::Button {
 public:
  NewGameButton(int x, int y, int w, int h,
    SDL_Color ButtonColor =
      Config::BUTTON_COLOR,
    SDL_Color TextColor = { 0, 0, 0, 255 })
    : Button{ x, y, w, h }
    , Text{ x, y, w, h, "NEW GAME", TextColor,
      20 } {
    SetColor(ButtonColor);
  }

  void Render(SDL_Surface* Surface) override {
    Button::Render(Surface);
    Text.Render(Surface);
  }

  void HandleLeftClick() override {
    SDL_Event E{ UserEvents::NEW_GAME };
    SDL_PushEvent(&E);
  }

 private:
  Engine::Text Text;
};

Now you can create a button with custom colors:

NewGameButton Button{
  Config::PADDING,
  Config::GRID_HEIGHT + Config::PADDING * 2,
  Config::WINDOW_WIDTH - Config::PADDING * 2,
  Config::FOOTER_HEIGHT - Config::PADDING,
  {0, 255, 0, 255},// Green button
  {255, 255, 255, 255}// White text
};

Adding Hover Effects

To make the button more interactive, we can add a hover effect:

class NewGameButton : public Engine::Button {
public:
  // ... (previous code)

  void HandleEvent(
    const SDL_Event& E) override {
    Button::HandleEvent(E);
    if (E.type == SDL_MOUSEMOTION) {
      int mouseX, mouseY;
      SDL_GetMouseState(&mouseX, &mouseY);
      if (IsPointInside(mouseX, mouseY)) {
        SetColor(HoverColor);
      } else { SetColor(NormalColor); }
    }
  }

private:
  Engine::Text Text;
  SDL_Color NormalColor{ Config::BUTTON_COLOR };
  SDL_Color HoverColor{
    Config::BUTTON_HOVER_COLOR
  };
};

Adding an Icon

For a more visual approach, we could add an icon to the button:

#include "Engine/Image.h"

class NewGameButton : public Engine::Button {
public:
  NewGameButton(int x, int y, int w, int h)
    : Button{ x, y, w, h },
      Text{ x + h, y, w - h, h, "NEW GAME", {},
            20 },
      Icon{ x, y, h, h, "restart_icon.png" } {}

  void Render(SDL_Surface* Surface) override {
    Button::Render(Surface);
    Text.Render(Surface);
    Icon.Render(Surface);
  }

private:
  Engine::Text  Text;
  Engine::Image Icon;
};

Remember to adjust the text position and add an appropriate icon image to your project.

These customizations will make your "New Game" button more visually appealing and interactive, enhancing the overall user experience of your Minesweeper game.

Answers to questions are automatically generated and may not have been reviewed.

sdl2-promo.jpg
Part of the course:

Game Dev with SDL2

Learn C++ and SDL development by creating hands on, practical projects inspired by classic retro games

Free, unlimited access

This course includes:

  • 51 Lessons
  • 100+ Code Samples
  • 91% Positive Reviews
  • Regularly Updated
  • Help and FAQ
Free, Unlimited Access

Professional C++

Comprehensive course covering advanced concepts, and how to use them on large-scale projects.

Screenshot from Warhammer: Total War
Screenshot from Tomb Raider
Screenshot from Jedi: Fallen Order
Contact|Privacy Policy|Terms of Use
Copyright © 2024 - All Rights Reserved