Share
Il existe plusieurs méthodes pour créer des menus dans Unity, les deux principales étant le système à interface graphique intégré et l'utilisation de GameObjects avec Colliders qui répondent aux interactions avec la souris. Le système d’interface graphique de Unity peut être difficile à utiliser. Nous allons donc utiliser l’approche GameObject qui, je pense, est également un peu plus amusante pour ce que nous essayons de réaliser ici..
Avant de concevoir un menu, vous devez toujours déterminer la résolution à laquelle vous allez le servir..
Ouvrez les paramètres du lecteur via le menu principal, Edition> Paramètres du projet> Lecteur, puis entrez vos valeurs de largeur et de hauteur d'écran par défaut dans l'inspecteur. J'ai choisi de laisser le mien comme valeur par défaut 600x450px comme indiqué ci-dessous.
Vous devez ensuite ajuster la taille de votre vue de jeu de "Aspect libre" par défaut à "Web (600 x 450)", sinon vous pourriez positionner vos éléments de menu hors de l'écran..
Comme vous l'aurez vu dans l'aperçu, notre menu aura notre environnement de jeu en arrière-plan. Ainsi, lorsque vous cliquerez sur Lecture, vous entrerez de manière transparente dans le jeu..
Pour ce faire, vous devez positionner votre lecteur quelque part dans la scène où vous aimez l’arrière-plan et arrondir la valeur de rotation Y. C’est pourquoi il est plus facile de se rappeler et de reproduire plus tard, de sorte que la transition puisse être transparente du menu au jeu..
Passons maintenant à la création de la scène de menu!
Assurez-vous que votre scène est enregistrée et s'appelle "jeu" - vous verrez pourquoi plus tard.
Sélectionnez la scène du jeu dans la vue Projet et dupliquez-la à l'aide de Ctrl / Commande + D, puis renommez la copie en "menu" et double-cliquez dessus pour l'ouvrir..
Remarque: vous pouvez confirmer quelle scène est ouverte en consultant le haut de l'écran. Il devrait indiquer quelque chose comme "Unity - menu.unity - ProjectName - Web Player / Stand Alone". Vous ne voulez pas supprimer des parties accidentellement de votre scène de jeu!
Maintenant, sélectionnez et supprimez la GUI et les GameObjects PickupSpawnPoints de la hiérarchie. Développez le "Lecteur" et faites glisser la "Caméra principale" afin qu'il ne soit plus un enfant du Lecteur, puis supprimez le Lecteur..
Ensuite, sélectionnez le terrain et supprimez le composant Terrain Collider en cliquant avec le bouton droit de la souris et en sélectionnant Supprimer le composant..
Enfin, sélectionnez "Caméra principale" et supprimez le composant MouseLook en cliquant avec le bouton droit de la souris et en sélectionnant Supprimer le composant..
Si vous lancez le jeu maintenant, rien ne devrait se passer et vous ne devriez pas pouvoir bouger du tout. Si vous pouvez déplacer ou faire pivoter puis refaire les étapes ci-dessus.
Actuellement, lorsque vous construisez ou jouez votre jeu, le seul niveau inclus dans cette construction est la scène "jeu". Cela signifie que la scène de menu n'apparaîtra jamais. Pour que nous puissions tester notre menu, nous allons ajuster les paramètres de construction maintenant.
Dans le menu supérieur, sélectionnez Fichier> Paramètres de construction et faites glisser la scène de menu de votre vue Projet dans la liste "Scènes en construction" des paramètres de construction, comme indiqué ci-dessous.
(Assurez-vous de réorganiser les scènes pour placer "menu.unity" en haut, de sorte que ce soit la scène chargée en premier lorsque le jeu est joué.)
Parfait!
Nous allons utiliser du texte en 3D pour notre menu, alors allez-y et créez un objet en texte 3D GameObject via le menu du haut: GameObject> Créer un autre> Texte en 3D, puis renommez-le "PlayBT". Réglez la rotation Y du texte PlayBT sur la rotation Y de votre caméra principale afin qu’elle soit directement tournée vers elle et donc facilement lisible..
Lorsque PlayBT est sélectionné, modifiez la propriété de texte Text Mesh de Hello World en "Lecture", réduisez la taille du caractère à 0,1 et augmentez la taille de la police à 160 pour rendre le texte plus net..
Remarque: Si vous souhaitez utiliser une police autre que la police par défaut, sélectionnez-la avant de créer le texte 3D ou faites-la glisser sur la propriété Font de TextMesh du 3DText, puis faites glisser le "Matériau de la police" dans la liste Matériaux de rendu du mailleur, en écrasant le matériel de police existant. Je sais pas mal de tracas!
Enfin, ajoutez un Box Collider via le menu du haut: Composant> Physique> Box Collider. Redimensionner le collisionneur de boîtes pour qu'il s'adapte au texte s'il ne s'adapte pas bien.
À ce stade du didacticiel, vous devez réellement avoir les vues de la scène et de jeu ouvertes en même temps, car vous allez maintenant déplacer le PlayBT dans la vue de la scène afin qu'il soit centré dans votre vue de jeu, comme indiqué ci-dessous. Je recommande tout d'abord de le positionner horizontalement à l'aide d'une vue de haut en bas, puis de revenir à l'utilisation d'une vue en perspective pour le positionner verticalement à l'aide des poignées d'axe.
Voilà donc notre bouton de lecture tout configuré. Maintenant faisons-le jouer!
Créez un nouveau script JavaScript dans votre dossier de scripts, renommez-le "MenuMouseHandler" et ajoutez-le en tant que composant du GameBb GameObject en le faisant glisser directement sur PlayBT ou en sélectionnant PlayBT et en le faisant glisser sur son inspecteur..
Remplacez le code par défaut par ce qui suit:
Accentsconagua
/ ** Mouse Down Handler * / function OnMouseDown () // si nous avons cliqué sur le bouton de lecture if (this.name == "PlayBT") // charger le jeu Application.LoadLevel ("game"); Nous utilisons la fonction MonoBehaviour OnMouseDown (…), invoquée chaque fois que l'utilisateur clique sur BoxCollider avec la souris. Nous vérifions si le bouton cliqué s'appelle "PlayBT", et si c'est le cas, nous utilisons Application.LoadLevel (…) pour charger la scène "game".
Assez parlé - lancez-vous et regardez votre jeu prendre vie lorsque vous cliquez sur Jouer!
Remarque: Si vous cliquez sur Play et que vous vous êtes trouvé avec une erreur de configuration, ne vous inquiétez pas; il vous suffit de vérifier vos paramètres de construction - passez à l'étape 4.
Donc le menu pour démarrer le jeu est génial mais le jeu techniquement ne se termine jamais car lorsque le temps imparti est écoulé, rien ne se passe… corrigeons cela maintenant..
Ouvrez le script CountdownTimer et au bas de la Cocher() function ajoute la ligne suivante:
Application.LoadLevel ("menu"); Maintenant, relancez votre jeu et lorsque le temps imparti sera écoulé, vous serez ramené au menu! Peasy facile!
On y va - un menu de base ajouté à notre jeu. Rendons-le un peu plus convivial avec un écran d’aide expliquant comment jouer..
Le bouton d’aide est identique au PlayBT dans presque tous les sens. Continuez, dupliquez le PlayBT, renommez-le en HelpBT et positionnez-le sous le bouton Play. Ajuste le texte propriété à dire "Aide" plutôt que "Lecture" et peut-être rendre la taille de la police un peu plus petite comme indiqué ci-dessous - j'ai utilisé 100.
Maintenant, ouvrez le script MenuMouseHandler et ajoutez ce qui suit sinon si bloquer à votre existant si déclaration.
// si nous avons cliqué sur le bouton d'aide sinon si (this.name == "HelpBT") // faites pivoter la caméra pour afficher l'aide "page"
Si vous vérifiez l'aperçu, vous verrez que lorsque vous cliquez sur Aide, la caméra pivote pour afficher le menu d'aide. Alors, comment faisons-nous cela?
Grâce à iTween, la rotation de notre caméra peut être parfaitement réalisée en une seule ligne. Sans iTween, la vie ne serait pas aussi amusante. Comme son nom l'indique, c'est un moteur d'interpolation, conçu pour Unity. C'est aussi gratuit.
Allez-y et ouvrez iTween dans le magasin Unity Asset, puis cliquez sur Télécharger / Importer et importez tout dans votre projet. Une fois importé, vous devez déplacer le iTween / Plugins répertoire à la racine de votre Les atouts dossier.
Vous êtes maintenant prêt à vous séparer de votre vie!
Prenez un morceau de papier et un stylo (ou ouvrez un document vierge) et notez la valeur de rotation Y de votre caméra principale, comme indiqué ci-dessous..
Dans la vue de la scène, faites pivoter la caméra dans la direction de votre choix autour de l'axe des Y afin que le texte Lecture et Aide ne soit pas visible et que vous disposiez d'un arrière-plan correct pour votre page d'aide. Vous pouvez voir le mien ci-dessous: Je suis passé de -152 à -8.
Revenez à votre script MenuMouseHandler et ajoutez la ligne suivante dans la liste. sinon si déclaration:
iTween.RotateTo (Camera.main.gameObject, Vector3 (0, -8, 0), 1.0);
Nous utilisons Camera.main pour récupérer la caméra principale (définie par la balise "MainCamera") de la scène et utilisons iTween.RotateTo (…) pour faire pivoter la caméra à un angle spécifique - dans mon cas -8.
(Vous devez remplacer le -8 dans la ligne ci-dessus avec la rotation actuelle de votre caméra.)
Revenez maintenant à votre scène et ramenez votre caméra à sa rotation initiale que vous avez notée au début de cette section, de sorte qu'elle se trouve face au PlayBT. Lancez votre jeu, cliquez sur Aide et la caméra devrait pivoter. Courtiser!
Remarque: Si vous obtenez une erreur indiquant que iTween n’existe pas, vous ne l’avez pas importée correctement. Consultez l'étape 9..
Construisons maintenant notre page d'aide.
Faites pivoter votre caméra pour revenir à la rotation Y de votre page d'aide - dans mon cas -8.
Nous allons maintenant ajouter un petit texte d’explication, ainsi qu’un texte supplémentaire, pour expliquer les différents capteurs et leurs partitions. Enfin, nous ajouterons un bouton Précédent pour revenir au menu principal. Vous pouvez organiser votre page comme bon vous semble, alors n'hésitez pas à faire preuve de créativité. Et c'est parti…
Dupliquez le HelpBT, renommez-le HelpHeader, réglez sa rotation sur celle de votre appareil photo, changez la valeur d'ancrage en "centre supérieur" et réduisez la taille de la police. J'ai utilisé 60.
Ensuite, copiez et collez le paragraphe ci-dessous dans le texte propriété:
"Collectionne autant de cubes que possible dans le délai imparti.
Attention, ils changent avec le temps!
Remarque: Il est intéressant de noter que vous ne pouvez pas taper de texte multiligne dans la propriété text. vous devez le taper dans un autre programme, puis le copier et le coller, car appuyer sur entrée / retour assigne le champ.
Enfin, supprimez les composants Box Collider et MenuMouseHandler dans l'inspecteur, car il n'est pas nécessaire que ce texte soit cliquable. J'espère que vous vous retrouverez avec quelque chose comme ceci:
Faites maintenant glisser un préfabriqué dans la scène et positionnez-le à l'écran. Je mets le mien comme indiqué ci-dessous.
Ensuite, dupliquez HelpHeader, renommez-le HelpPowerups, changez l'ancre en "en haut à gauche" et copiez et collez le paragraphe ci-dessous dans le champ de texte..
"Vert: + 2 points
Rose: +/- Points Aléatoires
Bleu: Augmentation de la vitesse aléatoire "
Repositionnez-le pour avoir quelque chose comme ci-dessous.
Il ne reste plus qu’à ajouter un bouton Précédent pour revenir au menu principal..
Dupliquez le HelpBT, renommez-le BackBT, changez son texte en "Back", réglez sa rotation sur celle de votre caméra et utilisez la vue Scène pour le repositionner dans la vue du jeu. J'ai placé le mien dans le coin inférieur, comme indiqué ici:
Nous devons maintenant mettre à jour notre script MenuMouseHandler pour gérer les clics de souris à partir du BackBT. Ajouter ce qui suit sinon si bloquer au bas de la OnMouseDown () si déclarations:
// si nous avons cliqué sur le bouton Précédent sinon si (this.name == "BackBT") // faites pivoter l'appareil photo pour afficher le menu "page" iTween.RotateTo (Camera.main.gameObject, Vector3 (0, -152, 0), 1,0);
Ceci est presque identique à la déclaration iTween précédente, la seule différence étant l’angle de rotation de la caméra. - -152 dans mon cas. Vous devez remplacer ce nombre par la rotation Y de votre appareil photo d'origine (celle que vous avez notée, vous vous en souvenez?)
Désormais, tout ce dont vous avez besoin est de ramener votre caméra à sa rotation initiale - la valeur que vous venez d'ajouter à la déclaration iTween - pour qu'elle soit de nouveau face au menu principal..
Lancez le jeu et votre caméra doit tourner pour révéler la page d’aide et revenir au menu principal. Félicitations, vous avez terminé!
J'espère que vous avez apprécié cette session de démarrage avec Unity Session!
Dans cette partie, nous avons traité de l’utilisation de GameObjects en tant qu’éléments de menu et de la bibliothèque de tween extrêmement puissante, iTween..
Si vous souhaitez relever un défi supplémentaire, essayez d’utiliser iTween pour modifier la couleur du texte sur MouseOver, puis de nouveau sur MouseExit. (Vous trouverez une liste des gestionnaires de souris sur cette page.)
Ou ajoutez un iTween CameraFade, puis fondez-le lorsque le temps imparti est écoulé., puis chargez ensuite le menu - plutôt que de terminer brusquement la partie. Vous pouvez alors retarder l'appel à Application.LoadLevel (…) en utilisant rendement WaitForSeconds (…).
Faites-moi savoir comment vous vous en sortez dans les commentaires!
