Flight of the Giraffa – Update 2

This week I’ve created Button class for our GUI. The button class works just like a collision box with a state. The state is either “pressed” or “not pressed” and is determent whether a mouse button is pressed and also if the mouse’s position is inside its bounds. This is what happens inside the function “SetPressed”.

The statement can later be retrieved from a “IsPressed” function. The Second half of button, is the Reset function. It will reset the state from true to false, but if the button was previously pressed (and is still within its bounds) it will return true, and false if it was not. With this feature I can check if the user releases their mouse button. This will make clicking button feel like they were actually clicked and would allow the player to avert the cursor if they regret pressing a button.

During run-time a button object would work like this: If a mouse press statement is true the set pressed function checks if the cursor is inside its bounding box. If that statement is true it will set the state to true (pressed) and will continue to be so until reset is called. Now draw functions can check this value and make the button appear different while pressed. Now reset is called and the state is set to false again. If I place reset in an if statement, I could execute a function whenever that statement id fulfilled(released).

When working with the Scorched Earth clone I did not want to be restricted to a specific button size. So I used a method called “9-Slice Scaling”, which means that a button sprite is separated into 9 parts. Like this image shows:

9-slice-scale

A, C, G, and I are placed according to specified dimension. D is aligned to A and stretched vertically to reach G. The same goes for F but from C to I. B and H is stretched horizontally. To fill the gap E is aligned with A and stretched both vertically and horizontally to I. I implemented this in our game so we could have dynamically sized buttons with rounded edges or beveled texture.

Flight of the Giraffa – Update 2

En reaktion på ”Flight of the Giraffa – Update 2

  1. Nice work Adrian!

    Your button solution has interesting functionality and lets the user have more control over when they press a button, if I understand correctly, by checking if both the mouse is within its bounds and is mouse button is released. The explanation of the functions and the behavior of the buttons is well structured and relatively easy to follow, but I tend to get confused when there are multiple bool checks or the likes.

    I could imagine from a design standpoint that this button mechanic might feel more organic than “press button to instantly switch state, run code or similar”: Be sure to add some magical click sound when the button is pressed, and maybe even when it is released or aborted, to add that extra level of button-clicking gratification.

    The button texture stretching sounds very useful, but with my limited understanding of SFML, or “9-Slice-Scaling”, I do not understand how you split the sprites texture into several different parts, but I would very much like to know, as this would be incredibly handy in my group’s project. Are you perhaps using vertex arrays in some way, or are you actually using several different sprites for each section of the button?

    Good luck with the remainder of your project.

    /Erik N

    Gilla

Lämna en kommentar