#unity3d 4.6

Somehow I forgot the point of prototyping--doing it fast to get feedback--and got lost in trying to implement functionality before prototyping was done to define the functionality! Complacency from getting final drafts of technical proposals and mockups handed to me?

Resource: A formatted transcript of Unity3D's video tutorial Rect Transform - Unity Official Tutorials. The Unity team packed a lot of information in 14 minutes.

Contents

(00:00) Introduction to the Rect Transform

(01:36) Rect Tool

Move

Resize

Rotate

Pivot Point

Editing in Global and Local Space

(04:03) Position and Size

Position

Size

(04:46) Anchors

(06:56) Prevent Resizing

(07:19) Resize Relative to the Parent

(08:58) Left, Right, Top, and Bottom

(09:52) Anchor Presets

(10:58) Pivot, Rotation, and Scale

(10:58) Pivot

(11:10) Rotation

(11:28) Scale

(12:35) Editing Modes

(13:31) Values Driven by Another UI Component

Introduction to the Rect Transform

(00:00) The Rect Transform is a new component that replaces the usual Transform component on all new UI elements. Whereas the Transform component represented the position, rotation, and scale of a 3D object in the scene volume, the Rect Transform represents a 2D rectangle specified by a width and height related to a pivot point. Even though the Rect Transform represents a 2D rectangle, the component does include a position along the z-axis as well as rotation and scale, so the element can be manipulated in the scene volume as a 3D object.

One important difference between a Rect Transform and the traditional Transform component is the concept of anchors. A Rect Transform can be anchored to its parent if that parent also has a Rect Transform component. Anchoring allows the UI element to move or stretch based on the position and size of the parent UI element's Rect Transform.

All UI elements must ultimately be a child of a canvas. Canvases themselves have a Rect Transform, so in almost all circumstances the parent of UI element will also have a Rect Transform and UI element will be anchored in some way. See more [transcribed] information on the canvas here.

Rect Tool

(01:36) In the Scene view, it is best to use the Rect Tool to manipulate a UI element. The Rect Tool can be selected by clicking on the Rect Tool button in the toolbar or by using the shortcut key 'T'. With the Rect tool selected, it is possible to move, resize, and rotate any UI element with this one tool.

Move

Using the Rect Tool on the selected UI element, it can be moved by clicking anywhere within the rectangle and dragging.

Resize

The UI element can be resized by clicking on any of the edges or corners and dragging. The cursor changes when hovering over an edge or corner from the usual pointer to a double-arrow aligned with the direction the UI element will resize when dragged. Holding the Shift key will constrain the UI element to be resized proportionately.

Rotate

The UI element can be rotated by clicking near any of the corners and dragging outside of the rectangle. The cursor will change to indicate when the tool can rotate the UI element.

Pivot Point

Resizing or rotating a UI element is done in relation to its pivot point. The pivot point is indicated by a blue ring, which by default starts in the centre of the UI element. The pivot point can be moved by clicking and dragging on the pivot point indicator in the scene view. The pivot point does not need to be inside the rectangle of the UI element. Placing the pivot point outside of the UI element's rectangle can be done for specialized behavour.

Editing in Global and Local Space

Another difference between the Transform component and the Rect Transform is the effective global and local space on editing. When editing UI elements in local space, the rectangle and handles are aligned with the UI element. In global space, the rectangles and handles are aligned globally and the rectangle indicates the bounds of the uI element. This is most notable when the UI element is rotated.

Position and Size

(04:03) When looking at the Rect Transform in the Inspector, it is clearly different from the Transform component. The Position and Size of the UI element are shown in the upper right of the inspector for the Rect Transform component.

Position

Positions X and Y show the distances in pixels from the anchor point to the pivot along the x- and y-axis respectively. The Position Z is the distance along the local z-axis and is often left at a value of 0.

Size

Size fields Width and Height indicate the dimensions of the UI element in pixels.

The Position and Size fields are dynamic and context-sensitive. They relate directly to the position of the anchors.

Anchors

(04:46) The Rect Transform component includes a powerful anchoring mechanism. Rect transforms can be anchored to their parent if the parent game object also has a Rect Transform component. In most cases, every UI element will be anchored to its parent in some way.

In the scene view, the anchors are represented by four small triangles. By default, these are grouped together as a single anchor point in the centre of the UI element's parent Rect Transform but can be ungrouped by moving them. Each triangle represents one anchor and each anchor is associated with one corner of the rect transform. The upper left anchor is associated with the upper left corner on the parent's Rect Transform. This is the same for each anchor and each corner. Anchors are positioned within the bounds of the parent's rectangle, not the UI element's rectangle. Anchors cannot be positioned outside of the bounds of the parent's rectangle.

Anchors have a fixed relationship to their UI element's Rect Transforms, which they are anchoring. Anchors have a flexible relationship to their parent's Rect Transform, which they are anchoring to.

An individual anchor can be moved by clicking and dragging on its triangle gizmo. Clicking in the centre of a group of triangles will move the triangles as a group.

When setting an anchor, the distance between the anchor and the associated corner of the element's Rect Transform is a fixed value. The anchor's position within the parent's Rect Transform however is relative to the parent's size and is affected by changes to the size in the parent's Rect Transform. The anchor's position relative to the parent is a precentage of the parent's size along the x- and y-axis and its absolute position can change when the parent's Rect Transform changes. This percentage is represented by a normalised value from 0 to 1 along each axis where (0, 0) is the lower left of the parent's Rect Transform and (1, 1) is the upper right.

Prevent Resizing

(06:56) Practically, this means if all four anchors are grouped together around a single point, the UI element will be anchored to that point. If the parent Rect Transform changes in size, the UI element will move along with the anchor. The UI element will not stretch or resize, as the distance from the anchors to their associated Rect Transform corners is fixed.

Resize Relative to the Parent

(07:19) If however, the anchors are separated in any way, the UI element will stretch along with the parent, as the anchors and the space between them are relative to the parent's Rect Transform and will change in size. How much the UI element stretches compared to its parent depends on the placement of the anchors. A few common cases are:

positioning the anchors on the corners of the UI element, in which case the UI element stretches to maintain the same percentage area of the element.

positioning the anchors at the bounds of the parent, in which case the space between the edge of the UI element and the bounds of the parent will remain the same, creating a fixed border.

positioning a pair of anchors grouped together at the edges of the parent's Rect Transform, in which case the UI element will stretch only on one axis (ex. left anchors on parent's left bound and right anchors on parent's right bound will set UI element to stretch horizontally but not vertically).

The stretching behaviour of an anchored UI element can be tested by grabbing the edge of the parent's rectangle and dragging it. The preview label appears when dragging and the parent's rectangle snaps back to its original state when the dragging ends.

To make editing easier when positioning anchors by hand, holding the Shift key will change the size of the UI element as well.

Left, Right, Top, and Bottom

(08:58) It is important to note a change in the way the Rect Transform displays the Position and Size information when the anchors are not grouped together and no longer define a single point as an anchor.

When all four anchors are grouped together, they define a single anchor point and the Rect Transform displays the positional offset from the pivot as well as the width and height of the UI element.

When the anchors are split apart, the Rect Transform displays the fixed values of the Left, Right, Top, and Bottom. These are the fixed offsets along the x- and y-axis of the anchors to their associated corners.

If any two anchors are grouped together there will be no stretching along that axis and the Rect Transform will continue to display the Position and Width/Height for that axis.

Anchor Presets

(09:52) When setting the pivot and anchors for a UI and element there are a number of common configurations. To make setting these quick and easy, the Rect Transform includes the Anchor Presets window. This can be accessed by clicking on the Anchor Presets button.

The Anchor Presets button displays the current anchoring choice of the Rect Transform. In the Anchor Presets window, the common configurations are arranged in a matrix based on the position of the anchors, with fixed anchor points in the middle and stretch options along the outer edge. The anchor position can be set by clicking on the desired configuration.

Additionally, the pivot and/or the position of the UI element can be set at the same time as the anchors by holding down the Shift and/or Alt keys when clicking on the desired configuration. These optional keys are noted at the top of the Anchor Presets window.

Pivot, Rotation, and Scale

Pivot

(10:58) Below the Anchor section in the Inspector, the Pivot fields define the pivot point of the UI element using a normalised value of 0 to 1 along the x- and y-axis, with (0, 0) in the lower left and (1, 1) in the upper right.

Rotation

(11:10) The Rotation fields define rotation of the UI element. In the most common of cases, rotation will only need to be done along the z-axis, keeping the UI element in 2D splace. Rotation is allowed on all three axes however, and the element can be viewed in 3D space.

Scale

(11:28) Before discussing Scale, it is important to understand the difference between scaling and size.

When adjusting a UI element's size in the scene view or adjusting the Width and Height in the Inspector, the UI element is being resized not scaled. Resizing changes the Rect Transform's width and/or height but does not scale the UI element; this will not affect the font-sizes, the border on sliced images, or other items related to the UI element.

When the UI element is scaled the entire element is scaled, including items like fonts and borders.

For layout purposes, it is generally recommended to resize a UI element rather than scale it. Scaling can be useful for animated affects or other special purposes.

A UI element will become invisible if given a negative size. Negative scaling however is supported and can be used for effects, including flipping the UI element with a scale of -1.

Editing Modes

(12:35) The Rect Transform component includes two optional editing modes, Blueprint mode and Raw Edit mode.

Blueprint mode allows for the editing of Rect Transforms as if they were not rotated or scaled. The UI element cannot be rotated with the Rect Tool when on Blueprint mode.

Normally when editing the Pivot or Anchor values from within the Rect Transform, the Pivot or Anchor will move and the UI element will remain in place, just like editing these items in the Scene view. When in Raw Edit mode however, the pivot or anchor will state in place and the UI element will move relative to that fixed item.

Values Driven by Another UI Component

(13:31) There are times when a Rect Transform will have some or all of its values driven by a parent Rect Transform or other UI component, such as a layout group. In these cases, some or all of the properties of the Rect Transform will be greyed out and uneditable; there will be a note at the top of the Rect Transform indicating that some values are being driven by another component.

For more information on the components driving the Rect Transform, see the Unity documentation or the associated [transcribed] lesson for that component.

Resource: Notes closely following the closed captions of UI Canvas - Unity Official Tutorials for Unity3D 4.6.

Contents

(00:00) Introduction to UI Canvas

(00:41) Render mode: Screen Space - Overlay

Pixel Perfect

(01:50) Render mode: Screen Space - Camera

Render Camera

Plane Distance

(04:01) Render Mode: World Space

Event Camera

Receives Events

Sorting Order and Order in Layer

Introduction to UI Canvas

(00:00) The canvas is a component that controls how a group of UI elements will be rendered. All UI elements must be children of a canvas. It is possible to have more than one canvas in a scene, but to use a UI element there needs to be at least one available canvas. If a new UI element is created and no canvas exists, a new canvas will be created and the new UI element will be attached to that canvas as a child.

Each canvas has a number of different possible render modes. The render mode is set by using the Render Mode popup menu.

Render mode: Screen Space - Overlay

(00:41) Screen Space - Overlay (default) is the most common render mode. With Screen Space - Overlay selected, the canvas overlays the scene and all of its UI elements are be drawn on top of everything else rendered in that scene. In this mode, the canvas fills the screen and will resize automatically if the screen settings change. In Screen Space - Overlay mode, the canvas will drive the Rect Transform component and the entire Rect Transform component is uneditable. The canvas will set all of the values in the Rect Transform to fill the screen automatically. See more on the Rect Transform here.

Pixel Perfect

This render mode has the option of Pixel Perfect. When Pixel Perfect is selected, UI elements will be adjusted to the nearest pixel when they are rendered, which can, in some cases, sharpen the look of the UI element.

Render mode: Screen Space - Camera

(01:50) Screen Space - Camera is similar to Screen Space - Overlay, however it is rendered by a specific camera in the scene. This allows camera-specific settings to be applied to a screen space UI, the most common being the use of a perspective camera to give the UI a feeling of depth. In this mode, the canvas will fill the camera's viewport and will resize automatically if the camera's viewport settings change. The canvas also drives the Rect Transform component in this mode.

Render Camera

This render mode has several options, including Pixel Perfect. The Render Camera option is for setting the camera that will render the UI elements on this canvas. If there are none, the canvas component will use Screen Space - Overlay settings for rendering. When a camera is assigned to the canvas component, the UI elements will be moved into the camera's frustum and resized to fit. This allows for the UI to be rendered relative to game objects in the scene view.

Plane Distance

To control where in the scene the UI elements will be rendered, use the Plane Distance option to move the canvas closer to or further away from the camera. The canvas and its UI elements will be automatically resized to fit the frustum based on their position in front of the camera. The Plane Distance must be within the rendering camera's near and far clipping planes to be rendered.

When using Screen Space - Camera, the canvas can be rendered by any camera in the scene. To isolate a canvas and its contents from any other cameras rendering the scene, use the camera's clear flags, culling mask, and depth properties. See more on camera properties here.

Other options available in render mode Screen Space - Camera are described under the last render mode, World Space.

Render Mode: World Space

(04:01) Render mode World Space renders UI elements in the scene volume. These UI elements could be static objects in the scene or mobile objects, like speech bubbles or player tags that follow game objects in the scene. In World Space mode, the canvas no longer drives the Rect Transform and can be set anywhere in world space. With the understanding that there can be more than one canvas in the scene, it is not uncommon to create new world space canvases as necessary for world space UI elements.

Event Camera

The Event Camera option is required to receive events and determine which camera will be used to detect events like clicking on a UI element. In most cases with World Space select, this event camera will be the camera rendering the scene.

Receives Events

The Receives Events option indicates whether the UI element on this canvas will receive events like clicks and hovers. Disable this property to ignore events on all UI elements that are children of this canvas.

Sorting Order and Order in Layer

Sorting Order and Order in Layer options are for controlling the render order of the canvas when compared to other renderers in the scene. Sorting Order and Order in Layer are exposed on the canvas component and are available for canvases set to either Screen Space - Camera or World Space. See here for more information on Sorting Layers and Order in Layer.