Créer un menu principal dans Unity peut être déroutant pour les développeurs débutants.
Sans un menu principal bien conçu, les joueurs peuvent ressentir de la frustration et de la confusion lors de la navigation dans votre jeu.
Cet article vous guide à travers la création d’un menu principal avec Unity, en utilisant des outils comme le Canvas et des scripts pour améliorer l’expérience utilisateur.
Initiez-vous à Unity et lancez-vous dans le développement de jeux.
Dans cette section, nous donnerons une touche finale à la création de notre jeu en créant un « Menu Principal ». Ce sera pour nous l’occasion d’apprendre à créer et manipuler l’interface Utilisateur de Unity. Nous aurons même à créer un script.
Tout d’abord, nous avons besoin d’une nouvelle scène. L’approche la plus rapide consiste à modifier une scène existante. Ouvrez la scène « Level1 ». L’option : File > Save As vous permet de sélectionner un emplacement (dossier Scenes de préférence) où vous pourrez sauvegarder la scène sous un nouveau nom. Dans notre cas, la scène dupliquée se nommera « Menu ».
Supprimez tous les éléments qui s’y trouvent en dehors de la « Directional Light » et ajoutez une nouvelle caméra. Nous utiliserons à présent un « Canvas » pour l’UI (User Interface).
🙄 Donc, on doit se rendre maintenant sur « Canva.com », la plateforme de graphisme !
Non, pas du tout !
Il s’agit d’une couche 2D qui se superposera à l’écran pour permettre l’affichage en continu de certaines informations. Dans la « Hierarchy » procédons comme suit : clic droit > UI > Canvas. Maintenez l’objet « Canvas » sélectionné et continuez : clic droit > UI > Text.
Un objet pour éditer du texte apparaît comme enfant du canvas. En général, les informations de l’interface utilisateur ont besoin d’être placées sous le « Canvas ». Nous pouvons commencer par éditer notre texte.
« Gallactic Platformer » est le libellé de notre texte. Les options figurant dans la section « Character » nous permettent d’ajuster la présentation des lettres. Au niveau de la propriété « Font » choisissez la police que nous avons fournies dans les ressources. Avec « Font Size » ajuster la taille. Parmi différentes options, voici quelques-unes à modifier :
- Alignment :vous permet de centrer votre texte horizontalement et verticalement.
- Horizontal / Vertical Overflow :Définissez ces propriétés à « Overflow » pour vous permettre d’agrandir (horizontalement et verticalement) votre texte sans aucune contrainte. Par défaut, votre texte ne peut dépasser certaines limites déjà fixées par son conteneur.
- Color :pour modifier la couleur.
Dès que vous avez une présentation correcte, lancez votre jeu.
😩 Mais il n’y a rien qui se passe comme prévu ! Le rendu est totalement différent de ce que j’ai configuré(e) dans la scène.
Exactement. Si vous ne rencontrez pas ce problème maintenant, vous l’auriez remarqué après la compilation de votre jeu. Tout d’abord, assurez-vous que le ratio de la fenêtre « Game » est bien à « 16 :9 » ou un format compatible avec les PC. Le vrai problème se trouve au niveau de la configuration de votre Canvas :
Définissez la propriété « UI Scale Mode » à « Scale With Screen Size » pour permettre au canvas d’adapter vos configurations à divers type d’écran.
La configuration par défaut du canvas scaler vous causera des ennuis la plupart du temps. L’option « Scale With Screen Size » est celle que vous devriez prioriser dans la plupart des cas pour éviter des problèmes de redimensionnement après la compilation de votre jeu.
Ensuite, nous avons besoin d’ajouter trois différents boutons au canvas : Play, Continue, Exit.
Pour ajouter un bouton : clic droit > UI > button – TextMeshPro.
Le bouton comprend un objet text identique au précédent. Utilisez-le pour renommer le bouton « PLAY » et ajuster son apparence. Pour ce qui est de l’objet bouton en lui-même, nous l’utiliserons pour déclencher le premier niveau de jeu :
Il nous suffit d’ajouter notre script « SceneLoader » pour accéder à la fonction « LoadScene » à partir de « On Click() ». Attention à correctement écrire la scène de destination « Level1 » et à mettre le propriété « Delay » à zéro pour une transition rapide.
A présent à vous de jouer. Lancez le jeu et testez cette nouvelle fonctionnalité.
Nous avons maintenant à rajouter le bouton « Continue ». Son fonctionnement est assez similaire au bouton « Play ». Dupliquons et renommons alors ce dernier « CONTINUE ».
Après avoir changé le libellé du texte, le seul changement significatif à faire concerne l’évènement « On Click ». Au lieu de la fonction « LoadScene » nous aurons à sélectionner la fonction « LoadSceneFromContinue ». Cette fonction lancera le jeu à partir du niveau le plus élevé que le joueur ait atteint.
Cependant, il nous faut une configuration supplémentaire pour qu’elle fonctionne comme souhaité. Nous allons reconfigurer les plateformes d’arrivées.
Revenons à la scène « Level1 » :
Nous utilisons à présent la fonction « LoadSceneWithSaveContinue » pour sauvegarder le niveau le plus élevé atteint.
Profitons également pour renvoyer le joueur à la scène « Menu » en cas de Game Over :
L’évènement « 0n Game Over » était déjà disponible. Il nous suffit d’ajouter le script « SceneLoader » pour accéder à la fonction « LoadScene » et correctement renseigner le nom de la destination : « Menu ». N’oublier pas d’initialiser la valeur de « Delay » à zéro.
Nous pouvons enfin revenir à notre scène « Menu » pour une dernière configuration : le bouton « Exit ».
Comme d’habitude créer le bouton à renommer « Exit » et éditer son objet « Text ». Nous avons besoin ici d’un nouveau script.
🙄 Mais nous avons déjà utilisée toutes celles qui étaient disponibles !
Alors, il ne nous reste plus qu’à en créer une nouvelle.
Dans le dossier « Scripts » : clic droit > create > C# Script.
Renommons notre script « QuitGame » et attachons-le au bouton « Quit » précédemment créé. Ouvrez le script et mettez-y le code suivant :
usingSystem.Collections;
usingSystem.Collections.Generic;
usingUnityEngine;
publicclassQuitGame : MonoBehaviour {
publicvoidQuitTheGame() { Application.Quit(); }
}
Nous avons simplement rajouté la méthode « QuitTheGame » qui est chargé d’exécuter une seule instruction : Application.Quit () ;
Cela permet de fermer totalement un jeu créer avec le moteur Unity. La mention « public » nous autorise à utiliser cette fonction depuis notre inspecteur avec l’évènement « On Click » :
Il ne nous reste qu’à accéder à la fonction « QuitTheGame » via l’évènement « On Click ».
Vous pouvez commencer par tester toute la logique du jeu avec les différentes transitions.
Ne vous inquiétez pas si le button « Quit » ne semble pas fonctionner. En effet, le code que nous avons écrit ne fonctionne qu’en dehors de l’éditeur de Unity.
Notre interface d’accueil est fin prête. Voici de mon côté ce que j’ai réalisé :
Vous trouverez dans les ressources, le projet de référence. N’hésitez pas à le consulter au besoin.
Nous sommes à présent à une étape charnière où nous pouvons commencer à penser à une version jouable de notre jeu. Rendez-vous au chapitre suivant !
Créer un menu principal Unity
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un menu principal dans Unity?
Comment configurer l'interface utilisateur dans Unity?
Quels scripts utiliser pour les boutons dans Unity?
Comment résoudre les problèmes d'affichage dans Unity?
Comment ajouter et configurer des boutons dans Unity?
Conclusion
En créant un menu principal dans Unity, vous améliorez considérablement l’expérience utilisateur de votre jeu. Quelle autre fonctionnalité souhaiteriez-vous explorer pour enrichir votre jeu Unity?
