Hướng dẫn menu chính cho Unity

Giao diện Người dùng (UI) kết hợp đồ họa, văn bản và các nút và đóng vai trò quan trọng trong việc mang lại trải nghiệm chơi trò chơi thú vị.

Menu chính là một trong những phần nổi bật nhất của giao diện người dùng vì đây thường là thứ đầu tiên người chơi nhìn thấy khi tải trò chơi.

Trong hướng dẫn này, tôi sẽ hướng dẫn cách tạo Menu chính trong Unity bằng cách sử dụng UI Canvas.

Bước 1: Thiết kế Menu chính

• Tạo Canvas mới (GameObject -> UI -> Canvas)

• Tạo Image mới bằng cách chuột phải vào Canvas -> UI -> Image (Đây sẽ là Menu Background)

• Gán Họa tiết cho Hình ảnh mới được tạo. Bạn có thể sử dụng hình ảnh bên dưới (Nhấp chuột phải -> Lưu dưới dạng...) và đảm bảo Loại họa tiết của nó được đặt thành 'Sprite (2D and UI)' trong Cài đặt nhập:

• Tạo một tập lệnh mới, gọi nó là SC_BackgroundScaler rồi dán đoạn mã bên dưới vào trong tập lệnh đó:

SC_BackgroundScaler.cs

using UnityEngine;
using UnityEngine.UI;

[ExecuteInEditMode]
public class SC_BackgroundScaler : MonoBehaviour
{
    Image backgroundImage;
    RectTransform rt;
    float ratio;

    // Start is called before the first frame update
    void Start()
    {
        backgroundImage = GetComponent<Image>();
        rt = backgroundImage.rectTransform;
        ratio = backgroundImage.sprite.bounds.size.x / backgroundImage.sprite.bounds.size.y;
    }

    // Update is called once per frame
    void Update()
    {
        if (!rt)
            return;

        //Scale image proportionally to fit the screen dimensions, while preserving aspect ratio
        if(Screen.height * ratio >= Screen.width)
        {
            rt.sizeDelta = new Vector2(Screen.height * ratio, Screen.height);
        }
        else
        {
            rt.sizeDelta = new Vector2(Screen.width, Screen.width / ratio);
        }
    }
}

• Đính kèm tập lệnh SC_BackgroundScaler vào hình ảnh mới được tạo. (Khi đính kèm, script sẽ tự động chia tỷ lệ hình nền cho vừa với màn hình):

Tạo các nút menu:

• Nhấp chuột phải vào Canvas -> Create Empty rồi đổi tên thành "MainMenu". Đối tượng này sẽ chứa các thành phần UI cho Menu chính.
• Tạo văn bản mới bằng cách nhấp chuột phải vào đối tượng "MainMenu" -> UI -> Text. Đây sẽ là một văn bản tiêu đề.
• Thay đổi Văn bản thành tên trò chơi của bạn (Trong trường hợp của tôi là "Game Title"):

• Thay đổi căn chỉnh đoạn văn thành giữa và Màu thành màu trắng:

• Cuối cùng, thay đổi Cỡ chữ thành cỡ lớn hơn (ví dụ 30) và Kiểu phông chữ thành Đậm.

Tuy nhiên, bạn sẽ nhận thấy rằng văn bản đã biến mất, đó là do kích thước Rect Transform quá nhỏ. Thay đổi chúng thành thứ gì đó lớn hơn (ví dụ: Chiều rộng: 400 Chiều cao: 100), đồng thời tăng nó lên một chút bằng cách thay đổi Pos Y thành 50:

• Tạo 3 nút (Nhấp chuột phải vào đối tượng "MainMenu" -> UI -> Nút 3 lần) và di chuyển mỗi nút xuống 30 pixel.
• Thay đổi Văn bản của mỗi nút lần lượt thành "Play Now", "Credits" và "Quit":

• Nhân đôi đối tượng "MainMenu" và đổi tên thành "CreditsMenu", xóa tất cả các nút bên trong nó ngoại trừ nút "Quit" và thay đổi Văn bản của nó thành "Back".
• Thay đổi kích thước phông chữ của tiêu đề Văn bản trong "CreditsMenu" thành kích thước nhỏ hơn (ví dụ: 14), thay đổi Pos Y thành 0 và nhập văn bản ghi công.

Bước 2: Lập trình các nút menu

Bây giờ chúng ta cần làm cho các Nút hoạt động bằng cách tạo một tập lệnh.

• Tạo một tập lệnh mới, gọi nó là SC_MainMenu rồi dán đoạn mã bên dưới vào trong đó:

SC_MainMenu.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SC_MainMenu : MonoBehaviour
{
    public GameObject MainMenu;
    public GameObject CreditsMenu;

    // Start is called before the first frame update
    void Start()
    {
        MainMenuButton();
    }

    public void PlayNowButton()
    {
        // Play Now Button has been pressed, here you can initialize your game (For example Load a Scene called GameLevel etc.)
        UnityEngine.SceneManagement.SceneManager.LoadScene("GameLevel");
    }

    public void CreditsButton()
    {
        // Show Credits Menu
        MainMenu.SetActive(false);
        CreditsMenu.SetActive(true);
    }

    public void MainMenuButton()
    {
        // Show Main Menu
        MainMenu.SetActive(true);
        CreditsMenu.SetActive(false);
    }

    public void QuitButton()
    {
        // Quit Game
        Application.Quit();
    }
}

• Đính kèm SC_MainMenu vào đối tượng Canvas
• Gán đối tượng "MainMenu" cho biến Menu chính
• Gán đối tượng "CreditsMenu" cho biến Menu Tín dụng

Bước cuối cùng là liên kết các hàm SC_MainMenu với mỗi Nút.

• Chọn Nút và trong "On Click ()" nhấp vào (+) để thêm biến phần tử mới:

• Gán Đối tượng có tập lệnh SC_MainMenu (Canvas) cho Nút "On Click ()" và chọn chức năng tương ứng với nút ("PlayNowButton()" cho Nút Phát ngay, "CreditsButton()" cho Nút Tín dụng, "QuitButton()" cho Nút Thoát và "MainMenuButton()" vào Nút Quay lại trong Menu Tín dụng).

Menu chính hiện đã sẵn sàng.

LƯU Ý: Hàm PlayNowButton() trong SC_MainMenu.cs sẽ cố tải Cảnh có tên "GameLevel". Vì vậy, hãy đảm bảo rằng bạn có một cảnh có tên "GameLevel", tên này cũng được thêm vào Cài đặt bản dựng (hoặc bạn có thể thay đổi tên trong dòng đó để tương ứng với tên của Cảnh bạn muốn tải).

Bạn muốn tìm hiểu thêm về cách tạo giao diện người dùng? Hãy xem hướng dẫn của chúng tôi về Cách tạo Điều khiển cảm ứng trên thiết bị di động trong Unity.