August 21, 2019
Unity Pokemon Tutorial
Battle GUI
Youtube – Lets Make… Pokemon in Unity! – Episode 7 Battling GUI
By: BrainStorm Games
This tutorial focuses on setting up the GUI within a battle encounter. This includes creating the panels necessary for holding all of the information about the battle and the player’s input options.
The UI panel holding the moves was given a Grid Layout Group component. This helps when you want to layout children UI elements in a grid pattern. This component holds information such as padding (spacing added around borders of current UI elements) and cell size (how much space to give each individual grid component).
Working with UI elements in Unity is always weird and unpredictable for me, and this time was no different. When making the health bar UI canvases, I created the background (health container) and foreground (current health) health elements for the player’s pokemon first without any issue. However, when I duplicated both and tried to move them into position for the opposing pokemon, they acted very strangely. I was resizing them with their values in the insepctor and all of a sudden the foreground bar became extremely thin, like a line. Something must have “broke” when duplicating these scaling canvas UI elements and moving them as children into a different UI element that caused them to act strangely after editing them to any degree. I ended up solving this by deleting out the background element, fixing up the foreground element and just duplicating that and changing the color for the new background element for the opposing pokemon.
Unity can do UI layering in the hierarchy. The element that is lower will be shown above the other elements, which is how the foreground UI element for health was shown above the background container. This works good enough for the tutorial, but I would like to look into having more proper control for UI layering.