UI in Unity: Canvas, Panel, Image, Text, and Button

ASCENO / UNITY STUDY NOTES · 47

UI in Unity: Canvas, Panel, Image, Text, and Button

UI trong Unity: Canvas, Panel, Image, Text và Button

The lesson starts with a direct Unity screenshot so the practical action is visible. The nine following figures are language-neutral illustrations; the bilingual text below them carries the explanation. The main topic is unity ui. Figure 1 is practical evidence; figures 2–10 use only shapes, symbols, and visual relationships so they can remain unchanged across languages.

Learning goals

• Explain the concept with a model or data flow.
• Know exactly which Unity window to open.
• Predict the result before pressing Play and find evidence.
• Rebuild a small experiment and debug it methodically.

1. Hands-on practice in Unity

Open the test Scene, select the relevant object, and perform the action described in the lesson. This is a native Unity screenshot that shows where to begin; the steps and meaning are explained in the text below.

2. System illustration

Unity UI starts with a Canvas containing interface elements such as Panel, Image, Text, and Button. A usable UI needs both a sound hierarchy and clear interaction feedback. The illustration below contains no language-specific text; read it together with this explanation and the concrete steps.

• unity ui | the lesson concept | read the focus and hands-on example | do not infer it from object colours
• Input/setting | the input data or configuration | record the value before changing it | do not change several things at once
• Result/evidence | what must be observed in the Scene, Game, Inspector, or Console | capture the correct panel | a polished image is not evidence

3. Cause → result illustration

Read the arrow direction, relative position, and symbol changes as a causal relationship. The explanation below names each step in text rather than relying on words inside the image.

1. Define the question
2. Build a small test Scene
3. Change one value or reference
4. Press Play / run the action
5. Read the correct panel
6. Compare with the prediction

4. Sequence illustration

Open Unity, select the Canvas or UI child, read RectTransform/Canvas Scaler in the Inspector, then switch to the Game view to check layout.

5. Object structure illustration

Read the object name in the Hierarchy first. If the name does not communicate its role, rename it in the test Scene; a screenshot is useful only when the reader knows what is selected.

6. Configuration illustration

Select the object representing unity ui in the Hierarchy. Read Transform first, then find the relevant Component/field. Record the current value before changing it; Create a Canvas and check Canvas Scaler before tuning individual elements

7. Result observation illustration

The Console is not decoration: use it to verify Give Buttons a comfortable hit area and provide hover/pressed states. If no log appears, check the active object, script compilation, and Console filters before adding more code.

8. Code → state illustration

Do not copy code away from the Scene. Before each line, identify the input object/reference; after each line, identify the state or output that should change.

using UnityEngine;
using TMPro;

public class MenuView : MonoBehaviour
{
    [SerializeField] private GameObject menuPanel;
    [SerializeField] private TMP_Text statusText;

    public void ShowMessage(string message)
    {
        statusText.text = message;
    }

    public void SetVisible(bool visible)
    {
        menuPanel.SetActive(visible);
    }
}

9. Experiment illustration

The exercise builds a small menu with a background panel, title, start button, and message area. It introduces parenting, RectTransform, and Button events through one practical screen.

1. Create a Canvas and check Canvas Scaler before tuning individual elements.
2. Use Panel for layout groups, Image for visuals, and TextMeshPro for new text.
3. Give Buttons a comfortable hit area and provide hover/pressed states.
4. Run again after reverting to check that the result is reproducible.
5. Record the input value, action, result, and reason for the change.

10. Failure → fix illustration

• Selecting the wrong object or asset means a correct edit appears to do nothing.
• Changing several fields at once hides the cause.
• Looking only at the Scene while ignoring the Inspector/Console.
• Skipping verification specific to unity ui.

The ASCENO perspective: A good figure must help the reader answer one concrete question. If it does not show what to select, where to look, what to change, or where the result appears, it is not ready for documentation.