Category: Tutorial

February 4, 2019

Tower Defense Tutorial

Episode 11 – Currency

Youtube – How to make a Tower Defense Game (E11 CURRENCY) – Unity Tutorial

By: Brackeys

Ep. 11

This episode gets into setting up the currency system for the game. We started by creating the TurretBluePrint script. This was set as System.Serializable, which lets us see the fields of the script in the editor. We also removed the MonoBehaviour reference (very important, I initially missed this and it was not showing up in the editor properly). We then went back through previous scripts (such as BuildManager and Node) and applied this new TurretBluePrint class where it made sense.

We finally moved the method that actually builds the turrets from the Node script into the BuildManager script. This started by creating a bool property CanBuild in the BuildManager. As a property, we only allow it to “get” something (it only has the get part of get/set). So it was:
Public bool CanBuild {get {return turretToBuild != null}}
Similar to writing a small function that checks if turretToBuild is equal to null or not.

We created a small helper method in the Node script simply titled GetBuildPosition. This returned a vector3 that summed the node’s transform.position and the determined positionOffset. This vector3 could then directly be referenced as the precise location to instantiate a turret relative to the node selected. Also wanted to make the GameObject turret variable in node public, so we added a Header “Optional” to make it very clear in the editor it was ok if this was not filled with something.

This is how everything works now:

• Start by clicking on shop icon
• Performs Shop method tied to button: calls SelectTurretToBuild method from BuildManager and sends it TurretBluePrint (class holding a turret prefab and a cost int) pertaining to the specific turret selected
• In BuildManager, this method just sets the turretToBuild TurretBluePrint variable to the passed in TurretBluePrint
• Then when player clicks on a node (OnMouseDown), it performs a few checks that just return first: is it over a UI element, if BuildManager’s CanBuild is false, or if turret does not equal null
• If it passes all these checks, it calls the BuildTurretOn method from the BuildManager and passes in itself as the Node input for the method
• BuildTurretOn instantiates the GameObject portion of the turretToBuild TurretBluePrint class (turretToBuild.prefab) at the proper position (from the node helper method GetBuildPosition)
• Finally, BuildTurretOn also sets that node.turret variable to the instantiated turret gameObject (that node’s turret variable will no longer be null, so it will not pass the first OnMouseDown check)

Now we start on dealing with actual currency. We created a script PlayerStats to add to the GameManager to hold onto any player related stats. The most direct one being Money, which was created as a public static int so we could access it from anywhere easily. It will also carry over from one scene to the next. We then edited the BuildTurretOn method in the BuildManager so it would properly deal with currency. It first checks if the player has enough money before placing a turret (if they do not, then it does not do anything else). If that passes, it creates the turret and subtracts the cost from the player’s current money.

SUMMARY

• *** Very Helpful! By removing the MonoBehaviour reference and adding the System.Serializable to a class, we can use it as a type of container to simply store multiple variables (different types and values) with multiple shown in the editor. For example, our TurretBluePrint class held a public GameObject and public int, so anytime we referenced a public TurretBluePrint in a script, it created a slot for a GameObject and an int in the editor tied to this one variable
• Use Boolean properties (just “get” variables) as a safe and effective way to check state of other variables
• Use small helper functions for cases of small arithmetic functions that will probably be needed a lot, especially if they can be well defined so the reason for the math is clear
• Be careful with public static variables as they persist over scenes

February 3, 2019

Tower Defense Tutorial

Episode 10 – Missile

Youtube – How to make a Tower Defense Game (E10 MISSILES) – Unity Tutorial

By: Brackeys

Ep. 10

This tutorial focused on the missile prefabs for the missile launcher object. There was a heavy focus on effects and visuals, but there were still some additional gameplay elements added to the Bullet scripts of the missiles specifically.

For the interesting gameplay of the missiles, a Physics.OverlapSphere was added so they could find other nearby gameObjects within a determined explosionRadius and damage those objects as well. This OverlapSphere puts all the colliders it finds into an array, which is then dealt with by a foreach loop.

We created a new particle effect for the missile. I still don’t quite understand the new nested prefab QoL changes in Unity, but I did create a nested prefab for this effect. The main effect was the debris falling apart, similar to the bullet. The child effect were flames, which were orange cubes that floated up. Finally we also added a point light that very quickly fades out. The fade out was done with the Animation window by recording and simply starting with the desired initial intensity, then reducing the intensity to 0 at a later time stamp.

SUMMARY

• If you have a visual model that isn’t on the axes you want for any reason, just call it “Graphics” or “GFX”, and put it as a child to what you will consider the true gameObject to interact with and align that properly by rotating the new GFX/Graphics element
• Look into particle effects, there are a lot of options
• Look into nested prefabs in Unity 2018.3+
• Physics.Overlap sphere is useful to find collidable gameObjects around a location

January 29, 2019

Tower Defense Tutorial

Episode 09 – Missile Launcher

Youtube – How to make a Tower Defense Game (E09 MISSILE LAUNCHER) – Unity Tutorial

By: Brackeys

Ep. 09

This tutorial covers making the Missile Launcher turret. A lot of it is the same as setting up the first turret, but it’s good practice to repeat the setup. It is extra useful for me because I am using Unity 2018.3 and there is a new way of working with prefabs so any practice with that is very useful.

There is a keyboard shortcut for selecting a variable and changing its name across all instances within the script (and even other scripts). Use Ctrl + r + r, then just type the new name over the old one.

SUMMARY

• VS Keyboard Shortcut: Ctrl + r + r : Lets you replace all instances of a variable (even across scripts) with a new name
• Just keep practicing with new Unity prefab setup
• Simple way of creating UI icon from last time worked well again here

January 27, 2019

Tower Defense Tutorial

Episode 08 – Shop

Youtube – How to make a Tower Defense Game (E08 SHOP) – Unity Tutorial

By: Brackeys

Ep. 08

This tutorial begins to set up the shop UI for the tower defense game. Setting up the shop UI begins with adding a UI Panel to the Canvas. This was brought down to the bottom and set to stretch across horizontally with the anchors. Then a Horizontal Layout Group component was added, which helps deal with the organization/alignment of children UI objects within this UI object’s space. Those children UI objects are buttons, which are used to choose different turret options for purchase. Going along with the Horizontal Layout Group, all of the buttons had a Layout Element component added to them. This allows you to enter some information on things such as preferred dimension, min dimensions, etc.

We used a quick and simple method to create a nice visual “button” so the player knows what tower is being selected to build. We went into the existing turret model’s prefab and took a screen shot of it with the Snip tool. Then we took that over to Photoshop and erased out the background (this was more easily done by making sure to turn off the skybox in the prefab editor visual so the background was entirely the single Unity blue color). I also changed the PS canvas size to a nice 256 x 256 pixels. Then exported out a .PNG with transparency on. We pulled the image into the Unity editor and changed the texture to a 2D sprite. This image could then be used as the UI sprite of the button, and we had a button that is a sample image of the actual model of our turret.

A Shop script was added to the Shop gameObject. This mostly deals with the actions that the buttons on the UI should perform. This deals a lot with relaying information to the BuildManager script, so a reference to that is immediately set in the Start of the Shop script. It then has methods dictating what turret the BuildManager should be preparing to build. Then, as seen in the earlier tutorials, the Nodes (spaces to place turrets) have their own scripts to access the BuildManager to see what is prepared to be built, and then the Node script actually instantiates the turret as long as the proper conditions are met. The BuildManager acts as the central scripting “hub” for dealing with all of the turret building.

As a final QoL touch for the game, a restriction was placed for highlighting and selecting nodes that were behind important interactive UI elements (we don’t want players placing turrets when they are simply going to select a turret to build). To do this, we went into the Node script and added the namespace {using UnityEngine.EventSystems;}. Then in both the OnMouseDown and OnMouseEnter methods, we added an if statement that just returns {if (EventSystem.current.IsPointerOverGameObject())}. This stops the rest of the method from occurring if the mouse cursor is already on an EventSystems object (i.e. a UI element).

SUMMARY

• Use Horizontal Group Layout and Layout Elements components on UI elements to help organize and space them nicely
• Create simple UI button sprite images of models with Snip of prefab editor image, Photoshop out background color, export as .PNG with transparency
• Have a script that deals with the UI element methods (i.e. what the buttons do) and have it reference the script(s) where most of the “work” is done
• Use an if statement check with UnityEngine.EventSystems to make sure players clicking on UI elements don’t click on other game elements with that same click, using IsPointerOverGameObject

January 26, 2019

Tower Defense Tutorial

Episode 06 – Turrets

Youtube – How to make a Tower Defense Game (E06 BUILDING) – Unity Tutorial
Youtube – How to make a Tower Defense Game (E07 CAMERA) – Unity Tutorial

By: Brackeys

Ep. 06

This tutorial covers the user interactions with the node spaces. We started with an OnMouseEnter and OnMouseExit methods. These simply changed the color of the node when hovering the mouse over the node object.

A BuildManager script was created and added to the GameManager object in the game to help dealing with building turrets. We want to access this to handle the building of turrets. The BuildManager used a basic singleton pattern. To do this, we created a public static BuildManager variable called instance within the BuildManager script itself. This will effectively reference itself. In the Awake method, we just set instance equal to this.

Building a turret just used the basic instantiation setup again. The only slight difference is that the node script references the BuildManager script to determine what turret to build (will be more useful in the future with different turret types).

SUMMARY

• OnMouseEnter and OnMouseExit very straightforward Unity methods for dealing with hovering mouse actions.
• Learn more about Singleton pattern and why it’s useful
• Basic color change on hover setup: store original color at start; change color during action (i.e. OnMouseEnter); change back to stored original color after event
• Easy to access public singleton-like class and its methods with the instance = this setup; Just {name of script}.instance.{name of method}()
• Setting a Color variable as public in Unity editor just lets you select any color with normal color selection palette

Ep. 07

This tutorial focused on creating the camera controller. It was created in sort of an RTS style. This would be down on keypress, using if (Input.GetKey(“w”)), which would then perform a transform.Translate(). Translate is an easy way to move objects without any need for physics.

To go with typical RTS camera movement, we wanted to move the camera around when the player has the mouse cursor around the edges of the screen. We started with Input.MousePosition, which registers the screen position of the mouse relative to the bottom left corner. This method of tracking the mouse obviously varies with the screen size, so it is a good idea to use this in conjunction with references to the screen size (i.e. Screen.height) as opposed to hardcoded values. We didn’t want to require the mouse to be at the complete border of the screen to move the camera, so we added a panBorderThickness variable to subtract from the screen dimension variables to create an area near the border of the camera where the movement would apply.

The camera movement buffer zones become the following:

• Top: mousePosition.y >= Screen.height – panBorderThickness
• Top: mousePosition.y <= panBorderThickness
• Top: mousePosition.x >= Screen.width – panBorderThickness
• Top: mousePosition.x <= panBorderThickness

We also added a zooming effect. It can feel extra nice if you rotate the camera relative to its zoom. There is an extra amendment to this tutorial for this effect. This will use the scroll wheel. It is treated more similarly to a joystick, where you use Input.GetAxis. You can find the reference name of the mouse scroll wheel in Project Settings -> Input. Finally, to restrict the zooming values, we created a min and max value and used Mathf.Clamp to limit that.

Unity Forum Link – More Information for Nicer Camera Controller

SUMMARY

• transform.Translate() good for non-Physics based movement
• Use Screen.Height and Screen.Width with a border buffer to create zones of mouse position to move camera in RTS-style
• Create min/max values for camera distance so it doesn’t fly away from game

January 25, 2019

Tower Defense Tutorial

Episode 05 – Turrets

Youtube – How to make a Tower Defense Game (E05 SHOOTING) – Unity Tutorial

By: Brackeys

Ep. 05

This tutorial starts adding the shooting logic to the turrets. It begins with a basic setup to have a fire rate/firing cooldown based on a timer subject to Time.deltaTime. It then gets into some variable organization where they are situated in a way that makes more sense and adds in headers for clarification in the Unity editor. Creating a header just requires this: [Header(“Header Name”)]. This really nicely separates the variables in the editor, as it sections them off along with the title at the top of that block of variables.

The bullets for the turret are created with a basic Instantiation. However, since we want to reference the bullet instantiated in someway, we set it equal to a GameObject variable. This also requires “object casting”, so the instantiation has (GameObject) in front of it. I need to look into object casting.

This required more instances of destroying gameObjects, and again the tutorial adds the return command afterward to make sure to account for the processing time needed to destroy an object. I need to look into proper use of “return” in Unity scripting.

Determining if the bullet hit the target used an interesting method. The vector between the bullet and its target was determined each frame in Update as normal, but instead of using this solely for directional purposes by normalizing it, the distance (magnitude) was used to determine collision. Another variable, distanceThisFrame, was created and was just the bullet’s speed * time.deltatime. This would determine how far the bullet should move this frame. This was compared with that directional vector between the bullet and the target, and if the distance between them was less than the distance the bullet should travel, it was determined the bullet should collide. I think this specifically works better with a “homing” style projectile, since this means the target moving out of the way isn’t really an option anyway, and it constantly wants to update direction anyway.

They created a simple particle effect to go with the bullet collision. They treated this similarly to the instantiation of the bullet. The particle effect was instantiated as a new gameObject variable, and cast as a gameObject. This was then immediately referenced the next line to Destroy it after a time (after its duration basically). This is a good way to keep your scene clean with instantiated particle effects so they don’t linger as gameObject even after they appear to be gone.

SUMMARY

• Headers are fantastic for keeping public variables organized in the Unity editor.
• Destroying gameObjects can take processing time, so using return in conjunction can help keep code safe and do what you expect.
• Look into proper use of “return;” command.
• Look into “casting to GameObject”
• Instance particle effects as gameObject variables to reference to easily destroy them so they do not clog scene