Canvas và văn bản

Thuộc phần Xây dựng trò chơi thực tế trong hành trình Unity của Coddy. Bài học 1 trên 60.

Unity vẽ văn bản, nút và thanh trên màn hình bằng hệ thống giao diện người dùng. Trong Unity 6, GameObject > UI > Text - TextMeshPro thêm một đối tượng văn bản có tên Text (TMP); lần đầu tiên, Unity yêu cầu nhập TMP Essentials, thành phần cần thiết để văn bản có phông chữ. Nếu cảnh chưa có Canvas, Unity sẽ tạo một Canvas và đặt văn bản bên trong, đồng thời thêm một EventSystem để xử lý thao tác nhấp vào giao diện. Canvas vẽ các đối tượng con lên hình ảnh từ camera, tại một vị trí cố định trên màn hình, bất kể camera đang hướng về đâu. Đặt Canvas Scaler thành Scale With Screen Size, 1920 x 1080, Match 0.5 như mọi cảnh trong khóa học này, để bố cục giữ nguyên tỷ lệ trên mọi kích thước màn hình.

Thành phần của văn bản là TextMeshPro - Text (UI). Các tập lệnh lưu thành phần này trong một trường có kiểu cơ sở là TMP_Text, thuộc không gian tên TMPro, rồi thay đổi nội dung hiển thị thông qua thuộc tính text, vốn là một chuỗi. Tập lệnh này đặt tên màn chơi khi bắt đầu:

using UnityEngine;
using TMPro;

public class LevelIntro : MonoBehaviour
{
    public TMP_Text titleText;

    void Start()
    {
        titleText.text = "World 2: Ice Caves";
    }
}

Kéo đối tượng Text (TMP) từ Hierarchy vào ô Title Text trong Inspector, Unity sẽ đưa thành phần văn bản của nó vào trường. Nếu thiếu using TMPro;, tên TMP_Text sẽ không được nhận diện và tập lệnh không biên dịch được (CS0246). Nếu để trống ô này, lần đầu dùng titleText.text sẽ gây ra UnassignedReferenceException. Nội dung tập lệnh ghi vào sẽ thay thế Text Input được nhập trong Inspector, vốn là New Text đối với văn bản mới tạo.

Thử thách

Dễ

Hiển thị khu vực mà nhà thám hiểm đang ở trong ZoneText ở phía trên.

Trong Explorer.cs, thêm using TMPro; và trường public TMP_Text zoneText;. Cảnh sẽ liên kết ZoneText với tên đó.
Trong Update(), bên dưới chú thích, đặt zoneText.text thành Zone: Beach khi transform.position.x nhỏ hơn 2, và thành Zone: Jungle trong trường hợp còn lại.

Nhấn Chơi rồi đi sang phải, bước lên bãi cỏ: dòng chữ sẽ đổi thành Jungle. Sau đó nhấn Kiểm tra.

Tự làm thử

using UnityEngine;

public class Explorer : MonoBehaviour
{
    public float speed = 4f;

    void Update()
    {
        float move = Input.GetAxisRaw("Horizontal");
        transform.Translate(move * speed * Time.deltaTime, 0f, 0f);

        // Hiển thị vùng trong ZoneText: Zone: Beach khi x < 2, Zone: Jungle khi x ≥ 2
    }
}