Sprint 6 Blog

 Overview

For this sprint, I was assigned the UI implementation for game units in the game scene. What needed to be done was a unit icon for each unit, with its corresponding element. I also stylized the UI to implement the sprites the team made. Next, I will need to work on giving each unit a corresponding health bar and highlight/grey out their UI display depending on if it's their turn or not.

UI Implementation

One of the first tasks I had to complete was assign each unit a slot and then give them the appropriate unit sprite. Below is the code I implemented to do that and it's result.



Here the implementation is functional but there are a few things that are missing that I later implemented. One of the first things was that the slot background didn't appear. What I did was make the side panels that display the icons a grid layout group. This handles putting the children objects in a uniform row with equal spacing. Once I did this I made a prefab of the unit slot and the components were instantiated through code.


Another thing I implemented that was missing was the element icon for each individual unit. Each unit has a different element so I needed to find a way to have each element enum equal a sprite to display for the unit. I was able to do this with a switch statement that had a sprite return depending on the enum value. Here is the code and how it works in game.



Right now the sprites are placeholder, but the functionality works, once the sprites are finished, I can plug in the correct sprite in the inspector. Another thing I worked on was stylizing the pop up for the unit stats. I did this by inputing the sprite wanted for the background and changing some of the colors for the stat texts. I also had to do some resizing and moving to better fit the game screen.


Another task I did for the game scene UI was resize and adjust the positioning of each button in the game scene so that they looked uniform and they all display in the game scene the same for every computer screen size and aspect ratio.






Comments

Popular Posts