Join Jesse Freeman for an in-depth discussion in this video Working with RectTransforms, part of Unity 5: UI.
- Now, let's talk a little bit more about direct transform that each of our UI components has. Let's go back into our UI intro scene and let's select our button. We'll also show direct transform properties in the inspector. And before we dig into this, let's switch back over to 2D mode and also focus on our button. Direct transform is made up of several properties. The most important one is going to be at the top, which is our positions, as well as the width and height.
Now, this depends a lot on how our anchors are set up. Right now, because our Rect Transform is centered, we have a position x, a position y, a position z, and a width and a height. There are templates that change the anchor presets. Each of these effect the way that our button is laid out. We're going to dive a little bit more into the anchors in the next video. But it's important to note, as you change the anchor type you may also change the way that you're able to lay out the x and y position.
If you stretch out the anchors, instead of having a distinct x, y, width and height, you might have a top, left, right, or bottom. Also, the anchors can manually be changed via the drop-down. The next thing that we should talk about is the pivot. The pivot represents the area that the UI element will rotate around or be laid out against. In this case, you can see there is a light crosshair in the middle of our button.
And that's because our pivot and our anchors are set to the middle of the button. Pivot, x, and y are a zero to one relationship. Depending on how you're laying it out, zero is on the left, or in the case of y, zero is on the bottom. And one on the x position is to the right. And on y it'll be at the top. Last is the rotation and the scale. These work exactly how you would expect them on any other transform object.
Now, in the next video, we'll dive deeper into the anchors and show you how each of the anchor types affect the layout of our element inside of the Canvas.
Author
Updated
10/14/2016Released
11/25/2015- 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
Duration
Views
Related Courses
-
Unity: Level Design
with Adam Crespi3h 9m Intermediate -
Unity: Debugging Scripts
with Chris Byers1h 4m Intermediate -
Unity: Scripting with C#
with Kelley Hecker1h 19m Intermediate
-
Introduction
-
Welcome34s
-
-
1. The Canvas
-
The Canvas2m 7s
-
Canvas scaling4m 1s
-
Canvas: Screen space1m 52s
-
Canvas: World space3m 20s
-
2. Working with the RectTransform
-
Working with RectTransforms2m 26s
-
Understanding anchors2m 11s
-
Controlling the pivot3m 14s
-
Stretching UI elements1m 48s
-
Nesting UI elements4m 4s
-
-
3. Working with Text
-
Creating text1m 44s
-
Handling overflow2m 54s
-
Working with fonts1m 38s
-
Using rich text2m 15s
-
Creating font textures3m 1s
-
Adding effects1m 51s
-
Working with text in scripts2m 59s
-
-
4. Working with Images
-
Creating an image2m 41s
-
Creating sliced images2m 43s
-
-
5. Working with Buttons
-
Creating a button2m 56s
-
Styling buttons2m 49s
-
-
6. Handling UI Input
-
The Input classes2m 57s
-
Controlling UI navigation5m 12s
-
-
7. Working with a Slider
-
Creating a slider2m 21s
-
Styling sliders2m 24s
-
-
8. Controlling Layout
-
Using layout elements3m 34s
-
Understanding grid layouts3m 21s
-
Scrolling lists3m 3s
-
9. Toggles, Dropdowns, and the Input Field
-
Creating a dropdown3m 12s
-
Creating an input field1m 50s
-
Conclusion
-
Next steps51s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake 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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Working with RectTransforms