Join Jesse Freeman for an in-depth discussion in this video Getting started with new components, part of Unity 5: UI.
- So in order for us to learn about the new Unity UI system, we're gonna need to create a new project. We're gonna call this project "UnityUI" and we'll also make this a 2D project. Now you can use the new UI system in 3D mode or 2D mode. The majority of this project is gonna focus on the 2D side of things, so let's set it to that. Now when you're ready, create a new project. Let's reconfigure the layout of Unity to work a little bit better with the UI.
We'll go into windows, layout, and select 'tall.' And from here, let's drag the inspector and dock it with the hierarchy. Move this over. And bring the game over to the left hand side. This way, we'll be able to preview all of our UI changes in the left hand side of our screen, work with the UI easier in the middle, and also use the hierarchy and the inspector on the right hand side.
Once you have the layout set up the way you want, let's drag the resources into our project. Here, we're going to take the artwork in fonts folder, and bring them into our assets folder. We'll also create a new folder called scenes. So as we work with each type of component, we'll save that a scene related to that component. Now, all the new UI components are located in the game object menu. You'll see the new UI menu, and from here, you can select one of each of the new components.
For right now, let's just select an image and see what happens. As you can see, a new image has been added to our screen, and also if we look at the hierarchy menu, we now have the image as well as a canvas and an event system game object added to our scene. The canvas represents where our components exist in the scene. And the canvas is also responsible for rendering them. You can right click on the canvas and also add components directly to it, or empty game objects.
In addition to the canvas, an event system is also created. The event system handles input from both controllers, mouse, and touch. Whenever you create a new component, it will automatically create a canvas and an event system for you. Let's select the image. Let's shrink the preview window so we have more room in the inspector. While we're going to dig into each of these components later, I just want to point out that a UI element is simply a game object, just like anything else you would have in your scene.
The only difference is that each component has its own scripts. In the case of this, our image has a rect transform instead of a normal transform. It has a canvas renderer, it it also has an image script. As we learn more about the UI system, we'll go through each of these components separately, how to work with them, and also how to customize them. You could also put your own game objects inside of the canvas. The only thing you'll have to do is swap out their transform for a rect transform in order to get the correct layout.
In the next movie, we're going to dig a little bit deeper into the canvas.
- Adding new components to the Canvas
- Working with RectTransforms
- Nesting UI elements
- Adding rich text and effects to the UI
- Creating images
- Styling UI buttons
- Handling input
- Creating sliders
- Controlling the layout of the screen
- Adding toggles and dropdowns