Chapitre 2 : Menu principal

Le parcour

🎮 On attaque avec le menu principal !

Ça y est, on est prêt ! 🚀 On a installé Unity, mis en place notre projet, et maintenant, il est temps de passer aux choses sérieuses. Et quoi de mieux pour commencer qu’un menu principal ?

Peu importe le type de jeu que tu développes, un menu principal est indispensable. C’est la porte d’entrée de ton jeu, le premier élément que le joueur verra. Il permet de lancer une partie, accéder aux options, quitter le jeu, et parfois bien plus encore !

Allez, on se lance et on commence à donner vie à notre projet ! 🎨🛠️

Retrouve Cube Guardian sur Steam

1️⃣ Plus de détails sur les GameObjects !

On en a déjà parlé dans la vidéo précédente : les GameObjects sont la base du fonctionnement d’Unity. Par définition, ce sont tous les objets présents dans notre scène, qu’il s’agisse de personnages, de décors, de lumières… et même de notre menu principal !

Eh oui, notre menu principal sera lui aussi un GameObject ! Pourquoi ? Tout simplement parce qu’il fait partie de la scène et qu’il sera affiché à l’écran du joueur.

✅ Créons ensemble notre premier GameObject et donnons vie à notre menu ! 🚀

1️⃣ Fais un clic droit dans un espace vide de la Hierarchy.
2️⃣ Sélectionne « Create Empty ».

Cela crée un GameObject vide, c’est-à-dire un objet sans composant particulier. Par défaut, il ne contient que le composant Transform, qui est obligatoire pour tous les GameObjects. Ce composant définit sa position, sa rotation et son échelle dans la scène et garantit son existence dans le monde du jeu.

📝 Renommons-le !
Dans l’Inspector, tu peux modifier son nom. Appelle-le « MainMenu », puisqu’il servira de base à notre menu principal ! 🎮

Une fois notre GameObject « MainMenu » créé, on va s’assurer qu’il est bien centré dans la scène.

Dans l’Inspector, repère le composant Transform. Ce composant définit la position, la rotation et l’échelle de l’objet dans l’espace.

📌 Petit rappel : La position est en 3D, ce qui signifie qu’elle est définie par un Vecteur3 (X, Y, Z) représentant sa position relative à l’origine de la scène (0, 0, 0).

📍 Centrer notre GameObject

1️⃣ Dans l’Inspector, trouve le champ Position du composant Transform.
2️⃣ Mets 0 dans X, Y et Z pour placer l’objet exactement au centre de la scène.

 

✅ Et voilà ! Notre GameObject « MainMenu » est bien positionné et prêt à accueillir notre menu principal ! 🚀

2️⃣ Ajouter un Canvas

Maintenant que nous avons notre GameObject « MainMenu », il est temps de le remplir pour afficher notre menu principal à l’écran !

Dans Unity, un GameObject peut :

  • Contenir des composants (comme un moteur sur une voiture).
  • Avoir des enfants, qui sont d’autres GameObjects attachés à lui (comme des fichiers dans un dossier).

📌 Pourquoi organiser nos objets avec un GameObject vide ?
C’est une bonne habitude d’utiliser un GameObject vide comme conteneur, auquel on va accrocher d’autres GameObjects enfants. Cela permet de garder une structure claire et ordonnée dans notre projet.

📌 Ajouter un Canvas

Le Canvas est l’élément principal qui permet d’afficher une interface utilisateur (UI) dans Unity. C’est lui qui va contenir nos boutons, textes, images et autres éléments du menu.

📍 Ajoutons un Canvas sous « MainMenu » :
1️⃣ Fais un clic droit sur MainMenu dans la Hierarchy.
2️⃣ Va dans UI > Canvas.

Et voilà, notre Canvas est en place ! 🎨 Il servira de base pour afficher les boutons et le texte de notre menu principal.

Comprendre les composants du Canvas

Contrairement à un GameObject vide, ajouter un Canvas ne crée pas juste un objet simple, mais ajoute automatiquement plusieurs composants qui permettent d’afficher et d’interagir avec l’interface utilisateur.

En regardant dans l’Inspector, tu verras que notre Canvas possède trois composants principaux :

🖼️ 1️⃣ Le composant Canvas

Le Canvas est le cadre principal qui permet d’afficher des éléments UI (boutons, textes, images…). Il détermine comment l’interface est rendue à l’écran.
📌 Dans l’Inspector, tu peux voir plusieurs paramètres importants, comme :

  • Render Mode : Définit si le Canvas s’affiche en 2D à l’écran, en 3D dans la scène ou attaché à une caméra.
  • Pixel Perfect : Permet d’afficher des éléments UI plus nets en évitant le flou dû au redimensionnement.

🔧 2️⃣ Le composant Canvas Scaler

Le Canvas Scaler est un outil essentiel qui définit les règles de redimensionnement du Canvas en fonction de la taille de l’écran du joueur.

📌 Il permet de :

  • Garder une interface proportionnelle quelle que soit la résolution.
  • Définir un mode de mise à l’échelle basé sur la taille de l’écran ou la densité des pixels.

C’est ce composant qui assure que les boutons et textes restent lisibles et bien positionnés, même sur différents écrans.

🎯 3️⃣ Le composant Graphic Raycaster

Le Graphic Raycaster permet au Canvas de détecter les interactions de l’utilisateur (clics, touches, survols…). Il utilise une technique appelée Raycasting, qui envoie un rayon invisible pour détecter les objets sous la souris.

📌 Pourquoi c’est utile ?

  • C’est grâce à ce système que les boutons captent les clics.
  • Il permet d’identifier où le joueur interagit avec l’interface.

💡 On en reparlera plus tard, car les Raycasts sont aussi utilisés dans d’autres domaines, comme la détection de collisions ou les interactions en 3D.

📌 Paramétrage du Canvas pour un affichage optimal

Maintenant que notre Canvas est en place, il est temps de le configurer correctement pour qu’il s’adapte parfaitement à l’écran du joueur.

🖼️ 1️⃣ Paramétrage du Render Mode

Dans l’Inspector, repère le composant Canvas et trouve l’option Render Mode.
👉 Laisse-le sur « Screen Space – Overlay ».
Cela signifie que le Canvas sera toujours affiché par-dessus la scène, quelle que soit la position de la caméra.

 

📏 2️⃣ Configuration du Canvas Scaler

Le Canvas Scaler va nous permettre de garantir que l’UI s’affiche correctement sur toutes les résolutions d’écran.

🛠️ Modifions les paramètres :
1️⃣ Dans le composant Canvas Scaler, repère l’option UI Scale Mode.
2️⃣ Change-le en 👉 « Scale With Screen Size ».

Pourquoi ? Parce que notre menu doit occuper toute la surface de l’écran, et s’adapter automatiquement si l’utilisateur joue sur un écran plus grand ou plus petit.

 

🖥️ 3️⃣ Définir une résolution de référence

1️⃣ Dans le champ Reference Resolution, entre :

  • 1920 x 1080 (résolution Full HD).

Cela signifie que tous les éléments UI seront conçus en fonction d’un écran Full HD. Si la résolution du joueur est plus grande ou plus petite, Unity ajustera automatiquement l’UI pour garder les bonnes proportions.

 

⚖️ 4️⃣ Ajuster le « Match » du Scaler

Tu verras un slider « Match » sous la résolution de référence. Ce paramètre contrôle comment l’UI s’adapte à l’écran en fonction de la largeur ou de la hauteur.

👉 Fais glisser le slider complètement vers la gauche (valeur 0) pour qu’Unity scale l’interface en fonction de la largeur de l’écran.

✅ Et voilà ! Maintenant, notre menu principal s’adaptera parfaitement à l’écran du joueur, quelle que soit sa résolution ! 🎮🚀

 

3️⃣ Les boutons du menu

Maintenant que notre Canvas est configuré, on va ajouter nos trois boutons pour naviguer dans le menu principal !

 

📂 1️⃣ Créer un conteneur pour organiser les boutons

Plutôt que de placer directement les boutons dans le Canvas, on va d’abord créer un GameObject vide qui servira de conteneur pour mieux organiser notre menu.

📌 Pourquoi ?

  • Ça permet de garder une hiérarchie propre et claire.
  • On pourra facilement déplacer ou redimensionner tout le menu sans toucher au reste de l’UI.

🛠️ Création du conteneur :
1️⃣ Fais un clic droit sur le Canvas.
2️⃣ Sélectionne Create Empty.
3️⃣ Renomme-le « Menu » pour bien identifier son rôle.

Ce GameObject ne contient aucun composant à part un Transform, mais on va bientôt y ajouter nos boutons ! 🎮

📌 2️⃣ Deux modes principaux pour positionner un élément UI

Le Rect Transform offre deux approches pour positionner un élément UI dans Unity. Chacune a ses avantages selon l’effet recherché !

 

📍 Mode 1 : Position du pivot + taille de l’objet

Dans ce mode, on définit :
✔️ Un point de pivot, qui sert de référence pour le positionnement de l’objet.
✔️ Une position relative au parent, en fonction du pivot.
✔️ Une taille fixe pour l’objet.

📌 Exemples d’utilisation :
✅ Centrer un élément sur l’écran.
✅ Placer un élément à un endroit précis (haut-gauche, bas-droite, etc.).

👉 Ce mode est utile pour positionner un élément à un endroit fixe, sans qu’il ne change de taille.
La seule chose qui peut affecter son affichage, c’est si son parent bouge ou change de taille, ce qui peut amener le pivot à se déplacer dans la scène.

📍 Mode 2 : Position avec des ancrages

Les ancrages permettent de lier les coins de l’objet à ceux de son parent (ici, le Canvas).

✔️ Chaque coin de l’objet suit un point spécifique du parent, en fonction de l’échelle de l’écran.
✔️ L’objet s’adapte dynamiquement si la résolution change.

📌 Exemples d’utilisation :
✅ Maintenir des proportions cohérentes quelle que soit la taille de l’écran.
✅ Créer un menu adaptable, qui s’étire proportionnellement avec l’affichage.

👉 Ce mode est idéal pour concevoir une interface « responsive », qui s’adapte aux différentes résolutions d’écran !

🎯 3️⃣ Expérimente et teste !

Le Rect Transform peut sembler abstrait au début, mais le meilleur moyen de comprendre son fonctionnement, c’est de tester par toi-même !

🔹 Modifie les pivots et observe comment l’objet se déplace en fonction du parent.
🔹 Essaye les ancrages pour voir leur impact sur la taille et la position.
🔹 Joue avec les valeurs de position et de taille pour voir comment chaque mode fonctionne.

✅ Une fois à l’aise avec ces concepts, on pourra placer notre menu au centre de l’écran et ajuster sa taille ! 🚀

📌4️⃣ Choisir le mode d’ancrage pour notre menu

Pour notre menu, on va utiliser le mode ancrage car on veut qu’il se redimensionne dynamiquement en fonction de la taille de l’écran du joueur.

Plutôt que d’avoir une taille fixe, on va fixer ses ancres pour qu’il n’occupe qu’une partie à gauche de l’écran, et s’adapte en fonction de la résolution.

📍 Définir les ancres du menu

Dans l’Inspector, dans le Rect Transform de notre menu, on va modifier les valeurs des ancres (Anchors) comme suit :

🔹 X Min = 0
🔹 X Max = 0.3
🔹 Y Min = 0.1
🔹 Y Max = 0.9

🖥️ Explication des valeurs

📌 Sur l’axe horizontal (X) :

  • X Min = 0 → Le menu commence tout à gauche de l’écran.
  • X Max = 0.3 → Il s’étend jusqu’à 30% de la largeur de l’écran.

📌 Sur l’axe vertical (Y) :

  • Y Min = 0.1 → Le menu commence à 10% du bas de l’écran.
  • Y Max = 0.9 → Il s’arrête à 90% en hauteur, laissant 10% d’espace en haut.

👉 Résultat :
Notre menu occupera un bandeau vertical sur le côté gauche de l’écran, peu importe la résolution du joueur ! 🎮

✅ Une fois les ancres réglées, notre menu est bien positionné et prêt à être rempli avec nos boutons et éléments d’interface ! 🚀

📌 Organiser automatiquement nos boutons avec un Layout Group

Maintenant que notre zone de menu est bien positionnée, on va y insérer nos boutons et s’assurer qu’ils restent bien alignés, quelle que soit la résolution de l’écran.

📌 Pour cela, on va utiliser un composant très pratique : le Vertical Layout Group.

📍 Ajouter un Vertical Layout Group

1️⃣ Sélectionne le GameObject « Menu » dans la Hierarchy.
2️⃣ Dans l’Inspector, clique sur « Add Component ».
3️⃣ Dans la barre de recherche, tape « Vertical Layout Group » et sélectionne-le.

🎯 Pourquoi utiliser un Layout Group ?

Le Vertical Layout Group va automatiser l’organisation des GameObjects enfants en les alignant verticalement.

✅ Avantages :
✔️ Tous les boutons seront automatiquement alignés les uns en dessous des autres.
✔️ Si l’écran change de taille, les boutons resteront bien organisés sans avoir à ajuster leurs positions manuellement.
✔️ Il est possible de contrôler l’espacement et l’alignement des éléments.

 

📌 Ajouter et configurer les boutons du menu

Nous avons maintenant notre zone de menu bien structurée, il ne nous reste plus qu’à y ajouter nos trois boutons pour naviguer dans le menu principal ! 🎮

 

📍 1️⃣ Ajouter les boutons

1️⃣ Fais un clic droit sur le GameObject « Menu » dans la Hierarchy.
2️⃣ Va dans UI > Button (Bouton).
3️⃣ Renomme-le selon sa fonction :

  • "Jouer" pour démarrer une partie.
  • "Options" pour accéder aux réglages.
  • "Quitter" pour fermer le jeu.
    4️⃣ Répète l’opération trois fois pour créer les trois boutons nécessaires.

 

📌 2️⃣ Activer TextMesh Pro (TMP)

💡 Si c’est la première fois que tu ajoutes un bouton dans ce projet, Unity peut te demander d’installer TextMesh Pro (TMP).

📌 TMP est un système avancé pour l’affichage de texte avec une bien meilleure qualité et flexibilité que le texte par défaut d’Unity.

✅ Si un message apparaît, clique sur « Importer les fichiers essentiels », cela installera ce qu’il faut pour que TMP fonctionne correctement.

📍 3️⃣ Ajuster la taille des boutons

Par défaut, les boutons peuvent être un peu petits, donc on va les redimensionner pour qu’ils s’intègrent bien dans notre menu.

1️⃣ Sélectionne tous les boutons dans la Hierarchy (Ctrl + clic pour les sélectionner en même temps).
2️⃣ Dans l’Inspector, repère le composant Rect Transform.
3️⃣ Modifie les valeurs de taille :

  • Largeur (Width) : 275
  • Hauteur (Height) : 60

📌 Avec ces dimensions, les boutons auront un bon équilibre visuel, suffisamment larges pour être lisibles et bien espacés dans le menu !

📌 Améliorer l’apparence du menu et des boutons

Maintenant que notre menu principal est fonctionnel, on va affiner son apparence pour lui donner plus de style et de lisibilité.

📍 1️⃣ Ajuster l’alignement des boutons

1️⃣ Sélectionne « Menu » dans la Hierarchy.
2️⃣ Dans l’Inspector, repère le composant « Vertical Layout Group ».
3️⃣ Modifie l’option Child Alignment et sélectionne « Middle Center ».

📌 Cela permet de centrer tous les boutons à l’intérieur du menu, donnant un rendu plus équilibré et harmonieux.

📍 2️⃣ Ajouter des effets visuels aux boutons

Maintenant, on va améliorer l’apparence des boutons en leur ajoutant de la profondeur grâce à des contours et des ombres.

📌 Astuce :
Tu peux sélectionner plusieurs GameObjects en même temps en maintenant la touche Ctrl (ou Maj pour une sélection en série) et en cliquant sur les boutons dans la Hierarchy.

1️⃣ Sélectionne les trois boutons (Jouer, Options, Quitter).
2️⃣ Dans l’Inspector, clique sur « Add Component ».
3️⃣ Ajoute ces deux composants :

  • Outline (Contour)
  • Shadow (Ombre)

🎨 Effet visuel et amélioration du rendu

✔️ L’Outline ajoute un contour léger qui distingue mieux le bouton du fond.
✔️ Le Shadow ajoute une ombre subtile, donnant un effet de profondeur pour que les boutons ressortent mieux.

✅ Résultat :

Nous avons maintenant un menu plus structuré, avec des boutons alignés et visuellement plus agréables ! 🎮🚀

Prochaine étape ? Personnaliser les couleurs et ajouter les fonctionnalités aux boutons !

📌 Modifier le texte affiché sur les boutons

Maintenant que nos boutons sont bien alignés et stylisés, on va modifier le texte qu’ils affichent pour qu’ils correspondent à leur fonction.

📍 1️⃣ Comprendre la structure des boutons

Si tu retournes dans la Hierarchy, tu remarqueras que chaque bouton possède un enfant appelé « Text ».

📌 Pourquoi ?

  • Ce GameObject enfant contient un composant Text (ou TextMesh Pro si activé).
  • C’est ici que l’on peut modifier le texte affiché sur le bouton et ajuster son apparence.

💡 Dans l’Inspector, en sélectionnant ce « Text », tu verras plusieurs options :
✔️ Le champ « Text » : qui contient le texte affiché.
✔️ Les options de style : police, taille, alignement, couleur, etc.

📍 2️⃣ Modifier le texte des boutons

On va maintenant renommer nos trois boutons pour qu’ils aient les bons intitulés :

1️⃣ Sélectionne le GameObject « Text » à l’intérieur de chaque bouton.
2️⃣ Dans l’Inspector, trouve le champ « Text » et modifie son contenu :

  • Bouton 1 → « Jouer » 🎮
  • Bouton 2 → « Options » ⚙️
  • Bouton 3 → « Quitter » ❌

✅ Et voilà ! Nos boutons affichent maintenant les bonnes actions.

📌 3️⃣ Ajuster le style du texte

Pour améliorer la lisibilité, tu peux aussi modifier la taille et l’alignement du texte :

📌 Si tu utilises TextMesh Pro (TMP)
1️⃣ Sélectionne le texte du bouton dans la Hierarchy.
2️⃣ Dans l’Inspector, ajuste :

  • Font Size : Augmente la taille pour qu’elle soit bien visible.
  • Alignment : Mets-le au centre horizontalement et verticalement.
  • Auto Size (si TMP activé) : Permet d’adapter automatiquement la taille du texte au bouton.

📌 Si tu utilises le Text classique d’Unity

  • Dans l’Inspector, ajuste Font Size et l’alignement vertical et horizontal pour bien centrer le texte.

4️⃣ Création du script de notre menu

📌 Ajouter un script pour rendre notre menu interactif

Maintenant que notre menu est visuellement prêt, il est temps de le rendre fonctionnel ! 🎮

Pour cela, on va créer notre premier script qui permettra de détecter les clics sur nos boutons et d’exécuter des actions en conséquence.

📍 1️⃣ Ajouter un script à notre menu

1️⃣ Sélectionne « MainMenu » dans la Hierarchy (le GameObject conteneur de notre menu).
2️⃣ Dans l’Inspector, clique sur « Add Component ».
3️⃣ Dans la barre de recherche, tape « Script » et sélectionne « New Script ».
4️⃣ Nom du script → MainMenu (📌 Bonne pratique : toujours nommer un script avec le même nom que l’objet auquel il est attaché dans les UI).
5️⃣ Clique sur Créer et Ajouter.

💡 À quoi sert ce script ?
👉 Il nous permettra de gérer les interactions du menu, comme démarrer une partie, ouvrir les options ou quitter le jeu !

📍 2️⃣ Ouvrir et éditer le script

1️⃣ Double-clique sur MainMenu dans l’Inspector.
2️⃣ Visual Studio (ou l’éditeur de script par défaut) s’ouvre avec le code de notre script.

👨‍💻 Si tu n’as jamais programmé, c’est ici que la magie noire commence ! 🧙‍♂️
C’est dans ce fichier que l’on va écrire les instructions pour que nos boutons réagissent aux clics !

📌 Petit tour d’horizon sur les MonoBehaviour et le cycle du jeu

Avant d’entrer dans le vif du sujet, faisons un rapide point vocabulaire, histoire que tu saches quoi chercher si tu as des questions ! 📖

📍 1️⃣ Qu’est-ce qu’un MonoBehaviour ?

Notre script MainMenu.cs est en réalité une classe C#, et cette classe hérite de MonoBehaviour.

📌 Définition rapide :
👉 Un MonoBehaviour est un type de classe C# spécifique à Unity.
👉 Tous les scripts associés à un GameObject héritent de MonoBehaviour.

💡 Pourquoi c’est important ?
Grâce à cet héritage, notre script peut interagir avec Unity et utiliser plein de méthodes et fonctionnalités intégrées au moteur.

📌 À retenir :

  • Un script Unity = une classe C# qui hérite de MonoBehaviour.
  • Sans MonoBehaviour, Unity ne peut pas utiliser notre script comme un composant.
  • On verra plus tard qu’on peut créer d’autres types de classes, mais pour l’instant : un script = un MonoBehaviour !

📍 2️⃣ Le cycle infini d’un jeu vidéo 🎮

Si tu es joueur, tu as sans doute déjà entendu parler du nombre d’images par seconde (FPS/IPS). Mais comment ça fonctionne vraiment dans un jeu vidéo ?

📌 Un jeu, c’est un cycle sans fin de calcul et d’affichage, qui se répète encore et encore jusqu’à ce que le joueur ferme le jeu.

Pour faire simple, on peut découper ce cycle perpétuel en trois étapes principales :

1️⃣ Récupérer les actions du joueur (Input clavier, souris, manette…).
2️⃣ Appliquer ces actions et recalculer l’état du jeu (déplacement du joueur, mise à jour des PV, calculs divers…).
3️⃣ Afficher la nouvelle image correspondant à cet état.

🌀 Et on recommence… encore et encore, des dizaines de fois par seconde !

📍 3️⃣ Où intervient MonoBehaviour dans ce cycle ?

En héritant de MonoBehaviour, notre script peut être appelé à l’étape 2 du cycle (la mise à jour de l’état du jeu).

📌 C’est grâce à cela que Unity appelle automatiquement la méthode Update() de nos scripts !

💡 Important :

  • La méthode Update() est exécutée à chaque frame du jeu.
  • C’est ici qu’on met le code qui doit être exécuté en continu (ex : déplacement du joueur, suivi de la caméra…).

⚠️ Attention : Ne surcharge pas Update() avec trop de calculs lourds, sinon ton jeu risque de ralentir !

📌 Attacher des actions à nos boutons

On attaque le cœur du sujet : détecter les clics sur nos trois boutons et leur assigner des actions ! 🖱️🎮

 

📍 1️⃣ Référencer nos boutons dans le script

Avant que notre script puisse interagir avec les boutons, il doit les connaître. En d’autres termes, on doit lui fournir une référence à chacun des boutons.

📌 Unity propose une technique super pratique pour ça : les [SerializedField] !

Grâce à [SerializedField], on peut exposer une variable privée directement dans l’Inspector tout en gardant un bon niveau d’encapsulation (sans utiliser public).

Voici la syntaxe pour déclarer une référence à un bouton dans notre script :


using UnityEngine;
using UnityEngine.UI;

public class MainMenu : MonoBehaviour
{
    [SerializeField] private Button playButton;
    [SerializeField] private Button optionsButton;
    [SerializeField] private Button quitButton;
}

📍 2️⃣ Ajouter les boutons dans l’Inspector

Maintenant que nos variables sont déclarées, il faut lier les boutons réels dans Unity :

1️⃣ Sélectionne « MainMenu » dans la Hierarchy.
2️⃣ Regarde dans l’Inspector : tu devrais voir les trois champs correspondant à nos boutons.
3️⃣ Glisse-dépose chaque bouton depuis la Hierarchy vers son champ respectif :

  • PlayButton → playButton
  • OptionsButton → optionsButton
  • QuitButton → quitButton

✅ Et voilà ! Maintenant, notre script connaît l’existence des boutons et peut les utiliser ! 🚀

📌 Ajouter un Listener pour détecter les clics sur nos boutons

Maintenant que notre script référence correctement les boutons, on va leur assigner des actions lorsqu’on clique dessus. 🎮🖱️

Pour cela, on va utiliser le pattern de Listener dans la méthode Start() de notre script.

📍 1️⃣ Ajouter un écouteur d’événement sur les boutons

En C#, Unity nous permet d’utiliser AddListener() pour détecter un clic sur un bouton.

📌 Dans la méthode Start(), on va écrire nos instructions à réalsier au moment du click :


using UnityEngine;  // Importation des fonctionnalités Unity
using UnityEngine.UI;  // Importation des fonctionnalités UI (pour les boutons)
using UnityEditor; // Importation des fonctionnalités d'editeur

// Déclaration de notre classe
public class MainMenu : MonoBehaviour
{
    // 📌 1️⃣ Déclaration des boutons avec [SerializeField]
    
    [SerializeField] private Button playButton;
    [SerializeField] private Button optionsButton;
    [SerializeField] private Button quitButton;

    // 📌 2️⃣ La méthode Start() s'exécute au démarrage du jeu
    private void Start()
    {
        // 🔹 Vérifie si playButton n'est pas null avant d'ajouter un écouteur de clic
        if (playButton != null)
        {
            playButton.onClick.AddListener(() =>
            {
                Debug.Log("Démarrage du jeu !");
                ClickPlay(); // Appelle la fonction ClickPlay()
            });
        }

        // 🔹 Vérifie si optionsButton n'est pas null avant d'ajouter un écouteur de clic
        if (optionsButton != null)
        {
            optionsButton.onClick.AddListener(() =>
            {
                Debug.Log("Ouverture du menu des options !");
                ClickOptions(); // Appelle la fonction ClickOptions()
            });
        }

        // 🔹 Vérifie si quitButton n'est pas null avant d'ajouter un écouteur de clic
        if (quitButton != null)
        {
            quitButton.onClick.AddListener(() =>
            {
                Debug.Log("Fermeture du jeu !");
                ClickQuit(); // Appelle la fonction ClickQuit()
            });
        }
    }

    // 📌 3️⃣ Fonctions exécutées lors du clic sur un bouton

    private void StartGame()
    {
        // Ici, on mettra le code pour lancer une nouvelle partie (changer de scène, par exemple)
        Debug.Log("La partie commence !");
    }

    private void OpenOptions()
    {
        // Ici, on mettra le code pour ouvrir le menu des options
        Debug.Log("Ouverture du menu des options...");
    }

    private void QuitGame()
    {
        Debug.Log("Fermeture du jeu...");

        #if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false; // Arrête le mode Play dans Unity
        #else
        Application.Quit(); // Quitte le jeu (uniquement en version compilée)
        #endif
    }
}

📌 Explication détaillée du code 

Si tu débutes en C# et Unity, pas de panique ! 🧑‍💻 On va détailler ce code ligne par ligne pour bien comprendre comment il fonctionne.

 

📍 1️⃣ Comprendre la structure du script

Un script Unity est en fait une classe C# qui hérite de MonoBehaviour. Cela signifie que :

  • Il peut être ajouté à un GameObject dans Unity.
  • Il peut utiliser les méthodes spécifiques d’Unity (Start(), Update(), etc.).

📍 2️⃣ Explication en détail

1️⃣ Les déclarations [SerializeField]

📌 Ces lignes permettent de créer une référence aux boutons, tout en pouvant les assigner dans l’Inspector d’Unity.
💡 Pourquoi ne pas les mettre en public ?

  • [SerializeField] permet de les voir dans l’Inspector tout en gardant la variable privée (bonne pratique).
  • Cela évite que d’autres scripts modifient ces variables accidentellement.

2️⃣ La méthode Start()

📌 La méthode Start() est exécutée une seule fois, au début du jeu.
👉 On s’en sert ici pour connecter nos boutons aux actions qu’ils doivent exécuter.

💡 Décryptage :
1️⃣ On vérifie si le bouton existe (if (playButton != null)) pour éviter une erreur.
2️⃣ On utilise onClick.AddListener() pour ajouter une action au bouton.
3️⃣ On définit une action entre {} :

  • Debug.Log("Démarrage du jeu !"); affiche un message dans la console.
  • StartGame(); appelle la méthode qui démarre le jeu.

🚀 Quand le joueur clique sur « Jouer », Unity exécute cette fonction !

📌 Même logique pour les boutons Options et Quitter.

📌 Pour le bouton « Quitter », on utilise Application.Quit(), mais… cette commande ne fonctionne pas dans l’éditeur Unity !

👉 Solution : Ajouter un code spécifique pour Unity Editor

📌 Explication du #if UNITY_EDITOR :
✔️ Si on est dans l’éditeur Unity, on arrête simplement le mode Play (isPlaying = false).
✔️ Si le jeu est compilé (EXE, APK, etc.), on exécute Application.Quit() pour fermer le jeu.

📍 3️⃣ Tester le script dans Unity

✅ Attache le script MainMenu.cs au GameObject "MainMenu".
✅ Glisse-dépose chaque bouton dans l’Inspector (Play, Options, Quitter).
✅ Lance le jeu en Mode Play et clique sur les boutons.
✅ Regarde la console (Ctrl + Shift + C) : les messages doivent apparaître !

✅ Résumé

✔️ On utilise [SerializeField] pour référencer nos boutons.
✔️ On ajoute un AddListener() dans Start() pour détecter les clics.
✔️ Chaque bouton déclenche une action (StartGame(), OpenOptions(), QuitGame()).
✔️ Application.Quit() fonctionne seulement en version compilée, donc on ajoute une condition pour Unity Editor.

🚀 Prochaine étape : Remplacer les logs par des vraies actions (changer de scène, ouvrir un menu, etc.) !

📌 Tester le fonctionnement des boutons dans Unity 🎮

Maintenant que notre menu principal est interactif, il est temps de le tester pour vérifier que tout fonctionne bien ! 🚀

 

📍 1️⃣ Lancer le jeu dans l’éditeur Unity

1️⃣ Assure-toi que le script MainMenu.cs est bien attaché au GameObject "MainMenu".
2️⃣ Vérifie que les boutons sont bien assignés dans l’Inspector (ils doivent être glissés dans les champs playButton, optionsButton et quitButton).
3️⃣ Ouvre la console Unity :

  • Raccourci clavier : Ctrl + Shift + C.
  • Ou bien Window > General > Console.
    4️⃣ Clique sur le bouton Play (en haut dans Unity) pour démarrer le Mode Play.

📍 2️⃣ Tester les boutons

✅ Clique sur « Jouer » :

  • Attendu : Un message Démarrage du jeu ! doit apparaître dans la console.

✅ Clique sur « Options » :

  • Attendu : Un message Ouverture du menu des options ! doit s’afficher.

✅ Clique sur « Quitter » :

  • Attendu : Un message Fermeture du jeu ! doit être visible.
  • Si tu es dans l’éditeur Unity, le mode Play devrait s’arrêter automatiquement grâce au code UnityEditor.EditorApplication.isPlaying = false;.

📍 3️⃣ Résultat : Succès ! 🎉

Si tout fonctionne comme prévu, bravo ! 🎊 Tu viens de créer un menu fonctionnel dans Unity avec des boutons interactifs !

5️⃣ Création du menu des options

📌 Préparer le Menu des Options pour l’afficher/masquer depuis le Menu Principal

Avant de conclure ce chapitre, on va préparer le Menu des Options et voir comment l’afficher et le masquer depuis notre Menu Principal ! 🎮

 

📍 1️⃣ Créer le GameObject du Menu des Options

1️⃣ Retourne dans l’éditeur Unity.
2️⃣ Ajoute un GameObject vide :

  • Clic droit dans la Hiérarchie > Create Empty.
  • Renomme-le : "MainOptions".
    3️⃣ Ajoute un Canvas à MainOptions :
  • Sélectionne "MainOptions" dans la Hiérarchie.
  • Clic droit > UI > Canvas.
  • Dans l’Inspector, configure le Canvas :
    • Render Mode : Screen Space - Overlay (par défaut, ne pas changer).
    • UI Scale Mode (dans le Canvas Scaler) : Scale With Screen Size.
    • Reference Resolution : 1920 x 1080.
    • Match : 0 (ajuste en fonction de la largeur).

📍 2️⃣ Ajouter un fond semi-transparent

1️⃣ Ajoute une Image comme arrière-plan :

  • Clic droit sur « MainOptions » > UI > Image.
  • Renomme-la "Background".
    2️⃣ Modifier la couleur et la transparence :
  • Sélectionne "Background" dans l’Inspector.
  • Clique sur « Color », choisis noir et ajuste l’Alpha (transparence) à 150 pour un effet semi-transparent.
    3️⃣ Ajuster le Rect Transform :
  • Ancre : Stretch (pour que l’image couvre tout l’écran).
  • Position X/Y : 0.
  • Width / Height : Automatique (ajusté au Canvas).

    [SerializeField] private GameObject mainOptions;

📌 Ajouter un bouton pour fermer le Menu des Options

Maintenant que notre Menu des Options est prêt, on va ajouter un bouton pour le fermer ! 🔙

 

📍 1️⃣ Ajouter un bouton dans le Menu des Options

1️⃣ Dans la Hiérarchie, sélectionne « MainOptions ».
2️⃣ Clic droit > UI > Button pour créer un bouton.
3️⃣ Renomme-le "BoutonValidate" (ou "BoutonFermer" si tu préfères).

 

📍 2️⃣ Modifier la taille et la position du bouton

📌 Dans l’Inspector, modifie les valeurs du Rect Transform :
✔️ Width (Largeur) : 250
✔️ Height (Hauteur) : 50
✔️ Position Y : 150 (il sera 150px au-dessus du bas du parent).
✔️ Anchor : Bas-centre (clique sur l’icône d’ancrage et sélectionne l’option du milieu en bas).

 

📍 3️⃣ Personnaliser l’apparence du bouton

📌 Changer la couleur en « Highlight » vert
1️⃣ Sélectionne "BoutonValidate".
2️⃣ Dans l’Inspector, clique sur le composant "Button" > "Color Tint".
3️⃣ Change la couleur « Normal » en vert clair pour un effet highlight.

📌 Ajouter des effets visuels
1️⃣ Ajoute un contour (Outline) :

  • Dans l’Inspector, « Add Component » > « Outline ».
  • Augmente légèrement l’épaisseur pour plus de visibilité.
    2️⃣ Ajoute une ombre (Shadow) :
  • Dans l’Inspector, « Add Component » > « Shadow ».
  • Laisse les valeurs par défaut ou ajuste la transparence pour un effet plus subtil.

📍 4️⃣ Modifier le texte du bouton

1️⃣ Déplie « BoutonValidate » dans la Hiérarchie.
2️⃣ Sélectionne son enfant « Text ».
3️⃣ Dans l’Inspector, change le champ "Text" en "Fermer" ou "Valider".
4️⃣ Augmente la taille du texte et centre-le (Alignment > "Center").

📌 Créer un script pour fermer le Menu des Options

Maintenant, on va rendre notre bouton de validation fonctionnel en lui ajoutant une action pour fermer le Menu des Options ! 🔙

 

📍 1️⃣ Créer le script MenuOptions.cs et l’attacher à MainOptions

1️⃣ Dans Unity, va dans le dossier « Scripts » (ou crée-le si besoin).
2️⃣ Clic droit > Create > C# Script et nomme-le MenuOptions.
3️⃣ Attache ce script à MainOptions :

  • Sélectionne « MainOptions » dans la Hiérarchie.
  • Dans l’Inspector, clique sur « Add Component ».
  • Recherche « MenuOptions » et ajoute-le.

📍 2️⃣ Référencer le bouton Validate dans le script

Dans MenuOptions.cs, on va créer une référence vers notre bouton de validation :


using UnityEngine;
using UnityEngine.UI;

public class MenuOptions : MonoBehaviour
{
    [SerializeField] private Button buttonValidate; // Référence au bouton de validation

    private void Start()
    {
        if (buttonValidate != null)
        {
            buttonValidate.onClick.AddListener(() =>
            {
                ValidateSettings();
            });
        }
    }

    private void ValidateSettings()
    {
        Debug.Log("Validate settings");
        this.gameObject.SetActive(false); // Désactive le menu des options
    }
}

📍 3️⃣ Assigner le bouton dans l’Inspector

1️⃣ Sélectionne MainOptions dans la Hiérarchie.
2️⃣ Dans l’Inspector, repère le champ boutonValidate (grâce au [SerializeField]).
3️⃣ Glisse BoutonValidate depuis la Hiérarchie dans ce champ.

 

 

📌 Activer le Menu des Options depuis le Menu Principal

Maintenant que notre bouton « Fermer » fonctionne, on va faire en sorte que le bouton « Options » du Menu Principal affiche le Menu des Options ! 🎮

📍 1️⃣ Ajouter une référence au Menu des Options dans MainMenu.cs

Dans le script MainMenu.cs, ajoute une référence vers MainOptions pour pouvoir l’activer :


using UnityEngine;
using UnityEngine.UI;

public class MainMenu : MonoBehaviour
{
    [SerializeField] private Button playButton;
    [SerializeField] private Button optionsButton;
    [SerializeField] private Button quitButton;
    [SerializeField] private GameObject mainOptions; // 📌 Référence au Menu des Options

    private void Start()
    {
        if (playButton != null)
        {
            playButton.onClick.AddListener(() =>
            {
                Debug.Log("Démarrage du jeu !");
                StartGame();
            });
        }

        if (optionsButton != null)
        {
            optionsButton.onClick.AddListener(() =>
            {
                OpenOptions();
            });
        }

        if (quitButton != null)
        {
            quitButton.onClick.AddListener(() =>
            {
                Debug.Log("Fermeture du jeu !");
                QuitGame();
            });
        }
    }

    private void StartGame()
    {
        // Code pour lancer le jeu (ex: SceneManager.LoadScene("GameScene");)
    }

    private void OpenOptions()
    {
        if (mainOptions != null)
        {
            Debug.Log("Ouverture du menu des options !");
            mainOptions.SetActive(true); // 📌 Active le Menu des Options
        }
    }

    private void QuitGame()
    {
        Debug.Log("Fermeture du jeu...");
        #if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false; // Quitte le mode Play dans l’éditeur
        #else
        Application.Quit(); // Quitte le jeu (uniquement en version compilée)
        #endif
    }
}

📍 2️⃣ Assigner le Menu des Options dans l’Inspector

1️⃣ Sélectionne MainMenu dans la Hierarchy.
2️⃣ Dans l’Inspector, tu verras un champ « Main Options » grâce à [SerializeField].
3️⃣ Glisse-dépose MainOptions (le GameObject) dans ce champ.

 

📍 3️⃣ Tester le Menu 🎮

✅ Lance le Mode Play.
✅ Clique sur « Options » dans le Menu Principal → Le Menu des Options doit s’afficher !
✅ Clique sur « Fermer » dans le Menu des Options → Il doit disparaître !

📌 Conclusion de cette première étape ! 🎉

Et voilà, on a terminé pour aujourd’hui ! C’était notre première plongée dans la « magie noire » du code, et tu as maintenant un menu principal interactif capable d’ouvrir et de fermer un menu des options. 🔥

J’espère que ça t’a plu et que ça te donne envie de continuer l’aventure ! 🚀

Dans la prochaine vidéo, on va connecter le bouton « Jouer » pour lancer notre jeu, et on commencera à explorer la gestion des scènes dans Unity !

🕹️ Prépare-toi, on passe à l’action !

À très bientôt pour la suite ! 🎮😊

Découvre le prochain chapitre, où nous allons explorer la création d’une nouvelle scène ! 🎮🚀Prêt à passer à l’action ? C’est parti ! 👉

Chapitre 2 : Changement de scène