Summary - UI Canvas
- Game Development course
- Intermediate
- Lesson 36/83
- 4 min
Reinforce UI Canvas usage with a summary task.
Summary: UI Canvas System
In this module, you mastered Unity's user interface architecture. Atop the Canvas root container, TextMeshProUGUI renders crisp typography, Image displays sprites, and Button handles clickable interactions.
// UI Canvas workflow summary:
// Canvas (Root) -> RectTransform (Anchor / Pivot) -> Image / TMP / Button -> LayoutGroupRectTransform and Anchors deliver flawless responsive scaling across resolutions, while Layout Groups streamline dynamic element arrangements.
Practice Print complete UI profile
Define root ("Canvas"), element ("Button"), and layout ("Horizontal"). Print Root: Canvas | Element: Button | Layout: Horizontal to the console.
Starter code
using System;
class Program
{
static void Main()
{
// root, element ve layout değerlerini tanımlayıp yazdır
}
}Sample solution
using System;
class Program
{
static void Main()
{
string root = "Canvas";
string element = "Button";
string layout = "Horizontal";
Console.WriteLine("Root: " + root + " | Element: " + element + " | Layout: " + layout);
}
}Expected output
Root: Canvas | Element: Button | Layout: Horizontal
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which two features are configured together to ensure UI scales properly across resolutions and buttons remain pinned to the correct corner?
- Canvas Scaler and RectTransform Anchor settings Correct answer
- Rigidbody mass and MeshCollider
- AudioListener and Spatial Blend
- Particle System and Sorting Layer
Explanation: Canvas Scaler handles overall UI scale relative to screen resolution, while RectTransform Anchors pin elements to corners.
2 Attach TextMeshPro component
TextMeshProUGUI label = gameObject.AddComponent<____>();TextMeshProUGUI label = gameObject.AddComponent<TextMeshProUGUI>();Explanation: The TextMeshProUGUI component is attached to create modern, crisp typography on a Canvas.
3 UI Canvas general summary
| Term | Meaning |
|---|---|
Canvas |
Root for all UI rendering |
RectTransform |
Manages UI position, size, anchors |
TextMeshProUGUI |
Sharp text with SDF |
Button |
Button listens via onClick |