Join Jesse Freeman for an in-depth discussion in this video Nesting UI elements, part of Unity 5: UI.
- So now that we've covered how the Rect Transform works…on UI elements inside of a Canvas,…let's talk about Nesting UI elements together…to create more advanced layouts.…In our Canvas, let's right click,…and create a New Panel.…A panel is simply a Game Object…with a Rect Transform on it,…a Canvas renderer, and an image.…By default, our panel has a background image…and its color transparency is set to half of its value.…
A panel is also set…to stretch and fill its parent container.…Let's go ahead…and change our Rect Transform for the panel…to be Center Aligned.…Let's also change the Width to 300…and the Height to 300.…Next, we can drag the button…inside of the panel.…You'll note that the button…is still aligned in its original position.…Because by default, Unity tries to preserve…its original layout position.…
If we go in and change the Left position to zero,…the Y position to zero, the Right position to zero,…and leave the Height the same,…you'll now see that our button…is aligned inside of our panel.…In fact, we can go back in…
- 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
Skill Level Intermediate
1. The Canvas
2. Working with the RectTransform
3. Working with Text
4. Working with Images
5. Working with Buttons
6. Handling UI Input
7. Working with a Slider
8. Controlling Layout
9. Toggles, Dropdowns, and the Input Field
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.