Spite: Divine Descent
Genre: Hack and Slash
Engine: Custom Engine
Contribution: Menu, UI, tools
Menues
In this project I was in charge of implementing the menus and UI. Having had experience of this from previous project I managed to quickly set up a button class that managed texture changes itself by checking the cursor's position compared to the button. When the cursor hovers over the button it changes the texture and again it changes when it is pressed.
​
This made it possible to set up a test main menu early that could play the game and quit it. This early in the development of the system I made it so all buttons are activated on release so that the artist's work on the pressed button graphics can be shown, before changing scene.
Saving Positions
To make it easier for artists to control the placement of the various buttons I set up an easy way for them to do that through Dear ImGui. This tool saved the positions to a json file, which is read when setting up the menus when the game starts.
​
These json files later got more extensive by also saving texture paths and ended up being a very quick way to set up new menus when needed.
​The menu system works through a state stack that I implemented in this project. I kept the main menu state at the bottom of the stack and it does not call the update or render function while the game state is active. When the player wants to quit the game from the game state it simply pops that state and you return to the main menu.
​
Moving from the pause menu back to the main, it pops all the states in between it and the main menu. It does so in order which leads it to unload the game scene that is currently active in the game state.
Statestack
Render Underlying state
​We wanted the game to be visible under the pause menu and thanks to the state stack that was an easy implementation as it can render the underlying state. The hud also works in this way as it is its own state on top of the game state, but it also updates the state under it.
​
For when going to options and level select from the paused state I wanted to make sure that the pause menu did not render but the game did. To fix this the pause state checks if is active or not, if it is not active it does not render the buttons but continues on to render the game under it.​
The options menu I have learnt is always the most challenging but also most fun menu to implement as it relies on communication with other systems. For this reason this menu was worked on in the most iterations compared to the previous menus.
​
Here I was working on the fullscreen and resolution setting and testing it. There were several issues with changing the resolution in run time as it seemed to affect the reading of the cursor's position in the window. To fix it I had to calculate it based on the window's size and it's resolution when checking the position.
Options Menu
Audio Settings
This is the first iteration of the audio settings and updated resolution graphics with arrows. In previous games when implementing audio settings it had been visualised in numbers, but this time it was requested it would be a slider. The slider's are quite simple as they are scaled by percentage, meaning that when the audio is at 50% the slider's size is scaled by a 0.5 multiplier. ​
​In the second iteration I also added a way to add a button to the sliders so that you can adjust volume by pulling a button back and forth on the slider. This button also is clamped to be within the slider's min and max size so it can not be pulled outside of its area.
Mana and Health bar
In Game UI
The health and mana bar being circles lead to some interesting problem solving. Of course the easiest way to fix bars is to just scale them however with circles that does not work as it distorts the shape. Because of my previous work on spritesheets I had the idea to set up a system where the texture rect could be moved down on the "spritesheet" and cut off the top part of the sprite. However when doing this it looked like the health and mana bars where moving upwards, so I also had to offset the position of the sprites relative to the moving of the texture rect.
Abilities and cooldowns
The health and mana bar being circles lead to some interesting problem solving. Of course the easiest way to fix bars is to just scale them however with circles that does not work as it distorts the shape. Because of my previous work on spritesheets I had the idea to set up a system where the texture rect could be moved down on the "spritesheet" and cut off the top part of the sprite. However when doing this it looked like the health and mana bars where moving upwards, so I also had to offset the position of the sprites relative to the moving of the texture rect.