Huvudledning för huvudmeny för Unity

Användargränssnitt (UI) kombinerar grafik, text och knappar och spelar en avgörande roll för att ge en njutbar spelupplevelse.

Huvudmenyn är en av de mest framträdande delarna av användargränssnittet eftersom det vanligtvis är det första som spelarna ser när de laddar spelet.

I den här handledningen kommer jag att visa hur man skapar en huvudmeny i Unity med UI Canvas.

Steg 1: Designa huvudmenyn

• Skapa en ny Canvas (GameObject -> UI -> Canvas)

• Skapa en ny bild genom att högerklicka på Canvas -> UI -> Image (Detta kommer att vara menybakgrund)

• Tilldela texturen till en nyskapad bild. Du kan använda bilden nedan (högerklicka -> Spara som...) och se till att dess texturtyp är inställd på 'Sprite (2D and UI)' i importinställningar:

• Skapa ett nytt skript, kalla det SC_BackgroundScaler och klistra in koden nedan i det:

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

• Bifoga SC_BackgroundScaler-skriptet till en nyskapad bild. (När det bifogas kommer skriptet automatiskt att skala bakgrundsbilden så att den passar skärmen):

Skapa menyknappar:

• Högerklicka på Canvas -> Skapa tom och byt sedan namn på den till "MainMenu". Detta objekt kommer att innehålla UI-elementen för huvudmenyn.
• Skapa ny text genom att högerklicka på objektet "MainMenu" -> UI -> Text. Detta blir en titeltext.
• Ändra texten till ditt spelnamn (i mitt fall blir det "Game Title"):

• Ändra styckejustering till mitten och färg till vit:

• Ändra slutligen teckenstorleken till något större (till exempel 30) och typsnittsstilen till fetstil.

Du kommer dock att märka att texten försvann, det beror på att måtten för Rect Transform är för små. Ändra dem till något större (t.ex. Bredd: 400 Höjd: 100), flytta den också upp något genom att ändra Pos Y till 50:

• Skapa 3 knappar (högerklicka på objektet "MainMenu" -> UI -> Knapp 3 gånger) och flytta ner varje knapp med 30 pixlar.
• Ändra texten för varje knapp till "Play Now", "Credits" respektive "Quit":

• Duplicera objektet "MainMenu" och byt namn på det till "CreditsMenu", ta bort alla knappar inuti det utom knappen "Quit" och ändra dess text till "Back".
• Ändra teckenstorleken på titeln Text i "CreditsMenu" till något mindre (ex. 14), ändra dess Pos Y till 0, och skriv kredittexten.

Steg 2: Programmera menyknapparna

Nu måste vi göra knapparna funktionella genom att skapa ett skript.

• Skapa ett nytt skript, kalla det SC_MainMenu och klistra sedan in koden nedan i det:

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

• Bifoga SC_MainMenu till Canvas-objektet
• Tilldela "MainMenu"-objektet till huvudmenyvariabeln
• Tilldela objektet "CreditsMenu" till variabeln Credits Menu

Det sista steget är att binda SC_MainMenu-funktioner till varje knapp.

• Välj knappen och i "On Click ()" klicka (+) för att lägga till en ny elementvariabel:

• Tilldela objektet med SC_MainMenu-skriptet (Canvas) till knappen "On Click ()" och välj funktionen som motsvarar knappen ("PlayNowButton()" för Play Now Button, "CreditsButton()" för Credits-knappen, "QuitButton()" för Avsluta-knappen och "MainMenuButton()" för att återgå-knappen i Credits-menyn).

Huvudmenyn är nu klar.

OBS: PlayNowButton()-funktionen i SC_MainMenu.cs kommer att försöka ladda en scen som heter "GameLevel". Så se till att du har en scen med namnet "GameLevel", som också läggs till i Build-inställningarna (alternativt kan du ändra namnet på den raden så att det motsvarar namnet på scenen du vill ladda).

Intresserad av att lära dig mer om att skapa UI? Se vår handledning om Hur man gör mobila pekkontroller i Unity.