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

ASCENO / UNITY STUDY NOTES · 47

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

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

Bài học bắt đầu bằng một ảnh chụp trực tiếp từ Unity để người đọc biết thao tác thực hành. Chín hình sau là minh họa không chữ; phần giải thích song ngữ bên dưới mới là nội dung cần đọc. Chủ đề chính là unity ui. Ảnh số 1 là bằng chứng thực hành; ảnh số 2–10 chỉ dùng hình khối, biểu tượng và quan hệ trực quan để có thể giữ nguyên khi chuyển sang ngôn ngữ khác.

Mục tiêu học tập

• Giải thích được khái niệm bằng mô hình hoặc luồng dữ liệu.
• Biết chính xác màn hình Unity nào cần mở.
• Dự đoán kết quả trước khi bấm Play và tìm được bằng chứng.
• Tự dựng lại thí nghiệm nhỏ và xử lý lỗi có phương pháp.

1. Thực hành trực tiếp trong Unity

Mở đúng Scene test, chọn object liên quan và thực hiện thao tác được mô tả trong bài. Hình này là ảnh Unity native để người đọc nhận ra nơi bắt đầu; các bước và ý nghĩa nằm trong phần chữ ngay bên dưới.

2. Minh họa hệ thống

UI Unity bắt đầu từ Canvas, nơi chứa các phần tử giao diện như Panel, Image, Text và Button. Một UI dễ dùng cần vừa đúng cấu trúc vừa phản hồi rõ ràng khi người chơi tương tác. Hình minh họa bên dưới không chứa câu chữ để không bị khóa vào một ngôn ngữ; hãy đọc phần giải thích này cùng các bước cụ thể.

• unity ui | khái niệm đang học | đọc phần focus và ví dụ thực hành | không suy luận chỉ từ màu sắc của object
• Input/setting | dữ liệu hoặc cấu hình đầu vào | ghi giá trị trước khi đổi | không đổi nhiều thứ cùng lúc
• Result/evidence | thứ phải quan sát trong Scene, Game, Inspector hoặc Console | chụp đúng panel | không coi ảnh đẹp là bằng chứng

3. Minh họa nguyên nhân → kết quả

Hãy đọc hướng mũi tên, vị trí tương đối và thay đổi của biểu tượng như một quan hệ nhân quả. Không cần dựa vào chữ nằm trong ảnh; phần dưới đây giải thích từng bước bằng văn bản.

1. Chọn câu hỏi cần trả lời
2. Tạo Scene test nhỏ
3. Đổi một giá trị hoặc reference
4. Bấm Play / chạy thao tác
5. Đọc đúng panel
6. So sánh với dự đoán

4. Minh họa trình tự hoạt động

Mở Unity, chọn Canvas hoặc UI child, đọc RectTransform/Canvas Scaler trong Inspector rồi chuyển sang Game view để kiểm tra bố cục.

5. Minh họa cấu trúc object

Đọc tên object trong Hierarchy trước. Nếu tên không nói lên vai trò, hãy đổi tên trong Scene test; screenshot chỉ có giá trị khi người đọc biết mình đang nhìn object nào.

6. Minh họa cấu hình

Chọn object đại diện cho unity ui trong Hierarchy. Đọc Transform trước, sau đó tìm Component/field liên quan. Ghi lại giá trị hiện tại rồi mới thay đổi; Tạo Canvas và kiểm tra Canvas Scaler trước khi căn chỉnh từng phần tử

7. Minh họa quan sát kết quả

Console không phải ảnh trang trí: dùng nó để xác nhận Đặt Button trong vùng có kích thước đủ lớn và thêm trạng thái hover/pressed. Nếu bài không sinh log, kiểm tra object active, script compile và Console filter trước khi sửa thêm code.

8. Minh họa code → state

Đừng chép code rời khỏi Scene. Trước mỗi dòng, chỉ ra object/reference đầu vào; sau mỗi dòng, chỉ ra state hoặc output nào phải thay đổi.

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. Minh họa thí nghiệm

Bài dựng một màn hình menu nhỏ, đặt background panel, tiêu đề, nút bắt đầu và vùng thông báo. Từ ví dụ đó bạn sẽ hiểu parent, RectTransform và event của Button.

1. Tạo Canvas và kiểm tra Canvas Scaler trước khi căn chỉnh từng phần tử.
2. Dùng Panel làm nhóm bố cục, Image cho hình và TextMeshPro cho chữ mới.
3. Đặt Button trong vùng có kích thước đủ lớn và thêm trạng thái hover/pressed.
4. Chạy lại sau khi hoàn nguyên để kiểm tra kết quả có lặp lại không.
5. Ghi lại giá trị đầu vào, thao tác, kết quả và lý do thay đổi.

10. Minh họa lỗi → cách sửa

• Chọn nhầm object hoặc asset nên sửa đúng chỗ nhưng kết quả không đổi.
• Đổi nhiều field cùng lúc nên không truy được nguyên nhân.
• Chỉ nhìn Scene mà bỏ qua Inspector/Console.
• Không kiểm chứng riêng phần unity ui.

Góc nhìn ASCENO: Một hình ảnh tốt phải giúp người đọc trả lời được một câu hỏi cụ thể. Nếu ảnh không cho biết chọn gì, nhìn ở đâu, đổi gì hoặc kết quả nằm ở đâu, ảnh đó chưa đủ điều kiện đưa vào tài liệu.