From the course: Unity: AR Visualization 02 Basic Interactivity

Making the UI manager - Unity Tutorial

From the course: Unity: AR Visualization 02 Basic Interactivity

Start my 1-month free trial

Making the UI manager

“

- [Instructor] Now that we're ready to get going, we're going to add a UIManager script, into our scripts directory. We've started to manage our code a lot better using namespaces, so we're going to reflect this in the folder structure inside our scripts directory. First thing we're going to do, click on Scripts, right click and go Create, New Folder. We're going to call this UI. And we're going to create a new script in here, and call that UIManager. Now that we have our script, let's open it up in our C# Editor. Perfect, here's our class. The first thing we're going to do is add our namespace. We're going to do this by going namespace and it's going to be ARApp.UI. We need to make sure that we have our curly brackets in there. And now our UIManager is part of the ARApp.UI namespace. Let's add in a couple more things. First thing we're going to do is add a reference to the object, so it can be referenced from everywhere. This is going to be a static reference and the concept is called creating a singleton. We've used that before inside of our project, and so we're going to make a public static UIManager. We're going to call this instance, because it is the instance of our UIManager class. Excellent, now that we have our instance, we need to assign it. We're going to do this on Awake. Awake is the first thing that gets called when Unity starts a script up. We're going to use the start method. Alright, and we'll name it Awake. Perfect, now let's assign the variable. And this representing this class. Great, we don't need the Update method right now. And there we have our UIManager class. Make sure we go and save that. Let's go back to Unity. Now that we're in Unity, we're going to go and move some stuff around to create our UIManager prefab. We've already added UI to this class before. We're going to go up to dialogues and we're going to reuse this asset for our UIManager. So let's go and rename this UIManager. And let's drag on our new script, and there we have a UIManager. We're also going to need to create a root object that we're going to put our HUD objects onto. So we need our camera and just like where we have our canvas for our dialogue manager, we're going to create a HUD. To do this, we're going to right click, create Empty and we're going to call this HUD. HUD usually stands up for Heads Up Display. It is the root of where we're going to put all of our buttons. And our HUD is going to need a canvas. To do this, let's go up to Add Component, Canvas. We're going to set this to Screen Space Camera. Let's hook up our existing camera, which is going to be our 2D camera and we're going to set our plane distance to one. Perfect. We're going to add a couple more things. We need interactivity for our objects, so we're going to add a Graphic Raycaster. Go Add Component, Graphic Raycaster. This will allow us to cast ray and interact with the objects on the prefabs. And lastly, we're going to add something called a Canvas Scaler. This is going to allow us to make sure that our buttons always sit on the top left hand and top right hand corners. So let's go ahead and add a Canvas Scaler. Now, Canvas Scaler's got a bunch of different options. We're going to be using the Scale with screen size. This allows us to set a reference resolution, meaning the resolution that we work off of, and we're going to choose 1024 for that. You can choose any number that you're comfortable with, I usually use this. Lasty because our app is going to be in portrait, we want our height to be fixed and our width to scale, and so we're going to set this little match, sliding dialogue here to height. And now we're ready to go.

Contents