Clickable Buttons!

Every game needs a front page.
Almost exclusively are menus used for this purpose, and every menu needs a way to interact.

So for this week, I have (among other things) implemented clickable buttons!

A good starting point when making a new type of object, is to ask “what do I want this to do?”, and while it is possible to just implement what you need as you go, if you know what you need from the beginning you can make more compact code, and find ways to make single function calls fulfill multiple needs.
Still, if we find that we need to add new functionality later on, there is nothing stopping us from doing that.

What we want our buttons to do:
– React when we hover over it (to signify that this is an interactive object)
– Tell us when it is pressed
– Be able to assume different looks (we dont want all our buttons to look the same, since then how will the player know what to do?)

A natural time to tell the button what it should look like is just when it is created, since it is something it will always have. If we want it to have a different look when it is hovered above, that also need to be supplied. The same applies if you want to have a third when it is pressed and held, and so forth for any situations you wish to use.

Since we want the buttons to always look for the cursor, we make that check when we check everything else, in the update part of the loop. When we make that check we do not need to supply any other information, since the SFML library allows us to access information about the mouse from anywhere

However, the SFML mouse getposition needs an context to work well, since standing alone it can only supply the true coordinates of the mouse on the computer monitor, which isn’t very helpful since the game client can lie anywhere on the computer monitor. In order to make it useful we need to supply the window we are working within, and the function will give us the coordinates relative to our window, and we can use it!

But the button has no idea what window it is inside, so in order to get that we need to supply the window to the button. Adding that is as simple as giving the button a private window, making an one-line program taking an input window and assign the private window pointer to it.

Now that we can check the position of the mouse, the SFML library supplies us with another convenient function: contains. This checks a point and an rectangle to check if the point exists within the rectangle. If we want to highlight the button when the mouse pointer above it, one need only check the position of the mouse against the rectangle which makes up the button.

To make the highlight happen you need only swap what texture the sprite is using, and you can also now make a check to see if a mouse button of your choice is pushed down, and use that to tell if the button is being pressed. The only problem left is to find a way to tell the state that the button is being pressed. Since we are not yet using the return type of the update function, we can use it to convey that the button has been pressed.

Now, if we want to do something when our button is pressed, we can write button->Update() in an if clause, and then execute if the button is hit!

 

Stay safe, and next week there’ll be a post about animating sprites, and file import!