Adventures in the world of GUI

The GUI in our game has really been giving me a headache this past week (and the week before). When I decided to make the GUI, I thought that “oh, there should be a ton of finished libraries out there that I can use.” This first part was true, the second was not.

Googling around, I found some links to various libraries, like SFGUI and CEGUI (among others). Both of these looked incredibly promising, but when I downloaded them to try and build them, I ran into another problem: I had no idea how I would go about building them. Having no experience in CMake, I tried fiddling around with the options, but didn’t accomplish much except wasing a bunch of time, and didn’t really get anything from it.

So I decided to make my own, very basic GUI class and associated manager. To not clutter up the post with a bunch of code, the source code can be found here respectively here.

The original thought was to make the GUI use a depth system (similar to WoW) to make it feel like there is a natural depth among the GUI elements. In hindsight, this decision was kind of redundant, since we will have a maximum of 3 GUI elements on the screen at any one time: Player Health, Boss Health and a small notification box, displaying things like what textile you picked up.

From this, I made the player health bar, with the art provided by Måns. Code can be found here. It’s made up of two layers, where parts of the front layer are transparent, allowing the background layer to get shown through it. The background would then rise or sink depending on Barney’s health.

The logic behind it is that whenever you take damage, the program calculates how many percentages it needs to cut off the top of the background texture, and moves the source rectangle displaying the texture accordingly. At this moment, I don’t know if it actually updates properly, since Barney gets oneshot by everything.  Hope to get it working by the end of tomorrow (friday).

As a sidenote, for some reason, the heart moves around when the player moves. Guessing it has something to do with where it is placed in the update loop. I kind of like the the effect though!

The more I analyse these pieces of code, the more I realize that they are actually terribly designed. They solve the problem of GUI, but I might still end up rewriting them.