Comment créer un menu principal dans Unity

Dans cet Instructable, j'explique comment créer un menu de démarrage pour un jeu dans Unity, un logiciel de conception de jeux 3D téléchargeable gratuitement. Il s'agit d'un menu simple, mais les concepts peuvent être facilement appliqués à des menus principaux plus complexes.

Le menu comprend:

Titre du jeu, bouton Démarrer, bouton Quitter avec des polices personnalisées.

Le bouton Démarrer et quitter change de couleur lorsque vous passez la souris dessus.

Arrière-plan personnalisé.

Étape 1: Faites un plan et placez-le devant la caméra

Ouvrez Unity et enregistrez la scène sous MainMenu.

Cliquez sur Créer - Plan dans le panneau Hiérarchie. Renommez-le "Contexte".

Faites pivoter la caméra principale de 90 degrés vers le bas et changez sa Projection de Perspective en Orthographique.

Ajustez la transformation de la caméra pour qu'elle soit de 8 à 10 unités au-dessus du menu, en regardant directement vers le bas.

Redimensionnez le fond de l'avion pour qu'il s'adapte exactement à l'aperçu de la caméra.

Lorsque vous avez terminé, cela devrait ressembler à l'image ci-dessus.

Étape 2: allumez-le

Ajoutez des lumières. Pour ce faire, sélectionnez Créer dans le panneau Hiérarchie et cliquez sur Lumière directionnelle.

Peu importe où se trouve une lumière directionnelle dans l'espace 3D; il fournira le même éclairage quoi qu'il arrive.

Par conséquent, après avoir ajusté la direction de la lumière pour qu'elle brille sur l'arrière-plan, augmentez la lumière d'environ 20 unités dans la direction Y pour garder votre champ de vision clair dans la vue de la scène.

J'ai ajusté la lumière pour avoir une transformation de (0, 20, 0) position et (60, 0, -20) rotation.

J'ai également changé son intensité à 0, 4.

Encore une fois, voyez l'image à quoi cela devrait ressembler lorsque vous avez terminé l'étape.

Étape 3: ajouter une texture

Notre fond est plutôt simple en ce moment, mais nous pouvons le pimenter assez facilement. Prenez simplement un appareil photo numérique / smartphone et prenez une photo de quelque chose de pratique et intéressant, comme le sol, le plafond, les murs, etc., et téléchargez-le sur votre ordinateur.

Créez un nouveau dossier appelé Textures dans votre dossier Assets pour le projet Unity sur lequel vous travaillez. Cliquez avec le bouton droit sur le dossier dans le panneau Projet dans Unity et sélectionnez "Afficher dans l'Explorateur". Copiez et collez la photo que vous avez prise dans le dossier Textures.

Votre arrière-plan étant sélectionné dans la hiérarchie, cliquez sur l'image et faites-la glisser du dossier Textures du panneau Projet vers le panneau Inspecteur, où elle doit être ajoutée en tant que nouvelle texture pour l'arrière-plan. Voir l'image.

Étape 4: ajouter du texte

Créez un objet de jeu vide à l'aide de la barre d'outils déroulante Objet de jeu en haut de la fenêtre Unity. Renommez-le "Texte". Réinitialisez sa transformation.

Cliquez sur Créer - Texte 3D dans le panneau Hiérarchie. Réinitialisez sa transformation.

Renommez l'objet Texte 3D et entrez le texte que vous souhaitez qu'il affiche dans son composant Text Mesh dans l'inspecteur.

Faites-le pivoter de 90 degrés autour de l'axe X ou Z afin qu'il s'affiche correctement dans la vue de la caméra.

Faites glisser l'objet texte 3D dans l'objet de jeu Texte vide dans la hiérarchie. Être

Dupliquez le texte 3D comme vous le souhaitez.

Étape 5: Allez chercher des polices (que vous avez déjà)

Vous avez déjà beaucoup de polices. Vous pouvez y accéder (sous Windows) en ouvrant l'Explorateur et en accédant au dossier appelé Polices, qui se trouve sous OS / Windows / Polices.

Dans le panneau de projet Unity, créez un nouveau dossier dans Assets et appelez-le également Fonts.

Copiez et collez les polices souhaitées pour votre projet Unity du dossier de polices de votre ordinateur vers le nouveau dossier de polices que vous avez créé dans le dossier Assets de votre projet.

Remarque: Cela copiera très probablement plusieurs fichiers différents pour chaque police, un pour les caractères standard, gras, italique, etc.

Sélectionnez le texte 3D dont vous souhaitez modifier la police dans le panneau Hiérarchie, puis faites glisser la police souhaitée du dossier des polices du panneau de projet vers la zone intitulée "police" du composant Text Mesh de l'inspecteur.

Vous pouvez modifier la couleur, la taille et d'autres attributs de la police dans le composant Text Mesh du texte 3D. Cela apparaîtra dans le panneau Inspecteur, à condition que le texte 3D que vous souhaitez modifier soit sélectionné dans la hiérarchie.

Le texte sera probablement un peu flou. Vous pouvez nettoyer cela en augmentant considérablement la taille de la police, bien que cela perturbe la vue de la caméra à ce stade, vous devrez donc réajuster la caméra et la taille du plan d'arrière-plan.

Étape 6: faites en sorte que le texte change de couleur lorsque vous passez la souris dessus

Créez un nouveau dossier appelé Scripts dans le panneau de projet.

Créez un nouveau script CSharp et appelez-le MouseHover.

Ouvrez le script dans MonoDevelop.

Il y a trois fonctions dans ce script. Le premier indique que le texte est sa couleur d'origine. Le second indique au texte de changer de couleur lorsque la souris le touche et le troisième indique au texte de revenir à sa couleur d'origine une fois que la souris ne survole plus dessus.

 void Start () {renderer.material.color = Color.black; } void OnMouseEnter () {renderer.material.color = Color.red; } void OnMouseExit () {renderer.material.color = Color.black; } 

Ajoutez le script à chaque morceau de texte en le faisant glisser du panneau de projet vers le nom de l'objet texte 3D dans la hiérarchie.

Pour que le script fonctionne, nous devons ajouter des collisionneurs à chacun des morceaux de texte 3D afin que le code sache si la souris les touche ou non.

Pour ajouter un collisionneur, sélectionnez un morceau de texte 3D dans la hiérarchie, accédez au panneau Inspecteur et sélectionnez Ajouter un composant - Physique - Collisionneur de boîtes. Ajoutez le collisionneur de boîtes à chaque morceau de texte et cochez la case "Est un déclencheur".

Testez si vos boutons changent de couleur en cliquant sur le bouton de lecture en haut au milieu de l'écran et en survolant votre souris.

Étape 7: écrire un script pour contrôler les boutons

Créez un nouveau script et appelez-le MainMenu. Classez-le dans votre dossier Scripts et ouvrez-le dans MonoDevelop.

Déclarez les variables booléennes (vrai / faux), une pour chaque bouton que vous souhaitez avoir dans votre menu. J'ai deux boutons, alors j'ai écrit:

 public bool isStart; 
public bool isQuit;

Ensuite, écrivez une fonction appelée OnMouseUp (). Cela s'active lorsque le bouton de la souris est relâché, ce qui est un meilleur moyen d'activer un bouton que OnMouseDown () car il empêche la fonction d'être exécutée à plusieurs reprises tant que le bouton de la souris est maintenu enfoncé.

 void OnMouseUp () {if (isStart) {Application.LoadLevel (1); } if (isQuit) {Application.Quit (); }} 

Application.LoadLevel (1) charge la scène numéro 1 du jeu. (La scène du menu doit être de niveau 0. Vous pouvez changer la scène qui est dans les paramètres de construction, sous Fichier.)

Application.Quit () quitte le jeu, bien que cela ne fasse quelque chose que si le jeu est ouvert en tant qu'application PC / Mac. Rien ne se passera si le jeu fonctionne sous Unity ou en ligne.

Étape 8: faites que les boutons fassent des choses!

Ajoutez le script MainMenu à chacun de vos objets texte 3D servant de boutons.

Parce que vous avez déclaré des bools publics pour chaque catégorie de bouton, ils devraient apparaître dans l'inspecteur pour chaque bouton. Accédez à l'inspecteur et vérifiez la variable booléenne appropriée pour chaque bouton. Voir l'image ci-dessus pour voir à quoi cela devrait ressembler.

Ça y est, vous avez terminé! Vous pouvez ajouter une ligne de code supplémentaire à votre script MainMenu pour vous assurer qu'il fonctionne. Dites-lui simplement de changer la couleur du bouton lorsque vous cliquez dessus (dans une couleur différente de celle que vous survolez).

 void OnMouseUp () {if (isQuit) {Application.Quit (); } if (isStart) {Application.LoadLevel (1); renderer.material.color = Color.cyan; }} 

Articles Connexes