Check out a free preview of the full Game Development with Unity for Web Developers course

The "Tour of the Unity UI" Lesson is part of the full, Game Development with Unity for Web Developers course featured in this preview video. Here's what you'd learn in this lesson:

Nick walks through Unity's UI and discusses each section's applications, including projects, scenes, consol, layers, layout, and hierarchy. A demonstration of Unity's UI rearrangeable layout and how to revert the layout to default are also covered in this segment.


Transcript from the "Tour of the Unity UI" Lesson

>> And once that project is pulled, You'll go to the unity hub. And you can either click Open here, or you can choose this little arrow here if you want a few more options. So I would say Add project from disk. And I'll go to my Development folder, go into the folder for the repo, and then go into the Start folder.

And mine will look a little bit different, because I've already opened it up and Unity has generated a few metafiles. So your start project will have a few less folders there. And then you would hit Add Project. So I've already done that. And I already have it listed in the hub here.

And you'll see that when you have projects listed in the Unity hub, I'm actually going to click this, so it starts opening. But when you have projects listed in the Unity hub, you can choose the editor version that it opens up with. So if I click that, it will bring up all of the different versions that I could potentially open the project with, and also the platform that I can open the project with.

So I've opened that up and I'll go ahead and zoom in on this window. And when you first open it up, it should look something like this, you should have the same folders here in the project window. You might not have this scene open, I'll get get into how to open that up, but generally this is what it should look like.

So, Let's go back slides here. And before we get into the project, I wanna give you a brief tour of the Unity interface, because there's a lot of stuff there, it's kinda like sitting down at the cockpit of a spatial or something. There's just all these buttons and menus and tabs and windows, and it can be really overwhelming the first time that you look at it.

But the key idea here is that this interface is rearrangeable. So like many modern interfaces, it's comprised of these windows and tabs, and you can move them around however you'd like. And that's very useful in game development. Just as an example, if you're developing a game for phones, and it's a game that's meant to be played in portrait mode.

It might be useful to have your scene view and game view kind of in that more elongated portrait mode, I guess, aspect ratio. And so yeah, rearranging these windows is really useful, it's something I do all the time. And you can actually save layouts for different projects that you might be working on.

So let's get into a brief interface tour. So I'll jump back to Unity. And something that you may wanna do right now, if you've opened this up and you're a little bit confused, is go to the upper right here where it says Layout, and you can just choose Default.

So if you ever rearrange your windows and you're trying to get back to how things were, so I'll just kinda drag some things around here. And if you've accidentally dragged stuff all over the place and so much so that even the console's spitting out errors, you don't know how to get back.

You can always just go back up to the upper right here, choose the default layout, and it will take you right back. So we've got a couple of windows here that are open by default. And the first one that you'll probably notice more than any other is this big scene view right in the middle.

So the scene view, as the name implies, is how you navigate scenes in Unity. Scenes are assets that hold all of the stuff that's in your game. So all of the things that are in your 3D game world are going to be present and visible in the scene view.

And if you hold down on a Mac option or on Windows Alt, and then drag around in the scene view, you can orbit the camera, and kind of take a look around. And, If you use the gizmo in the upper right here, you can also kind of orbit the camera just by clicking on the x, y, and z or widgets there.

And if you don't have the main scene open, you might have a default scene open. You can come down to the project window here, and you should see a folder called Scenes. I'm actually going to drag this little slider down at the bottom here, so I get a list view.

So that's what I prefer. Go to the Scenes folder and you should see a file called main.unity, that is a scene file. And if you double click that, I already have it open, but it will open up the main scene, which is where we're going to be working today.

So we've talked about the scene view. The project view is basically just a file browser. So it gives you a window into all of the stuff that's in your project. And this project has a few starter assets. So I've got an input assets that we'll use for driving player input.

There's some materials here that we can click on and get a look at over here in the inspector, which we'll talk about in a second. There's the Scenes folder, which has the main scene. There's a Scripts folder, it already has a script in it, that we'll also get to, but that's where we're going to be putting all of our C# scripts as we develop.

There are a few default settings. We have what's called the Universal Render Pipeline, which is the pipeline that is best used for, really, I would say anything, actually. There's a few other render pipelines that are for more specific purposes, but the Universal Render Pipeline, as the name implies, is great for just about any application.

And then we also have a few textures here. So there's some stuff in our project window already. And it's just kind of a detail view there. You can click on the folders here and you can see what's in your project. Now, you may have noticed, when I was clicking on these things, that I'm getting more information about each one of these in this window on the right here called the inspector.

The inspector allows you to see more details about assets and GameObjects in your project. So when I click through these different materials, I can see their various properties. And then I can also see a preview of this material. And I can actually orbit this 3D view and take a look at this material in more detail in kind of a default lighting or default environment here, just kinda nice.

On the left side, we have what's called the hierarchy. The hierarchy lists all of the GameObjects that are in any open scenes. And I do say scenes plural, you can have multiple scenes open, and they will be listed out in the hierarchy. We're only going to be working in one scene today, just for the sake of simplicity.

But you could potentially have multiple scenes here that are collapsible. And then the hierarchy, it is called the hierarchy because GameObjects can be nested underneath one another. So we have basically a parent-child relationship here, or a tree, which if you're a web developer should be pretty familiar to you, it's almost like the DOM, right?

And in the scene, I have a few GameObjects, I have a camera, I have a light, and I have what's called an event system. But really, those names are almost misnomers, because these are just all GameObjects. They all inherit from the same class. But they have these things called components attached to them, which drives their behavior.

So we'll get more into the GameObject scene, component relationship in a little bit. So if this is sounding a little confusing, we'll expand on that soon. So a few other windows that are important to be aware of. Just like the scene view, we also have another 3D view called the game view.

Right now, there's nothing in the game view, because we don't have anything in our scene other than this Skybox here. But the main camera is actually set to just have a solid colored background, which is black. But the game view renders what this camera is seeing. So it's kind of a preview of what your game is going to look like.

And there's a few useful additional buttons up here, such as the resolution drop-down. So right now, it's just in three aspects, so it will conform the game to whatever aspect ratio my game view is in. But if you were, say, working on a console game and you knew it was going to be deployed to televisions, you would want to use 16:9.

Or even a specific resolution like 4K, so that you knew exactly what everything was going to look like, how everything was gonna be framed, how the UI would show up, and so forth. But I'm just gonna leave this on free aspect for now. There is the console window down here next to the project window.

And this will show you various errors, warnings, debug output. Hopefully we don't need the console window today, we don't hit any errors, but if errors do come up, that's where they'll be visible. And it's surprising how great Unity is at having really good error messages. You can double-click these, dig into the lines where you're having a problem, and usually get pretty good information about what's going on in your scripts.

And then right here at the top, maybe the most important part of the interface is a Play button. So the really cool thing about developing in Unity is that you don't need to compile your game every time you want to test it out. You can just work on scripts.

You can change things in the inspector, you can add and remove GameObjects, whatever, and you can hit the Play button. And right now, it's going to do nothing at all, the game is actually playing, but we don't have anything in the game. But if we did, you would actually be able to get a preview here, and it would look just like the WebGL preview that I showed you.

It looks exactly like what your game is going to look like when it's built and deployed. So that is kind of a whirlwind tour of the Unity interface. There's a lot more to learn here, but I'm going to let you explore that on your own. You can come up to the Window menu here and see some of the other windows, the ones that I showed were just under the General tab here.

So we covered the scene, game, inspector, hierarchy, project, console window, but there's also windows for exploring all of the lights in your game and digging into animation and audio. There are all kinds of debugging and profiling and analysis for digging into the performance characteristics of your game. So there's a lot here, but these are really just the main windows that even as a professional you're gonna be working with all the time.

So probably the most important tip that I covered there, if you take one thing away from that, is if you get lost, in the upper right, you can choose the default layout if you wanna just get back to where you started. So just to recap all of that really quick.

Again, we have the scene view, which is the 3D view of all of the GameObjects in the currently open scenes, plural. There's the game view, which is a preview of the game camera. The hierarchy is a list of all of the GameObjects that are in the current scene.

There's the inspector, which is a detail-view of the currently selected GameObject or the currently selected asset. The project window is a file browser for the currently open Unity project. The console outputs from scripts and shows you debug information and errors. And then the Play button at the very top runs your game in the Unity Editor

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now