Tutoriel du menu principal pour Unity

L'interface utilisateur (UI) combine des graphiques, du texte et des boutons et joue un rôle crucial pour offrir une expérience de jeu agréable.

Le menu principal est l'une des parties les plus importantes de l'interface utilisateur, car c'est généralement la première chose que les joueurs voient lors du chargement du jeu.

Dans ce didacticiel, je vais vous montrer comment créer un menu principal dans Unity à l'aide de UI Toile.

Étape 1: concevoir le menu principal

• Créer un nouveau Canvas (GameObject -> UI -> Canvas)

• Créez une nouvelle image en cliquant avec le bouton droit sur Canvas -> UI -> Image (ce sera l'arrière-plan du menu)

• Attribuez la texture à une image nouvellement créée. Vous pouvez utiliser l'image ci-dessous (Clic droit -> Enregistrer sous...), et assurez-vous que son Type de texture est défini sur 'Sprite (2D and UI)' dans les paramètres d'importation:

• Créez un nouveau script, appelez-le SC_BackgroundScaler puis collez-y le code ci-dessous:

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

• Attachez le script SC_BackgroundScaler à une image nouvellement créée. (Lors de l'attachement, le script redimensionnera automatiquement l'image d'arrière-plan pour l'adapter à l'écran):

Créer des boutons de menu:

• Faites un clic droit sur Canvas -> Create Empty puis renommez-le en "MainMenu". Cet objet contiendra les éléments de l'interface utilisateur pour le menu principal.
• Créez un nouveau texte en cliquant avec le bouton droit sur l'objet "MainMenu" > UI > Texte. Ce sera un texte de titre.
• Remplacez le texte par le nom de votre jeu (dans mon cas, ce sera "Game Title"):

• Changez l'alignement des paragraphes au milieu et au centre et la couleur au blanc:

• Enfin, changez la taille de la police en quelque chose de plus grand (par exemple 30) et le style de police en gras.

Cependant, vous remarquerez que le texte a disparu, c'est parce que les dimensions Rect Transform sont trop petites. Changez-les en quelque chose de plus grand (ex. Largeur: 400 Hauteur: 100), déplacez-le également légèrement en changeant Pos Y à 50:

• Créez 3 boutons (Clic droit sur l'objet "MainMenu" -> UI -> Bouton 3 fois) et déplacez chaque bouton vers le bas de 30 pixels.
• Remplacez le texte de chaque bouton par "Play Now", "Credits" et "Quit" respectivement:

• Dupliquez l'objet "MainMenu" et renommez-le en "CreditsMenu", supprimez tous les boutons qu'il contient sauf le bouton "Quit" et modifiez son texte en "Back".
• Changez la taille de la police du texte du titre dans "CreditsMenu" en quelque chose de plus petit (ex. 14), changez sa Pos Y en 0 et tapez le texte du générique.

Étape 2: Programmez les boutons du menu

Nous devons maintenant rendre les boutons fonctionnels en créant un script.

• Créez un nouveau script, appelez-le SC_MainMenu puis collez-y le code ci-dessous:

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

• Attachez SC_MainMenu à l'objet Canvas
• Attribuez l'objet "MainMenu" à la variable du menu principal
• Attribuez l'objet "CreditsMenu" à la variable du menu Crédits

La dernière étape consiste à lier les fonctions SC_MainMenu à chaque bouton.

• Sélectionnez le bouton et en "On Click ()" cliquez sur (+) pour ajouter une nouvelle variable d'élément:

• Attribuez l'objet avec le script SC_MainMenu (Canvas) au bouton "On Click ()" et sélectionnez la fonction qui correspond au bouton ("PlayNowButton()" pour le bouton Play Now, "CreditsButton()" pour le bouton Crédits, "QuitButton()" pour le bouton Quitter et "MainMenuButton()" pour le bouton Retour dans le menu Crédits).

Le menu principal est maintenant prêt.

REMARQUE: La fonction PlayNowButton() dans SC_MainMenu.cs tentera de charger une scène appelée "GameLevel". Assurez-vous donc d'avoir une scène avec le nom "GameLevel", qui est également ajouté aux paramètres de construction (vous pouvez également modifier le nom dans cette ligne pour qu'il corresponde au nom de la scène que vous souhaitez charger).

Vous souhaitez en savoir plus sur la création d'interface utilisateur ? Consultez notre didacticiel sur Comment créer des commandes tactiles mobiles dans Unity.