Making a Game Part 5 – The Options Screen

This week I made the options-screen for our game, something that I thought would be pretty straight forward but actually turned out to be pretty difficult.

After creating the state using the framework from the other states I made the button in the Main Menu-state lead into the Options and then started working on some sliders for volume-control, the sliders image was skilfully made by yours truly and is really a pure work of art:

In reality though, it looks awful but it serves its purpose and I could then start coding the sliders and make them actually work.

This needed a check to see if the left mouse button is being held down and if the position of the mouse is on the slider-button-thingy then move the button in the X-axis along with the mouse, but only to the borders of the slider.

This is the math used to check if the mouseclick-position is anywhere inside of the sliders “active area” meaning that if the slider is allowed to go there it will return true (that is also the reason for the “+15/-30″-things, to adjust the “allowed” rectangle). If this returns true the sliders bool m_updating will become true and it will start moving along with the mouse position.
As soon as the mousebutton is released every sliders m_updating is then set to false.

After making it possible to move the sliders it was time to make it save the position in a textfile so that it could be used in the game to adjust the volumes, this was done by using the same method that I always use to stream to and from files, using a map with a string name and a slider-object i streamed the name followed by a getvolume-method that translated the relative position, in percent, that the slider is in, the math for this first takes the sliders position in x minus the sliders position in the world in x, this gets us the distance from the start of the slider that the button is currently on, now if only the distance went from 0 to 100 this would be a walk in the park but unfortunately it goes between 4 and 87 so we will need to convert this into a percentage that we can store in the file somehow.

The solution:

The distance is divided by the width of the slider to get a rough percentage, then multiplied by an awfully specific number, making the difference from lowest to highest 0-100 instead of 4-87 (it is now 0.04 to 1.05), so then i take it minus four to get 0-101 and finally I made a safeguard if it is over 100 or under 0.

The last thing I did was in loading the soundlevels just reverse the math to get the positions for everything.

After this I added a toggle-button for fullscreen, this button is basically just a tickable box with a label, the logic to make it clickable without switching on and off on every update was a little different and took some booleans to get working, first one if you clicked it, then another one that checks the box and switches the sprites texture if you release the mousebutton and its location is on top of the button.

This is the current version of the options-screen:

Besides not being in the appropriate place aligned with the background it also triggers updates for the sliders if you hold down the mousebutton and drag it through the sliders, meaning if you hold down the mousebutton you can control all three sliders simultaneously, and while that may actually be a bit useful for moving all of them at the same time it is still a bug that I will have to address sooner or later.

The Reconfigure Keys-screen I also made this week, but describing that would take another 1000 words so I will save that for another time and just show you an image of what it looks like:

It is fully functional and takes any key-input (except for caps/scroll/num-lock because sfml doesnt support them for some reason) and it changes the bind used in-game as well.

That is all for this time, thank you for reading this and I’ll see you in a week!