Category: Unity

March 4, 2019

Tower Defense Tutorial

Episode 24 – Fading

Youtube – How to make a Tower Defense Game (E24 FADING) – Unity Tutorial

By: Brackeys

Ep. 24

This tutorial focuses on creating an overall fading effect for the game.

We created an empty gameObject, SceneFader, and added a UI Canvas to that, which we then added a UI image to that is just a black image.

Then we added a SceneFader script to our SceneFader object to handle the fade effects. We used IEnumerators to handle the fading methods. We used the IEnumerator for its ability to wait certain amounts of time. The IEnumerator FadeIn uses a yield return 0; line in its while loop so that it updates at the same rate as update (every frame). Yield return 0 basically tells it to wait a frame.

We created a variable of type AnimationCurve, which gives us access to a curve we can manipulate by changing its shape or adding/removing points to control how a value fluctuates. We used this to control the FadeIn IEnumerator. We then duplicated this IEnumerator to create a FadeOut version as well (just swapped the values in the while loop to run the other way to make the rest of the code consistent). FadeOut was then added to a public method, FadeTo. The both receive a string variable that corresponds to the scene name of what scene they should be fading to.

We then just went to all of the scripts/menus where we move between scenes and added this FadeTo call from the SceneFader. This included the pause menu, game over menu, and main menu. This also included making sure to drag our SceneFader into the reference for all of these scripts since they did not want to use FindGameobjectOfType for computer processing reasons.

My thoughts on why an IEnumerator was used here is that they seem to be good with dealing with something you want to happen over time, and they can run while other actions are running/processing. Since we just wanted a fade effect, it’s helpful to let everything else continue to run as opposed to interrupting something to finish this effect. The time element basically lets us have a pseudo”Update” method that only runs for a certain amount of time and then never needs to check again.

SUMMARY

• If you want a UI element to cover everything (including other UI elements) make sure to check the Sorting Order
• I still need to look into IEnumerators to get a better grasp on their specific uses

March 2, 2019

Tower Defense Tutorial

Episode 23 – Enemy Health Bars

Youtube – How to make a Tower Defense Game (E23 HEALTH BARS) – Unity Tutorial

By: Brackeys

Ep. 23

In this tutorial we created health bars for the enemies.

We began by creating the foundation for the UI asset. We created a new World Space canvas, added a child UI Image object as our health background, then childed a UI image to that that would be our actual health bar. The BG was given a transparent black color, while the health bar was a fully opaque light green.

We then childed this full group of UI assets to our Enemy prefab. The position needed fixed when this was applied, and the scaling reset so I had to reset that manually as well. This created a health bar that would follow our enemies now. We would need a bit of a tracking script if our enemies rotated (so the health bar would not), but currently the enemies don’t rotate at all so this is not necessary.

To make our health bar actually do something, we started by dragging in a white square image to the source image of the health bar UI image, which was created for the tutorial. It was just a simple 2 x 2 white square. We then changed the Image Type to Filled, and selected the Fill Method “Horizontal”. This allows us to control how much of the image is “filled” horizontally, between 0 and 1 (0 – 100%). This has a very similar effect to what I usually script for health bars which is just a scale multiplier between 1 and 0 tied to the x scale of an object with the anchor point located all the way on the left/right. Either way, this still needs to be tied into health scripts.

Our fill amount for this health bar image needs to be between 0 and 1, so we need to represent our current enemy health as some fraction of our enemy max health. This is easy enough to do by simply holding a value for the max health and dividing the current health by the max health.

PROBLEMS

Bug

I found a bug where some of the turrets I was placing could not be upgraded. They were base turrets but when I selected them it already said they were “Maxed Out” and I could not upgrade them. It was only a select few turrets, and I realized they were in locations where I had an upgraded turret previously and sold it to make room for a new turret.

I believe this bug is simply caused by the fact that the state of upgraded is tied to the node location, so when we upgrade and then sell, the upgrade state is not being reset. That should be a simple fix of resetting the upgrade state when the Sell method is invoked.

Solved

This appeared to be the case as the bug hasn’t come back since I simply added a line to set the isUpgraded bool to false in the Sell method of the Node script.

SUMMARY

• Another way to create health bars: under the Image (script) component; select image type Filled, and choose Fill Method “Horizontal”

March 1, 2019

Tower Defense Tutorial

Episode 22 – Main Menu

Youtube – How to make a Tower Defense Game (E22 MAIN MENU) – Unity Tutorial

By: Brackeys

Ep. 22

In this tutorial we created the Main Menu scene for the game.

We duplicated the original game scene to start, and deleted out everything except the Light, Main Camera, and Environment. Then we only kept the Ground Plane from the environment. We then added a Standard Turret Prefab to be a central object for our menu.

We then edited the sky box to something other than the Unity default. We selected Solid Color for it, and used the color picker to pick the top most color of our ground plane so the sky matched this very final gradient of color. This made it seem like the background was one solid, endless color gradient for the most part.

We then created a World Space canvas with text fitted to it for our PLAY text. We placed this on top of the turret prefab in our menu. We then wanted to make this text clickable, so we just added a Button (script) component. This basically turned the text into a button for us. We could even add our previous animation by simply adding an Animator component and selected our Button Controller for the Controller.

We then created the MainMenu script which will hold the main functionality of this scene. This started by creating public Play and Quit methods for our Play Button and Quit Button. Quit was just Application.Quit, and Play loaded our MainLevel scene.

Finally, we added a bit of animation to our Main Menu to utilize the fact it is set in a 3D environment. We added the two button canvases as children to the PartToRotate object of the turret, and created a quick animation for that that just rotated the entire turret and UI element back and forth a bit over time. This really made the menu feel alive and 3D.

SUMMARY

• To set current editor view as camera view: select camera and press: Ctrl + Shift + F
• Set skybox to solid color and use color picker to select farthest/top most color of ground plane for a quick/easy way to make ground and sky look like one coherent background
• When referencing scene names, make a string and set its value to that scene name so if at any point you want to change the scene name, you just change that string variable’s value and it will fix it in all locations needed

February 28, 2019

Tower Defense Tutorial

Episode 21 – Pause Menu

Youtube – How to make a Tower Defense Game (E21 PAUSE MENU) – Unity Tutorial

By: Brackeys

Ep. 21

This tutorial focused on creating the Pause Menu.

To start, we create another UI Panel as the base for the pause menu, and added buttons for: Continue, Retry and Menu. This also had text saying “Paused”.

We created a new script on our Game Manager, PauseMenu. This would deal with the functionality of activating/deactivating our pause menu UI elements. This was done with a method called Toggle, which used a command of ui.SetActive(!ui.activeSelf) which would set whether it was enabled or not to the opposite of what it currently is.

We then got to actually pausing the game. This can be done by simply setting Time.timeScale = 0f. It is commonly mistaken that you also need to set Time.fixedDeltaTime to 0 as well, but this is actually taken care of by Time.timeScale already. We also need to unpause, so we set Time.timeScale back to 1f when that is needed.

It is important to note that while Time.timeScale is at 0, this does prevent some things from working. The hover color of UI buttons was still fine as it is not affected by the timescale, but animations you are running with the Animator will be. They need a specific setting changed in order to function properly. This was shown by trying to fade in our pause menu. Initially, we created a simple recorded animation of changing the alpha from 0 to 1, but when we ran it in game it did not appear. That is because the animation was frozen with the timeScale.

To prevent the animation from being affected by our timescale variation, we change the “Update Mode” in the Animator component of the object we are animating from Normal to Unscaled Time.

Then, we also wanted to animate the buttons some (instead of just having a simple highlight color). To start, we went to the Button (script) component and changed the Transition to Animation. We then selected AutoGenerate Animation. This gave us 4 options in the Animation tab for: Normal, Highlighted, Pressed, Disabled. These are the 4 states of the button. These let you set an animation to start whenever these separate events occur.

SUMMARY

• Use [gameObject].SetActive(![gameObject].activeSelf) to inverse the current enabled state of a gameObject
• Use Time.timeScale = 0f; to do a simple pause of your game. This should also set Time.fixedDeltaTime to 0f behind the scenes so you do not need to set this as well. (To unpause, set Time.timeScale back to 1f.)
• If you want to animate objects during timescale = 0 (like pause menu animations), make sure to change their Animator component Update Modes from Normal to Unscaled Time.
• To animate UI buttons, select Animation for Transition under the Button (script) component (built into Unity UI buttons). Can then select AutoGenerate animation to record animations like anything else, and for all 4 different states of the button (Normal, Highlighted, Pressed, Disabled).