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

Exporting FBX from Houdini with Color

April 17, 2019 Exporting From Houdini FBX and Color Information Exporting the Model Using my balloon Houdini example from class, I was able to export the geometry using the Educational version (the Apprentice version does not allow exporting FBX, but you could export an OBJ for my purposes possibly). This was very straight forward, as you can just use File -> Export -> FBX in Houdini. Since I was doing this for a class to use in a Snapchat filter (using LensStudio), I wanted to reduce the poly count a lot. I opened the FBX in Maya and used a basic Reduce to reduce the poly count a lot before exporting that for use in LensStudio. While this was good enough to export the geometry, I could not get any of the color information to come with it. I originally exported out an OBJ and had the same issue, so I exported FBX in hopes it would keep the color information somehow, but this was not the case. Exporting the Color Information My first thought to get the color
Read more

Houdini Assignment - Fuse and Group

Image
April 8, 2019 Houdini Assignment Fuse and Group I worked on a Houdini class assignment to make a basic model and decided to try and create the bulb on the back of a Bulbasaur, a Pokemon that is half plant and half dinosaur. I figured I could use a lot of the basics we learned in class to get me pretty far, while also needing to cover a few new things to get it exactly how I wanted it. In class, we created a basic hot air balloon. This consisted of tracing a curve over a background reference image of a hot air balloon, creating a section of the balloon from this original curve, then replicating that section as many times as needed to fully encompass the full balloon. These were a lot of principles I used for creating my bulb. The biggest hurdle I needed to overcome was that that top of each of my sections would all need to connect at a single point, so I would need some additional nodes after simply creating a "left" and "right" variation of my addit
Read more