Week 4 - User Interface


This week's focus was on building a UI for the player. I originally had planned to build upon enemy AI but I wanted to get the main UI elements done and dusted first to give the player a clean feel of the game.

There is not much to talk about this week other due to the UI being the main thing being built. The final product of the week is shown in Fig.1.

Fig.1 - Player UI
The hearts in the top-left of Fig.1 while do have scripted functions, do not currently function as there is no true enemy AI for it to interact with. 

In Fig.2, the GIF shows the Ice Spear icon on the bottom-left highlighted yellow when the player is using it. This was a simple effect to do for all icons, having a separate GameObject overlaid that only activates when the key is held down. The ability after use also has a visual cool down where the icon is darkened out and lights up over a period of time. A similar method was used.

Fig.2 - Ice spear thrown, showing off the UI effects
Another thing shown in Fig.2 is Special Ability having a radial charge and a visual indication as a percentage of how much charge it has in the bottom-centre. The radial charge was a similar effect to the ability cool downs. The percentage was some maths done inside a script that would then grab the GameObject that has a "Text" component and replace the value with the percentage. A similar effect is used for the smoke bomb count on the bottom-right.

For the tutorial level, to help explain to the player what they have to do, I created many signs that each contain a piece of text to inform the player of what to do in each section. When the player stands next to the sign, a pop up will appear as shown in Fig.3.

Fig.3 - Player standing next to a sign and the sign pop up appearing on screen
The font used in the sign (and all the abilities) was taken from https://www.dafont.com/bitmap.php.

Leave a comment

Log in with itch.io to leave a comment.