I have now begun implementing my UI for the combat portion of the game. First of all, I went to the Unity asset store and acquired a good selection of thematically appropriate art work which I will use to construct my UI. With the art assets imported, I added a background and border for my main UI panel and set about creating a health and energy bar. I did this first as I had already implemented a prototype UI element which displayed the active character's energy using text. To create my energy bar, I added a UI object with a slider component, attached the energy text object as its child and also added a border image object and a bar image object as children too. I then scaled and positioned all of this to make sure it looked right and moved on to the functionality.
I gave the slider component of the energy bar object the following settings, setting the object containing the bar image as the Fill Rect:
I then added a GameObject variable to my manager script called energyBar and set it to refer to the UI object containing the slider. Once this was done, I added the following code which sets how full the bar is, based on the character's energy and max energy values:
I repeated this process for the health bar too before moving on to work on my character portraits.
For the character portraits I added a UI object with an image component and set it to a border sprite before adding a slightly smaller version as its child, with a character portrait sprite. I added a sprite variable called portrait to my base character class so each character could store their own portrait and I added a GameObject variable to the manager which refers to the portrait in the UI. Finally, I gave a portrait sprite to each character in the scene and added this simple line of code to swap the portrait to the active character's:
Here's a video of the UI in action:
Comments