UI Elements in Unity

(by Faustine)

The Unity User Interface (UI) system offers a variety of built-in elements and components that may be helpful while you are creating your games! Here is a list of some major UI elements in Unity. 

Play around with them and check out their different features and components!

Buttons

• As the name suggests, buttons allow you to create interactive buttons in the game! You can use them to create menu buttons or to represent any action done via a single click/tap.
• Notes: 
  • Connect to functions from “On Click ()” under the Button Component in the inspector (inspector > button component > OnClick()).
  • Transition Types (color tint, sprite swap, animation) determine how the button looks when clicked on or disabled.
  • Automatic navigation may cause your button to stay “clicked.” Turn it off to remove that effect (This may affect button interactions with controllers 🎮).

Text (TextMesh Pro)

• Text (TextMesh Pro) allows you to create text for things like titles, labels, and descriptions in your game!
• Notes:
  • Why we recommend TextMesh Pro (TM Pro): unlike normal text, TextMesh Pro stays crisp at any size and includes many additional options for customization.
  • You can import your own fonts through TextMesh Pro font asset creation.
  • You can explore the different formatting options, including the “auto size” function (note that auto size may incur performance costs)!
  • To edit TextMesh Pro text in code:
    • using TMPro;
      
    • TextMeshProUGUI example;
    • example.text = "whatever you want here";

Images

• Images can take in sprites (source images) to display them! You can use them to make menu backgrounds, displays, profiles, and more.
• Notes:
  • What are panels?
    • You may notice something called “panels” when you create UI elements in the scene: they are just images! The image components on panels are preset to some specific values, and may be convenient for creating menus and displays.

Sliders

• Sliders are used to represent values that are within a certain range (for example, from 0-1), such as volume, text speed, and text size. 
• Notes:
  • The sliding direction can be adjusted in the slider component: it can be left to right, right to left, bottom to top, and top to bottom.
  • The "min” and ”max" values are what the slider knob represents at each end of the slider area (0-1 normally).
  • Check the "whole numbers" box to slide up in whole-number increments.
  • "Value" returns the value the slider knob represents.

Toggles

• Toggles can be used to represent values that can be switched on or off, such as full screen or windowed options, mute or unmute, stonks or no stonks.
• Notes: 
  • "Is On" adjusts whether the toggle is switched on/off.
  • The visuals of the toggle are children of the Toggle game object, you can customize them as needed.
  • If you have mutually exclusive options (such as a multiple choice question with a single answer), toggle groups may come in handy.
  • Toggle labels do not have a built-in TextMesh Pro option, you can add one as needed.

Input Field

• Do you want players to be able to name their in-game pets? Input fields are the way to go. Players will be able to click on the box and type in information.
• Here’s some information on how to access text from a TextMesh Pro Input Field.

Dropdown Menu

• Dropdown menus allow players to select from a list of predefined values. For example, the player can select from a list of supported languages for the game.
• Here’s how to create a dropdown menu and access the value.

Scroll View

• Can’t fit everything on screen at once? Use a scroll view! It is conveniently built-in, and is made up of a few components, including scroll bars, a scroll rect, a mask and an image.
  • You can use scroll rect/scroll bar by themselves
• Notes:
  • The mask component in the scroll view hides game objects that are outside of the view port (the box on screen)
    • masks can be used in other contexts as well (such as in health bars)
  • You can toggle whether it supports vertical or horizontal scrolling
  • Consider using layout components in the Content child object (Scroll View > Viewport > Content) to organize the content in the scroll view: 
    • Content size fitter: if you need objects to scale according to the number of objects present
    • Vertical/horizontal layout group for things to distribute evenly and stay aligned

Additional Materials

Key Points in UI:

• Anchoring + Pivot: determines how UI will scale and move when the screen or its parent resizes and moves
• Canvas settings are important
  • Rule of thumb: Set your canvas to “scale with screen size,” reference resolution to a desired aspect ratio (such as 1920 x 1080), so that your UI scales according to your screen

On Optimization/Workflow

• Turn off "raycast target" if it doesn’t need to be clickable
• Can toggle canvas component to enable or disable canvas objects (vs. setting active or inactive for the entire game object)
• Scale uniformly by clicking and dragging scale tool center
• Hold shift/alt to set pivot or scale while setting anchor presets

Helpful Links

Check out our ACM Studio UI Tutorial

• UI Best practices
• Optimizing unity UI
• Scrollview grid tutorial
• Enabling UI with the new input system
• Unity UI course

The Unity documentation for each UI component is linked in the images!