A selection of notes from the Unity Website training videos. This is for the Default Canvas system included with Unity 4.6 and above.
1: UI CANVAS
-The UI Canvas is the root component for rendering all UI elements in Unity. All elements of the UI will be children of at least one Canvas. You can have multiple canvases in a scene, for different purposes.
-Render Mode: Canvases will be rendered in one of 3 modes. Screenspace Overlay is the most common, and is used for things like HUDs and Menus. These will be rendered on top of everything else that the camera sees in the scene. It will automatically fill the screen, and will resize automatically to fit whatever device you are set up for. Screenspace Camera is similar, but can be rendered to a particular camera. This allows you to view it in perspective mode, and use other camera settings to affect the UI. The canvas will automatically stretch to fit the viewing cone of the camera. World Space allows various canvases to be set up at specific locations in the scene. These could be floating text or images, or speech balloons above a characters head. Check the ‘Recieves events’ box to allow these canvases to be affected by things like mouse clicks and hovers
-Canvases have a Rect Transform component, This controls the size and position of the canvas. For the Overlay and Camera render modes, these are fixed as they automatically match the screen/ camera settings, but are fully adjustable in world space mode.
-UI elements are rendered based on their order in the hierarchy. Elements higher in the hierarchy render behind lower elements.
When A canvas is created, an EventSystem object is also automatically added to the scene. This controls event processes when buttons are clicked etc.
2: RECT TRANSFORM COMPONENT
-Rect transform differs from a regular transform component in that it has adjustable anchors as well as an adjustable central pivot point, and children can be anchored to parents so that their relative positions in the UI adjust when the parent is scaled or stretched. Scaling, stretching and rotating are all done about the pivot.
-The pivot can be moved outside the UI element and is marked by a blue circle. The anchors are marked by 4 small triangles. An objects anchors are bound by the size of it’s parent object’s rectangle.
-The anchors can be separated or kept together in a single point. When kept together, stretching or scaling the parent will not affect the element, but when the anchors are separated, the element will stretch out of shape along with its parent, based on the distance between anchors. This can be useful as it allows buttons to maintain a size proportional to their parent, rather than a fixed size when their parent changes.
-NB – RESIZING AN ELEMENT IS NOT THE SAME AS SCALING IT.
3: UI BUTTONS
-To add a button to a canvas system, go to Add Component> UI > Button. Buttons need to be children of canvases. If there isnt already a canvas in the scene, one will be automatially created. Buttons will automatically be given an Image Script and Button script component, which are preset with a number of effects.
-Check the Interactable box to determine if a button can be clicked or pressed.
-Transition effects can be applied to buttons during different processes, such as when the mouse is hovering above, or when it is clicked. You can tint the default button image with a different colour, replace it with a different sprite, or apply an animation.
-For animating, click the ‘Auto Generate Animation’ button to automatically add an Animator component, with the Normal, Highlighted, selected and disabled states already created. In the animation window, you need only create a single frame of animation (i.e change a width property to a larger value in the highlighted state) and the button will smoothly blend between states, based on the animation fade property. Note that properties cannot be changed in the animation window. Instead you must record, change the values in the inspector panel then stop recording.
-Multiple buttons can share the same animation behavior. Add an animator component to each button (without clicking the Auto generate button), then add the first button’s animation controller.
– In the Button Script component, there is an On Click Event list, controlled by the EventSystem object, which determines behavior when the button is interacted with. New behavior can be added by clicking the ‘+’ symbol.
4: IMAGE SCRIPT COMPONENT
– Automatically added to new buttons, this gives objects their visual appearance. Either a sprite or ca colour tint can be used, or a mixture of both.
– Image Type determines how the sprite will be used. Simple will just stretch the sprite to the size of the button. Sliced allows you to cut the sprite 3 by 3, so that the main body can be stretched, whilst edges and corners retain their size and definition. Preserve Aspect means the sprite will be stretched until it reaches one of the bounding edges of the button, but wont be distorted. Tiled will tile the sprite until it fills out the bounding box of the Button and Filled will adjust the button to only show a slice of the sprite. This can be useful for health bars or car speedometers.
5: TEXT SCRIPT COMPONENT
The text component is an optional component that can be used to label buttons with simple strings, or used dynamically to hold values for scores or Ammo etc. This component includes options for font and styling. Note that when used dynamically, the text in the inspector is just placeholder text, that will be replaced by whatever script is affecting it.
6:UI EVENTS AND EVENT TRIGGERS
– The user interacts with the UI via Events. When a Canvas is created in the scene, an Event System game object is also created. This Event System object has a few components – the Event System Script, the Standalone Input Module and the Touch Input Module. In the event system script component you can set a game object such as a button in the First selected box. This means that the button can be activated with Keyboard input, without needing a mouse pointer to roll over and click it. The standalone input module is used to set up controls for devices such as PCs or consoles using mouse, keyboard or controller input, using setting s from Unity’s input manager. The Touch input Module is used primarily for mobile devices.
– Events are handled by the Event trigger component, which comes attached to Buttons, but can be added to any game object from the Add Component > Event > Event Trigger menu.
– In this component, Select the ‘Add new’ button to create a new event based on a chosen trigger (on mouse click, on hover etc). Then click the ‘+’ symbol to add a new function that will occur when this event happens. Choose a game object that the function will affect, and then a list of all available functions based on your scripts.
7: UI SLIDER
-A slider chooses a number between two set limits, by dragging the handle of a slider control. Common uses include volume or brightness controls, but they can also be re-purposed for health or loading bars etc.
– To add a slider, go to Create > UI > Slider in the Menu. Like all UI elements, it must be the child of a Canvas object.
– A slider object is created with a number of child objects – these are the rect transform and images that make up the different slider components, such as the bar, the fill and the handle. The slider script is held in the parent object. The background bar and handle are optional, depending on the sliders use, but the fill is always necessary to indicate the numeric value held.
-Check the interactible box on or off depending on the purpose. A volume slider should be interactable, but a health bar should b for display purposes only. Like other UI elements, the slider has adjustable transition states to highlight when there is a hover, mouseclick etc. Note that these only affect the handle graphic.
– You can affect the direction the slider should move in for increasing/decreasing values, what the default value should be, and check the box to round values to the nearest whole number.
– Sliders come with their own Event List separate from the Event System object that is created alongside canvases. You can add new events here and select the game objects and functions affected. Note however that functions can only be selected if they have a float parameter.
8: TRANSITIONS
– Transistions will determine how a UI element behaves when moving between states (eg Normal, hover, click, disabled etc)
– Transistions can be colour changes, sprite changes or animations and can be set in the Transition Mode dropdown menu. Animation is the most powerful, but also the most complex. Click ‘Auto Generate Animation’ to create an animator component with the relevant states (animations) already set up. Usually, the Normal state does’t need any kind of animation.
9: SCROLL RECT
– A Scroll Rect is a large Rect Transform which holds a large image or block of text. it is usually used in conjunction with a mask and a scroll bar.
– A scroll rect isn’t an object itself, but rather a script component added to a UI object Via Add component > UI > Scroll Rect. Children of this object can be made the subject of the Scroll Rect component by adding them to the Content Selection box.
– To use a mask with a Scroll Rect, first add a UI Image script component, then add a mask component.
– You can Check/uncheck the direction of scroll available. The movement type determines the limits of how much you can scroll – Unrestricted will let you continue to scroll indefinitely, but you risk losing your image off screen. Elastic and Clamped restrict the scrolling to the edge of the Content’s Rect Transform.
-Note that if the Rect Transform of the Content object is smaller than the Rect Transform of the Scroll Rect object, you wont be able to scroll in that axis.
– Elasticity give the content a little bit of ‘bounce when it reaches the edge, which can be visually nicer than the sudden stop of the clamped movement type. Inertia can be applied and adjusted so that the content continues to glide a little when the cursor is released. This can be visually nicer than a sudden stop, and is especially useful when scrolling through long lists.
10: SCROLL BARS
-Scroll bars are very similar to Sliders, but with only a handle and background visual element.
– Scroll bars can be created as a visual reference for your Scroll Rect on the horizontal and vertical axes. Simply create the scroll bars from Gameobject > UI > Scroll Bar, position them, and insert them to the relevant slot in the Scroll Rect component. They will work automatically.
– Scroll Bars can have the same transition effects as other UI elements, and can be checked/unchecked to be Interactable. When not interactable, it will function merely as a visual aid.
11. MASKS
Masks are often used to hide parts of a UI, and are often used in conjuntion with a Scroll Rect, to only show it on certain parts of the screen. Attach a mask component to the object containing the Scroll Rect. It will default to the shape of that objects Rect Transform, but an image can be added to make it take that shape instead.
Comments