How should i scale this for multiple buttons in SDL? - c++

Question

I have a simple script which displays one button (which is a png image) and when the user clicks it the application quits.
But i want to add multiple buttons which is where im finding my current thinking will lead to a very long if:else situation and I am wondering if that is the only way.
This is how i have my current menu set up in a main.cpp file.
bool handle_mouse_leftClick(int x, int y, SDL_Surface *button) {
if( ( ( mouseX > x ) && ( mouseX < x + button->w ) ) && ( ( mouseY > y ) && ( mouseY < y + button->h ) ) ) {
return true;
} else {
return false;
}
}
This is my detection function.
Below is my main function which acts as my game loop, i've removed non relevant code to keep it easier to follow:
//menu button
SDL_Surface *button;
button = IMG_Load("button.png");
while(!quit){
//handle events
while( SDL_PollEvent( &event ) ){
switch(event.type){
case SDL_QUIT: quit = true; break;
case SDL_MOUSEBUTTONDOWN:
if (event.button.button == SDL_BUTTON_LEFT) {
if(handle_mouse_leftClick(btnx,btny,button)){
quit = true;
}
}
break;
}
}
The issue is should my main.cpp have all this checking going on, is going to get very long very quickly when i add more buttons so I'm wondering if I have missed a trick to simplify my efforts?

Answer 1

When you get right down to the basic logic/computation, I would say the answer is "no", you haven't missed any tricks. I've never found a way around checking each target one at a time - at least in terms of computation. You could make your code cleaner a lot of ways. You could have a GuiElement class that exposes a "bool IsIn( int x, int y )" method. Then your big case statement would look more like:
bool handle_mouse_leftClick(int x, int y, SDL_Surface *button)
{
if (Button1.IsIn( mouseX, mouseY )
{
// do this
}
else if (Button2.IsIn( mouseX, mouseY ))
{
// do that
}
else
{
return false;
}
}
You could then further reduce amount code with a list or table:
int handle_mouse_leftClick(int x, int y, SDL_Surface *button)
{
for (unsigned int i = 0; i < buttonList.size(); i++
{
if (buttonList[i].IsIn( mouseX, mouseY ))
{
return i; // return index of button pressed
}
return -1; // nothing pressed
}
}
But it's still ultimately looking at each rectangle one at a time.
Couple caveats:
I don't think there's much real computational overhead in checking the hit boxes of each item - unless you're doing it at some crazy high frame rate.
Sure, you could optimize the checking with some kind of spatial index (like a b-tree or quad-tree organized by the locations of the buttons on the screen), but ... see #1. ;-)
If instead of 10 or 15 buttons/controls you have THOUSANDS then you will likely want to do #2 because #1 will no longer be true.
********* Update ***********
Here's a brief sample of a class that could be used for this. As far as .h vs main.cpp, the typical approach is to put the header in a "Button.h" and the implementation (code) in a "Button.cpp", but you could just put this at the top of main.cpp to get started - it has all the logic right in the class definition.
You'll notice I didn't really write any new code. The "IsIn()" test is your logic verbatim, I just changed the variable names to match the class. And since you already have a single button, I'm assuming you can reuse the code that renders that button the Render() method.
And lastly, if is not something you're familiar with, you don't have to create a list/vector at all. The code the renders the buttons could just call "okButton.Render()", followed by "cancelButton.Render()".
Sample "button" class:
class Button
{
private:
int m_x, m_y; // coordinates of upper left corner of control
int m_width, m_height; // size of control
public:
Button(int x, int y, int width, int height, const char* caption)
{
m_x = x;
m_y = y;
m_width = width;
m_height = height;
// also store caption in variable of same type you're using now for button text
}
bool IsIn( int mouseX, int mouseY )
{
if (((mouseX > m_x) && (mouseX < m_x + m_width))
&& ((mouseY > m_y) && (mouseY < m_y + m_height ) ) ) {
return true;
} else {
return false;
}
}
void Render()
{
// use the same code you use now to render the button in OpenGL/SDL
}
};
Then to create it/them (using the list approach):
Button okButton( 10, 10, 100, 50, "OK" );
buttonList.push_back( okButton );
Button cancelButton( 150, 10, 100, 50, "Cancel" );
buttonList.push_back( cancelButton );
And in your render loop:
void Update()
{
for (unsigned int i = 0; i < buttonList.size(); i++
{
buttonList[i].Render();
}
}