February 12 2019
Tower Defense Tutorial
Episode 12 – User Interface
Youtube – How to make a Tower Defense Game (E12 USER INTERFACE) – Unity Tutorial
By: Brackeys
Ep. 12
We created another bool property in BuildManager called HasMoney, which checks if the playerstats has enough money to build what the player is trying to build. This was then used as a check to determine what color a node should be when the player hovers over it.
Next we moved on to creating UI. We moved the timer and money into a canvas in world space, below the main play area. There are weird interactions between UI element scaling and font size. They multiply together so you can get the same size by raising one and lowering the other, but even though the give the same multiplicative size, the resolution can be different.
We updated the wave spawner timer. We added a clamp to it so it never goes below 0. We also edited the formatting of the countdown timer text so that it showed 2 digits before the decimal point and 2 after (the hundredths place). This was done with string.Format(“{0:00.00}”, countdown).
We also added a script, MoneyUI, to the money UI element. This solely references the playerstats money variable and updates to that as text. This definitely does not need to be done in Update, and would be more efficient to happen when the money value changes only.
We added cost UI elements to the turret buttons. These were just simple panel and text UI elements, with the cost hard coded (hard typed) in. You could add functionality to tie this to their true values in script.
Finally we added some particle effects on building a turret. This started by creating an empty game object slightly raised vertically, then adding the particle system as a child to this. This was with the intention of rotating the parent empty object without moving the anchor of the particle system.
PROBLEMS
My UI elements were acting strange between the Horizontal Layout Group on the Canvas and the Layout Elements on the UI buttons (turret images). I was not getting the expected results with the preferred height and width of the Layout Elements (they would not change to those values even though they had room), but I could just manually change them just fine (so the horizontal layout group wasn’t restricting them from being those values). This is extra strange as there was an Editor note specifically stating “Some Values driven by HorizontalLayoutGroup”.
SUMMARY
- Scaling UI Element to fit that around it: Under anchor presets, hold “Alt” and select the bottom right corner option
- Font size multiplies with the UI element scaling, and you can get weird results sometimes. i.e. I had to change my UI scaling down from 1 to 0.1 because even though I could just use one tenth the font size to fit the same space, this gave the text poor resolution.
- Use string.Format to determine number of decimal places to show in number strings. The amount before the decimal point appears to also be important. (i.e. We used 0:00.00, which indicated which element to have two digits before and after the decimal point)