Tower Defense Tutorial - Brackeys - Ep. 26

March 6, 2019

Tower Defense Tutorial

Episode 26 – Fading

Youtube - How to make a Tower Defense Game (E26 LEVEL SELECT) - Unity Tutorial
By: Brackeys
Ep. 26

This tutorial gets into creating a level select menu for the player.

This would require its own scene, so we duplicated the Main Menu scene as a place to start since it’s already fairly empty. We started by setting up the hierarchy of UI assets for the level content selection area. It was noted that this is a general way to setup a scrolling menu for selecting objects in Unity.

The hierarchy is as follows:

  • UICanvas
    • Title
    • Levels
      • ScrollRect
        • Content

We then added a button to our Content UI object, and gave that object a Grid Layout component. This allows Unity to place everything in an even grid layout for you. We also added a Content Size Fitter. This helps allow the object it is attached to scale to fit the content placed in it. We also made sure to move the pivot anchor point of this UI object to the top of the object to make sure it scales downward from that point instead of out from the center.

We added a bunch of buttons to help see that all of the scaling and clipping was working properly with the UI elements. To help keep them from flowing out of the menu (which also works with the idea of creating a scrolling menu), we added a Rect Mask 2D component to the ScrollRect object which blocked out child objects that were not within this rectangle space.

Speaking of scrolling, we added the Scroll Rect component to the ScrollRect object next. This just required dragging in the ScrollRect object as the viewport and the Content object as the content to start this working. This did have a slight issue for me where it seemed that I could only scroll if I clicked/held on a button in the content area. If I clicked/held on an empty space within the content area, I could not scroll the menu, so that would have to be fixed.

We created a simple LevelSelector script and placed it in an empty gameobject. This script provides the method for the onclick event for each of the buttons to reference to take the player to the corresponding level. To help test this, we just duplicated our initial level and changed the number of lives to create a level 2.

Finally, we added a scrollbar component to the Levels object to go along with the scrolling of our scroll rect. It just gives another, clearer option for scrolling, especially for someone using a computer.

SUMMARY

  • Check pivot/anchor point locations for scaling UI elements, especially those using a component like Content Size Fitter.
  • Implementing scrolling into UI elements in Unity is straightforward with ScrollRect and Scrollbar components.

Comments

Post a Comment

Popular posts from this blog

Online Multiplayer Networking Solution Tutorial Using Unity and Mirror - Tutorial by: Jason Weimann

February 2, 2021 Networking Online Multiplayer Unity & Mirror Title: Let's build a 4-Player Networked Game LIVE - Online Shooter (with Mirror & Unity) By: Jason Weimann Youtube - Tutorial Description: Intro to using Mirror for networking online multiplayer play in Unity development. Introduction This tutorial has Jason Weimann implementing online network play into a basic Unity twin-stick shooting game. They use Mirror, which is a Unity asset used for simplifying the online network synchronization process. This is a live implementation where they work through many errors transferring a game from simply working locally to working with a host/client relationship. Mirror Mirror - Home Page Mirror is "a high level Networking API for Unity, supporting different low level Transports" (from Mirror themselves). It is a clean solution for implementing a quick and simple online networking option for Unity projects. The core components breakd...
Read more

Sebastian Lague A* Tutorial Series - Path Smoothing - Pt. 08 and Pt. 09

December 13, 2019 A* Tutorial Series A* Pathfinding (E08: path smoothing 1/2) A* Pathfinding (E08: path smoothing 1/2) Link - Tutorial 1 By: Sebastian Lague A* Tutorial Series A* Pathfinding (E09: path smoothing 2/2) A* Pathfinding (E09: path smoothing 2/2) Link - Tutorial 2 By: Sebastian Lague A* Pathfinding (E08: path smoothing 1/2) Intro: These tutorials both covered the same general topic of smoothing the path of the unit. Theory Currently the units follow the path by making a straight line from one point to the next, which looks unnatural. To remedy this, they suggest a path smoothing technique. This system starts with each point having a small line pointing directly to the previous point, whose length is called the "turn distance". This line then has a perpendicular line emanating from the end, called the "turn boundary". Once the unit passes this turn boundary, it will start to turn towards the next point in the path (inste...
Read more

AStar for 2D Pathfinding in Unity

June 8, 2019 Unity 2D Pathfinding Using AStar Youtube - 2D PATHFINDING - Enemy AI in Unity By: Brackeys This tutorial shows how to setup the general AStar package in a 2D Unity project. It goes over the basics of setting up an initial grid and getting a basic enemy AI that will make the enemy follow a target. It also has an example to setup your own simple AStar enemy AI script using AStar's Pathfinding package. This tutorial also cover the basics of setting up an enemy object with a graphics child object, flipping that graphic when the enemy should be going another direction, and just moving an enemy with physics and forces in general, instead of just updating position.
Read more