title | marp | paginate |
---|---|---|
Unity Cookbook. User interface |
true |
true |
- A package for creating User Interface (UI) components
- contained in new Unity projects by default
- For elements that stay in constantly on screen
- HP bars, menu buttons...
- Packages: Unity UI
- UI elements are drawn on a separate canvas and on a separate layer
- Canvas represents the rectangular area in which the UI is drawn
- More about it later!
- Create a new Canvas GameObject with GameObject > UI > Canvas
- Packages: Unity UI: Canvas
- The Canvas GameObject has these components by default
- Rect Transform
- Canvas
- CanvasScaler
- Graphic Raycaster
- Packages: Unity UI: Rect Transform
- UI counterpart for the Transform component
- Has width and height as well
- (RectTransform inherits from Transform!)
- Has also anchor points for aligning with the canvas, or a parent UI GameObject
- Packages: Unity UI: Canvas class
- Render mode: Screen space vs World space
- Screen space
- UI elements are rendered to fixed place on the screen, on top of the scene
- World space
- UI elements are hanging out with other GameObjects
- "Diegetic interface"
- Screen space
- Order in Layer: Change this to arrange which UI elements are drawn on top
- Note: You can add a new canvas component to an UI component inside a canvas and change its sorting order!
-
Important setting: UI Scale mode
- Constant pixel size
- UI elements take the same amount of pixels regardless of screen size
- Constant physical size:
- UI elements take the same amount of pixels/DPI regardless of screen size
- Scale with screen size:
- UI elements take a given portion of the screen size
- This is the one we usually want
- You can choose if you rather match the screen width or screen height with Screen Match Mode
- Constant pixel size
- The Graphic Raycaster is used to raycast against a Canvas.
- The Raycaster looks at all Graphics on the canvas and determines if mouse is top on any of them
- Graphic Raycaster
- Can be used to determine if the cursor is over a Graphics element in the Scene:
- These are used for actually drawing things in the UI
- Packages: Unity UI: Visual Components
- Text
- Image (& Raw Image)
- NOTE: For drawing images on UI, you need to use the Image component, NOT the Sprite Renderer!
- Mask (& RectMask2D)
- Add e.g., image to scene with GameObject > UI > Image
- All UI element GameObjects have to be under the Canvas GameObject!
- Packages: TextMeshPro user guide
- There are two ways to draw text to UIs in Unity
- The legacy Text GameObject that is easier to use
- The newer, more feature-packed Text - TextMeshPro
- TextMeshPro is a separate package that comes with new Unity Projects by default
- To start using it, install TextMeshPro Essentials
- A prompt will appear when you add a TextMeshPro GameObject
- If you missed it, install it manually with Window > TextMeshPro > Import TextMeshPro Essential Resources
- You need to create a new font asset before you can use your own font with TextMeshPro
- Add your font file (.ttf, for example) to your Assets folder
- Open Window > TextMeshPro > Font Asset Creator
- Drag the font file to Source Font File
- Click Generate Font Atlas
- Click Save to save the generated Font assets
- Now you can set the new font asset to a TextMeshPro component!
- You can update the text field of a TextMeshPro component with code:
[SerializeField] TextMeshProUGUI textComponent;
...
public void setScore(int newScore)
{
textComponent.text = $"Score: {newScore}";
}
- Note: To use the
TextMeshProUGUI
component, you need to addusing TMPro;
on top of the script file.
- We usually want to create a UI manager that handles updating the UI
- For instance with a name
UIManager
- For instance with a name
- We can make it a singleton with a name
instance
to access it easily from wherever we want to use it in the game- That way, we can call
UIManager.instance.UpdateScore()
from wherever we need - An example code below
- See also Scene management: Creating a data manager
- That way, we can call
using TMPro;
public class UIManager : MonoBehaviour
{
public static UIManager instance;
[SerializeField] TextMeshProUGUI scoreText;
public int score = 0;
void Start()
{
if (instance != null) Destroy(gameObject);
else instance = this;
}
public void UpdateScore(int scoreChange)
{
score += scoreChange;
scoreText.text = score.ToString();
}
}
-
Button
-
Toggle
-
Slider
-
Scrollbar
-
Dropdown
-
Input Field
-
...
- Functional UI GameObjects can be connected to your other GameObjects
- For example, for the Button GameObject:
- Inspector > Button Component > On Click()
- Press "+"
- Drag your GameObject to None
- Choose function from list to call when button is clicked
- Use this script to invoke UI button press with a controller even though the UI button wasn't really pressed:
[SerializeField] Button _button;
...
if (Input.ButtonDown("Fire1"))
_button.onClick.Invoke();
- By default, your buttons are only interactable with mouse
- To add support controller & keyboard input, you need to do two things:
- In every button, set Navigation to Automatic
- You can visualize button navigation flow with Visualize
- If Automatic doesn't give desired results, try other options.
- Then, drag the button you want to be highlighted first to your Event System GameObject's First Selected property
- In every button, set Navigation to Automatic
- Extra stuff:
using EventSystem ... EventSystem.current.SetSelectedGameObject(myButton);
RectTransform.position
is the world space positionRectTransform.localPosition
is the position relative to its parentRectTransform.anchoredPosition
is the screen space position of the pivot of relative to the anchor reference point
- Packages: Unity UI: Basic Layout
- RectTransform Uses Anchors: four small triangular handles in the Scene View
- Anchors can be set from the Scene view, with the Anchor presets, or from the Inspector
- See the link above and mess around with anchors while doing so!
- RectTransform: Set pivot to left
- Control the HP bar width from code:
hpBarRT = GetComponent<RectTransform>(); ... public void AddHP(float newHP) { hp += newHP; hp = Mathf.Clamp(hp, 0, 100); hpBarRT.sizeDelta = new Vector2(width * hp / 100, hpBarRT.rect.height); }
- Use 9-Slicing for HP bar art
- Brackeys video: How to make a Dialogue System in Unity
- Semag Games video series: Dialogue Tutorial
- BMo video: 5 Minute dialogue system (code examples below)
- Note: This example does not do word wrapping properly: the last word of the line can jump to the next line when it's being drawn on screen letter by letter!
[SerializeField] TextMeshProUGUI textComponent; [SerializeField] string[] lines = [], [SerializeField] float textSpeed int index; IEnumerator coTypeLine; void Start() { coTypeLine = TypeLine(); textComponent.text = ""; StartDialogue(); }
void StartDialogue()
{
index = 0;
StartCoroutine(coTypeLine);
}
IEnumerator TypeLine()
{
foreach (char c in lines[index].ToCharArray())
{
textComponent.text += c;
yield return new WaitForSeconds(textSpeed);
}
}
void Update()
{
if (Input.GetButtonDown("Fire1") && (textComponent.text == lines[index]))
{
NextLine();
}
if (Input.GetButtonDown("Fire2") && (textComponent.text != lines[index]))
{
StopCoroutine(coTypeLine);
textComponent.text = lines[index];
}
}
void NextLine()
{
if (index < lines.length - 1)
{
index++;
textComponent.text = "";
StartCoroutine(coTypeLine);
}
}
- Turn off the Canvas Gizmo in Play mode, under the Gizmos dropdown menu.
- You have to change the Anchor presets
- Inspector > Rect Transform and click on the square on the left
- Pressing down Shift+Alt exposes additional options
- When clicking on buttons doesn't work, you might have invisible UI elements on top of the button that block clicking on the buttons underneath.
Continue the Exercise 3 from Collision. Create a counter for the collected items that sits on the top left corner of the screen.
See how UI scaling changes when you change the CanvasScaler component settings!
Create a UI with three buttons.
Change the color of a GameObject in your scene when the button has been pressed!
Try out setting RectTransform anchor points and see how the UI changes when you change the game resolution in the Game view.
- Unity UI manual: Designing UI for multiple resolutions
- Unity UI manual: Creating UI elements from scripting
- Code-driven system to create UI elements quickly
- Manual: GUI scripting guide
- ScriptReference: GUI
- Example: Button
if (GUI.Button(new Rect(100, 30, 150, 30), "Do a thing!")) { // When button is pressed, do a thing here }
- Example: Input Field
value = GUI.TextField(new Rect(300, 30, 200, 20), value, 25);
- This is the kind of elements you can create with IMGUI.
- UI Toolkit
- Collection of features, resources, and tools for UI
- Create UIs with style sheets
- Collection of features, resources, and tools for UI