Jason's Thoughts 3 - UI Process

I am now currently involved in a number of aspects of the project but since UI is the section in which I have had the most individual input I thought blogging about its progression might be interesting. With the feeling that in the future that the UI would probably change, we decided to use some of the mock up UI elements the artists had already made before I arrived in the group. This allowed me to set up the mechanical structure of the UI and make it work in accordance with the project, with at least some visual representation of what the final project would look like. Basically we outlined that we needed an indicator for each action the player tried to take – some form of feedback – as well as an interchangeable background depending on your upgrade progress.

The three face-buttons used on the controller were set above images representing their function. These were upgrading attack, upgrading defence, and shooting, and each image glows when the corresponding button is pushed. This links the images within the UI to the control inputs in our scripts. We also have a crate counter to show your collected resources. On the right side we have a red and blue bar that counts the levels you have upgraded in attack and defence respectively, and finally below we have a health bar. Initially the bars on the right representing attack and defence were simply numbers counting, I did this in order to see if the code was working before I tried with images, this avoids misleading issues such as the code working but the images themselves not being rendered. Issues like these can leave you trying to fix one problem, for example the code, while the issue lies somewhere else, this is why it is better at first to test with simple items, before trying something more complex. Once I could see the numbers were working correctly, I switched over into a visual representation. The offence and defence counter, were actually just full images that we render from the bottom up, only to the percent of which the bar should be filled, giving the illusion of a bar filling up. All these GUI assets were in accordance with the groups plan for the GUI.

After the initial implementation of the UI we decided to improve on it a bit. We added a complex texture to the health bar that runs from green (healthy) to red (almost dead), we felt this was a better representation of HP than the generic red HP bar. We also added the additional feature, that when your fort upgrades the background of the HUD also upgrades to represent stone, and then bricks. This means as the fort moves from wood, to stone, to brick, so does the appearance of the HUD. The method I used to do this was to create images of the different levels of HUD off camera, and simply switch them out with the players HUD, when a player reached a certain level in defence.

#UI #jasonsthoughts #design #programming