Hoofdmenu-tutorial voor Unity

Gebruikersinterface (UI) combineert afbeeldingen, tekst en knoppen en speelt een cruciale rol bij het bieden van een plezierige game-ervaring.

Het hoofdmenu is een van de meest prominente delen van de gebruikersinterface, omdat dit meestal het eerste is dat spelers zien als ze het spel laden.

In deze tutorial laat ik zien hoe je een hoofdmenu maakt in Unity met behulp van UI Canvas.

Stap 1: Ontwerp het hoofdmenu

• Maak een nieuw canvas (GameObject -> UI -> Canvas)

• Maak een nieuwe afbeelding door met de rechtermuisknop te klikken op Canvas -> UI -> Afbeelding (dit wordt menu-achtergrond)

• Wijs de textuur toe aan een nieuw gemaakte afbeelding. U kunt de onderstaande afbeelding gebruiken (klik met de rechtermuisknop -> Opslaan als...) en zorg ervoor dat het textuurtype is ingesteld op 'Sprite (2D and UI)' in Importinstellingen:

• Maak een nieuw script, noem het SC_BackgroundScaler en plak de onderstaande code erin:

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

• Voeg het SC_BackgroundScaler-script toe aan een nieuw gemaakte afbeelding. (Na het koppelen zal het script de achtergrondafbeelding automatisch schalen zodat deze op het scherm past):

Menuknoppen maken:

• Klik met de rechtermuisknop op Canvas -> Leeg maken en hernoem het naar "MainMenu". Dit object bevat de UI-elementen voor het hoofdmenu.
• Maak een nieuwe tekst door met de rechtermuisknop op het object "MainMenu" -> UI -> Tekst te klikken. Dit wordt een titeltekst.
• Verander de tekst in je spelnaam (in mijn geval is dit "Game Title"):

• Wijzig de uitlijning van de alinea in het midden en de kleur in wit:

• Wijzig ten slotte de lettergrootte in iets groters (bijvoorbeeld 30) en de letterstijl in vet.

U zult echter merken dat de tekst is verdwenen, omdat de afmetingen van de Rect Transform te klein zijn. Verander ze in iets groters (bijv. Breedte: 400 Hoogte: 100), verplaats het ook iets omhoog door Pos Y te veranderen naar 50:

• Maak 3 knoppen (klik met de rechtermuisknop op het object "MainMenu" -> UI -> Knop 3 keer) en verplaats elke knop 30 pixels naar beneden.
• Wijzig de tekst van elke knop in respectievelijk "Play Now", "Credits" en "Quit":

• Dupliceer het object "MainMenu" en hernoem het naar "CreditsMenu", verwijder alle knoppen erin behalve de knop "Quit" en verander de tekst in "Back".
• Verander de lettergrootte van de titel Tekst in "CreditsMenu" naar iets kleiner (bijv. 14), verander de Pos Y naar 0, en typ de aftitelingstekst.

Stap 2: Programmeer de menuknoppen

Nu moeten we de knoppen functioneel maken door een script te maken.

• Maak een nieuw script, noem het SC_MainMenu en plak de onderstaande code erin:

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

• Koppel SC_MainMenu aan het Canvas-object
• Wijs het object "MainMenu" toe aan de variabele in het hoofdmenu
• Wijs het object "CreditsMenu" toe aan de Credits Menu-variabele

De laatste stap is het binden van SC_MainMenu-functies aan elke knop.

• Selecteer de knop en klik in "On Click ()" op (+) om een ​​nieuwe elementvariabele toe te voegen:

• Wijs het object met SC_MainMenu-script (Canvas) toe aan de knop "On Click ()" en selecteer de functie die overeenkomt met de knop ("PlayNowButton()" voor de knop Nu afspelen, "CreditsButton()" voor de knop Credits, "QuitButton()" voor de knop Afsluiten en "MainMenuButton()" voor de knop Terug in het Credits-menu).

Het hoofdmenu is nu gereed.

OPMERKING: de functie PlayNowButton() in SC_MainMenu.cs zal proberen een scène te laden met de naam "GameLevel". Zorg er dus voor dat je een scène hebt met de naam "GameLevel", die ook wordt toegevoegd aan de Build-instellingen (je kunt ook de naam in die regel wijzigen zodat deze overeenkomt met de naam van de scène die je wilt laden).

Wilt u meer weten over het maken van een gebruikersinterface? Bekijk onze tutorial over Hoe je mobiele aanraakbediening maakt in Unity.