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