Tutorial Menu Utama untuk Unity

Antarmuka Pengguna (UI) menggabungkan grafik, teks, dan tombol serta memainkan peran penting dalam memberikan pengalaman bermain game yang menyenangkan.

Menu Utama adalah salah satu bagian UI yang paling menonjol karena biasanya merupakan hal pertama yang dilihat pemain saat memuat game.

Dalam tutorial ini, saya akan menunjukkan cara membuat Menu Utama di Unity menggunakan UI Canvas.

Langkah 1: Rancang Menu Utama

• Buat Kanvas baru (GameObject -> UI -> Canvas)

• Buat Gambar baru dengan mengklik kanan pada Canvas -> UI -> Image (Ini akan menjadi Menu Background)

• Tetapkan Tekstur ke Gambar yang baru dibuat. Anda dapat menggunakan gambar di bawah ini (Klik kanan -> Simpan sebagai...), dan pastikan Jenis Teksturnya diatur ke 'Sprite (2D and UI)' di Pengaturan Impor:

• Buat skrip baru, beri nama SC_BackgroundScaler lalu tempelkan kode di bawah ini ke dalamnya:

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);
        }
    }
}

• Lampirkan skrip SC_BackgroundScaler ke gambar yang baru dibuat. (Setelah melampirkan, skrip akan secara otomatis menskalakan gambar latar belakang agar sesuai dengan layar):

Buat Tombol Menu:

• Klik kanan pada Kanvas -> Buat Kosong lalu ubah namanya menjadi "MainMenu". Objek ini akan berisi elemen UI untuk Menu Utama.
• Buat Teks baru dengan Klik Kanan pada objek "MainMenu" -> UI -> Teks. Ini akan menjadi teks judul.
• Ubah Teks ke nama game Anda (Dalam kasus saya, itu akan menjadi "Game Title"):

• Ubah perataan paragraf menjadi tengah tengah dan Warna menjadi putih:

• Terakhir, ubah Ukuran Font menjadi lebih besar (misalnya 30) dan Gaya Font menjadi Tebal.

Namun, Anda akan melihat teksnya hilang, itu karena dimensi Rect Transform terlalu kecil. Ubah menjadi lebih besar (misal Lebar: 400 Tinggi: 100), naikkan juga sedikit dengan mengubah Pos Y menjadi 50:

• Buat 3 tombol (Klik Kanan pada objek "MainMenu" -> UI -> Tombol 3 kali) dan gerakkan setiap tombol ke bawah sebesar 30 piksel.
• Ubah Teks masing-masing tombol menjadi "Play Now", "Credits" dan "Quit":

• Duplikat objek "MainMenu" dan ubah namanya menjadi "CreditsMenu", hapus semua tombol di dalamnya kecuali tombol "Quit", dan ubah Teksnya menjadi "Back".
• Ubah ukuran font Teks judul di "CreditsMenu" menjadi lebih kecil (misal 14), ubah Pos Y menjadi 0, dan ketikkan teks kredit.

Langkah 2: Program Tombol Menu

Sekarang kita perlu membuat Tombol berfungsi dengan membuat skrip.

• Buat script baru, beri nama SC_MainMenu lalu pastekan kode di bawah ini ke dalamnya:

SC_Menu Utama.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();
    }
}

• Lampirkan SC_MainMenu ke objek Canvas
• Tetapkan Objek "MainMenu" ke variabel Menu Utama
• Tetapkan Objek "CreditsMenu" ke variabel Menu Kredit

Langkah terakhir adalah mengikat fungsi SC_MainMenu ke setiap Tombol.

• Pilih Tombol dan di "On Click ()" klik (+) untuk menambahkan variabel elemen baru:

• Tetapkan Objek dengan skrip SC_MainMenu (Kanvas) ke Tombol "On Click ()" dan pilih fungsi yang sesuai dengan tombol tersebut ("PlayNowButton()" untuk Tombol Putar Sekarang, "CreditsButton()" untuk Tombol Kredit, "QuitButton()" untuk Tombol Keluar dan "MainMenuButton()" untuk Tombol Kembali di Menu Kredit).

Menu Utama sekarang sudah siap.

CATATAN: Fungsi PlayNowButton() di SC_MainMenu.cs akan mencoba memuat Adegan yang disebut "GameLevel". Jadi pastikan Anda memiliki adegan dengan nama "GameLevel", yang juga ditambahkan ke pengaturan Build (sebagai alternatif, Anda dapat mengubah nama di baris tersebut agar sesuai dengan nama Adegan yang ingin Anda muat).

Tertarik untuk mempelajari lebih lanjut tentang pembuatan UI? Lihat tutorial kami di Cara Membuat Kontrol Sentuh Seluler di Unity.