I continued my work on the UI today and have made some significant visual changes along with some additions to the functionality. I began the day by moving around the components I had already placed and modifying their anchor points to ensure they always looked good regardless of screen size. I then removed the border on the active character panel as the sprite had to be stretched to fit on such a large panel, which was distractingly ugly.
I also made the decision to remove the statistics panel shown in my UI design because if I made it large enough to fit all the information I wanted, in an appropriately sized font, it would have taken up too much space. If this game were developed further and a progression system was added, I would have to create a menu to display the characters' statistics, but since this is just a vertical slice, that isn't completely necessary. I also intended to use this panel to give the player details about their enemies, but I actually now think that a lack information might be more thematically appropriate. Seeing an eldritch horror and reading that it has high power and speed is intimidating, but seeing such a creature and not knowing what it is capable of could be even more frightening. In place of the statistics panel, I made the character portrait larger and simply added a character name and faction field.
The major addition today was the action buttons. I placed 5 game objects with image components set to the same button sprite. I then gave each a child object with a button and an image component which I set to a placeholder icon sprite. I imported a variety of icon packs from the Unity store which I will use as my icon sprites. I gave my base character script a sprite list variable with a length of 5 and filled each scene character's list with random icons to demonstrate the functionality. I then added code to my update UI function which changes the action icons in the UI to match those in the active character's action icon list.
Some of my favourite icons:
Code I added to the update UI function:
Here is a video of the upgraded UI in action:
Comments