Quels sont les boutons, le texte, les départs, etc. qui peuvent être vus lorsqu'ils jouent à un jeu? Tout cela fait partie de ce qu'on appelle l'interface utilisateur (UI). La plupart des jeux ont une sorte d'interface utilisateur, ce qui permet aux joueurs de basculer plus facilement entre les niveaux et d'activer certains contrôles (comme la pause du jeu ou le redémarrage d'un niveau). Dans un article précédent décrivant comment créer Dodger dans Unity, nous avons créé un petit bouton pour actualiser le jeu si un joueur a perdu.
Dans ce tutoriel, nous allons passer cela au niveau supérieur, et permettre aux utilisateurs de faire une pause ou de redémarrer le jeu et de basculer entre différentes scènes. Nous allons également jeter un œil à la façon de montrer certains éléments d'interface utilisateur qu'à certains moments - comme lorsque le jeu est interrompu ou lorsque le joueur décède / perd.
La plupart des jeux contiennent un menu de pause, un jeu sur l'écran et un menu principal. Étant donné que ce sont quelques-uns des rares éléments nécessaires à un jeu «fini», nous insérerons les trois dans notre clone Dodger. De plus, nous créerons également un écran d'instructions afin que les joueurs puissent apprendre les contrôles qu'ils peuvent utiliser avant de commencer à jouer le jeu.
Le jeu terminé peut être joué sur itch.io.
Un écran de pause a un ensemble commun de commandes que les joueurs sont capables d'utiliser pour redémarrer un niveau, revenir au menu principal ou enrouler le jeu. Les écrans de pause ne doivent être visibles que lorsque le jeu est interrompu. Dans Unity, nous sommes, en général, capables de faire la différence entre un jeu pause et non causé en utilisant Time.Timescale. Si l'échelle de temps est nulle, le jeu est interrompu. S'il est supérieur à zéro, le jeu n'est pas utilisé (nous en discuterons plus tard). Commençons!
Tout d'abord, nous devrons créer un titre qui indique au joueur que le jeu est interrompu. Nous devons créer un objet texte en cliquant avec le bouton droit dans le volet Hiérarchie et en sélectionnant UI -> Texte. Nommez l'objet nouvellement créé PauseText.
Nous devons créer un titre qui indique au joueur que le jeu est interrompu. Nous devons créer un objet texte en cliquant avec le bouton droit dans le volet Hiérarchie et en sélectionnant UI -> Texte. Nommez l'objet nouvellement créé PauseText.
Maintenant, nous pouvons formater l'objet texte pour le faire paraître mieux dans l'écran du jeu. Afin de modifier le texte d'un objet texte, nous devons cliquer dans le volet inspecteur sous l'attribut texte où sont les mots «nouveau texte». À l'intérieur de l'attribut de texte, nous pouvons modifier le texte de notre texte de pause en «pause». Pour rester avec la palette de couleurs pour le jeu, nous devons changer la couleur du texte en blanc. Cela peut être accompli en cliquant sous l'objet couleur (où le noir ou une autre couleur peut être sélectionné) et le choix du blanc.
Ajustez le placement de notre texte. Le texte de pause doit être centré horizontalement sur l'écran et être à environ le tiers supérieur de l'écran de jeu. Le texte de pause peut être déplacé en modifiant les valeurs de x et y à l'intérieur de l'attribut de transformation REct ou en utilisant les flèches à quatre voies dans les commandes de la souris dans le coin supérieur gauche de l'éditeur d'Unity. Si nécessaire ou recherché, nous pouvons également modifier la taille du texte en modifiant la valeur et en modifiant la taille des attributs de largeur et de hauteur (sous la transformée de REct).
Tout ce que nous devons faire maintenant est de marquer l'objet afin que le programme, après avoir ajouté du code, puisse dire que nous voulons que cet objet affiche seulement lorsque le jeu est en pause. Nous pouvons cliquer sous le nom du texte de pause où il dit «non marqué», puis cliquez sur «Ajouter la balise…». Nous pouvons maintenant créer une balise nommée «ShowonPause». Une fois cette balise créée, nous devons l'ajouter au texte de pause.
Puisque nous avons créé le texte de pause et ajouté une nouvelle balise pour les objets de jeu qui devraient apparaître lorsque le jeu est interrompu, nous pouvons commencer à créer les boutons qui composeront le menu de jeu en pause.
Nous créerons trois boutons différents: un bouton de lecture, un bouton de redémarrage et un bouton de menu principal. Le bouton de lecture ne va pas enrouler le jeu, le bouton de redémarrage redémarrera le jeu et le bouton du menu principal ramènera les joueurs sur la scène du menu principal du jeu.
Commençons par créer un nouveau bouton (cliquez avec le bouton droit dans le bouton Hiérarchie -> UI ->) et le nommer "PlayButton". Nous devons définir la balise du bouton de lecture sur ShowonPause afin qu'il ne soit affiché que lorsque le jeu est interrompu. Maintenant, définissons le texte du bouton de lecture sur «Play». Cela peut être fait en ouvrant l'objet Text Child dans l'inspecteur (cliquez sur la liste déroulante à côté du bouton de lecture dans la hiérarchie et sélectionnez l'objet texte) puis modifiant la propriété texte en «lecture». Nous devons aligner le bouton de lecture avec le centre de l'écran afin qu'il soit sous le texte de pause.
Un moyen rapide de créer les deux autres boutons est de sélectionner le bouton de lecture dans la hiérarchie et de le dupliquer (Commande / Ctrl d) deux fois. Nous pouvons nommer les nouveaux boutons «Restartbutton» et «MainMenubutton». Nous devons également donner à chacun des nouveaux boutons le texte approprié. Le bouton de redémarrage doit dire «redémarrer» et le bouton du menu principal doit dire «menu principal». Maintenant, supprimons le bouton Rafraîchissement qui a été créé dans le dernier tutoriel. Nous pouvons voir maintenant que nous avons un menu de pause de base. Cependant, le menu ne fait rien parce que nous n'avons joint aucun code aux objets.
Ouvrir le script Uimanager qui a été créé dans le dernier tutoriel. Nous devons modifier notre script Uimanager afin qu'il ressemble au code ci-dessous.
GameObject<span>[] pauseObjects;
</span>
<span>// Use this for initialization
</span> <span>void Start () {
</span> Time<span>.timeScale = 1;
</span> pauseObjects <span>= GameObject.FindGameObjectsWithTag("ShowOnPause");
</span> <span>hidePaused();
</span> <span>}
</span>
<span>// Update is called once per frame
</span> <span>void Update () {
</span>
<span>//uses the p button to pause and unpause the game
</span> <span>if(Input.GetKeyDown(KeyCode.P))
</span> <span>{
</span> <span>if(Time.timeScale == 1)
</span> <span>{
</span> Time<span>.timeScale = 0;
</span> <span>showPaused();
</span> <span>} else if (Time.timeScale == 0){
</span> Debug<span>.Log ("high");
</span> Time<span>.timeScale = 1;
</span> <span>hidePaused();
</span> <span>}
</span> <span>}
</span> <span>}
</span>
<span>//Reloads the Level
</span> public <span>void Reload(){
</span> Application<span>.LoadLevel(Application.loadedLevel);
</span> <span>}
</span>
<span>//controls the pausing of the scene
</span> public <span>void pauseControl(){
</span> <span>if(Time.timeScale == 1)
</span> <span>{
</span> Time<span>.timeScale = 0;
</span> <span>showPaused();
</span> <span>} else if (Time.timeScale == 0){
</span> Time<span>.timeScale = 1;
</span> <span>hidePaused();
</span> <span>}
</span> <span>}
</span>
<span>//shows objects with ShowOnPause tag
</span> public <span>void showPaused(){
</span> <span>foreach(GameObject g in pauseObjects){
</span> g<span>.SetActive(true);
</span> <span>}
</span> <span>}
</span>
<span>//hides objects with ShowOnPause tag
</span> public <span>void hidePaused(){
</span> <span>foreach(GameObject g in pauseObjects){
</span> g<span>.SetActive(false);
</span> <span>}
</span> <span>}
</span>
<span>//loads inputted level
</span> public <span>void LoadLevel(string level){
</span> Application<span>.LoadLevel(level);
</span> <span>}
</span>Maintenant que nous avons le code dont nous avons besoin accessible dans le script Uimanager, nous pouvons revenir à Unity. À l'intérieur d'Unity, sélectionnons le bouton de lecture et attachons la méthode PauseControl. Pour ce faire, nous pouvons sélectionner le bouton de lecture et faire glisser l'objet de jeu Uimanager sur l'espace de l'objet de jeu sous l'attribut onClick () dans le volet Inspector. Avec l'objet de jeu Uimanager ajouté, nous pouvons maintenant utiliser la deuxième liste déroulante pour sélectionner la fonction PauseControl (Uimanager -> PauseControl).
En utilisant les mêmes étapes, nous pouvons ajouter la méthode Recharger () au bouton Redémarrer et la méthode LoadLevel () au bouton du menu principal. Étant donné que la méthode LoadLevel () prend un paramètre de chaîne, nous devons taper «MainMenu» dans la boîte sous la liste déroulante de la fonction.
Si nous frappons le jeu maintenant, nous remarquerons que les boutons de jeu et de redémarrage fonctionnent. De plus, si nous frappons P pendant que le jeu joue, nous pouvons faire une pause et inaugurer le jeu. Le seul problème est que le bouton du menu principal ne fonctionne pas. En effet
Création d'une scène de menu principaleTout d'abord, nous devons enregistrer la scène actuelle dans laquelle nous travaillons afin que le travail que nous ayons fait ne soit pas supprimé lorsque nous en ouvrirons un nouveau. Créons une nouvelle scène (commande / ctrl n ou fichier -> nouvelle scène). Une fois la scène ouverte, enregistrez-la et nommez-la «MainMenu».
Remarque: nous le nommons "MainMenu" car c'est la propriété String sur laquelle nous définissons le bouton du menu principal dans la scène de lecture. Si nous voulions un nom différent, nous pourrions modifier la propriété String de la fonction LoadLevel () attachée au bouton du menu principal dans la scène de lecture.
Maintenant que la scène a été sauvée, nous pouvons commencer à y travailler. Commençons par sélectionner l'objet de jeu de l'appareil photo principal et changer son arrière-plan par la même couleur que dans la scène de jeu (R: 0, G: 223, B: 255).
Pour cette scène, nous devrons pouvoir accéder à la méthode LoadLevel () à l'intérieur du script Uimanager. Cela signifie que nous devons créer un objet de jeu Uimanager et y attacher le script Uimanager afin que nous puissions ajouter la fonction à notre bouton.
Créons un objet de jeu vide (cliquez avec le bouton droit dans la hiérarchie -> Créez vide) et nommez-le Uimanager. Maintenant, nous pouvons ajouter le script Uimanager à l'objet de jeu Uimanager.
Nous pouvons commencer à créer le menu simple qui contiendra le texte qui indique «Dodger» et un bouton de lecture. Nous commencerons par créer le texte (clic droit dans la hiérarchie -> UI -> texte) et le nommer "titleText". Nous devons changer le texte pour dire «Dodger» et l'aligner sur le centre de l'écran, un peu vers le haut. Définissons maintenant la couleur du texte du titre sur blanc.
Avec le texte créé et édité, nous pouvons créer un nouveau bouton et le nommer "PlayButton". Nous devons modifier le texte de l'objet enfant du bouton de lecture pour «jouer». Enfin, ajoutons l'objet de jeu Uimanager à l'attribut onClick () du bouton et choisissons la fonction LoadLevel (). Le paramètre de la fonction LoadLevel () dépend du nom de la scène de jeu du dernier tutoriel. Nous pouvons trouver le nom de la scène de jeu en trouvant la scène dans le volet Assets.
Si nous exécutons le jeu et appuyons sur le bouton de lecture, nous remarquerons que le bouton ne fonctionne pas. La raison en est la même que lorsque le bouton du menu principal n'a pas fonctionné dans notre scène de jeu: nous n'avons pas ajouté la scène MainMenu aux paramètres de construction. Pour ajouter notre scène actuelle aux paramètres de construction, nous pouvons ouvrir les paramètres de construction (fichier -> Paramètres de construction) et cliquer sur Ajouter le courant.
Pour que le jeu soit considéré comme «fini», il doit avoir un jeu sur l'écran afin que les joueurs puissent dire quand ils auront perdu. Nous allons également ajouter un compteur de score au jeu, afin que les joueurs sachent à quel point ils ont marqué.
Nous devons sauver notre scène actuelle et ouvrir la scène de jeu. Avec la scène de jeu ouverte, nous pouvons créer un objet texte et le nommer «scoreText». L'objet texte de score doit être aligné en haut de l'écran. Avec l'objet texte de score sélectionné, nous pouvons y ajouter une ancre d'étirement supérieure en regardant dans la propriété RECT Transforment et en cliquant sur le menu d'ancrage. Nous devons également centrer le texte et le rendre blanc.
La condition que nous utiliserons pour mettre à jour le score sera des blocs qui sortent de l'écran (ce qui signifie que les blocs que le joueur a déjà esquivés). Pour que cette condition soit active, nous devrons vérifier l'écran de la collision des blocs et incrémenter une variable pour le score.
Créons un objet de jeu vide et nommez-le "Bottomborter". Nous ajoutons un BoxCollider2d à la bordure inférieure et définissons la taille X sur un grand nombre qui dépasse légèrement les bordures de la caméra. Maintenant, nous pouvons ajouter un RigidBody2d à l'objet de bordure inférieure et définir l'attribut de l'échelle de gravité sur 0 afin que l'objet de bordure inférieure ne tombe pas. Nous pouvons aligner l'objet de bordure inférieur légèrement en dessous du joueur en s'assurant qu'il est hors écran.
Nous devons créer un nouveau script afin de définir un score pour le lecteur. Créons un nouveau script C # nommé «PointCounter» à l'intérieur de notre dossier Scripts. Une fois le script PointCounter créé, nous pouvons l'ouvrir dans notre IDE et Type:
GameObject<span>[] pauseObjects;
</span>
<span>// Use this for initialization
</span> <span>void Start () {
</span> Time<span>.timeScale = 1;
</span> pauseObjects <span>= GameObject.FindGameObjectsWithTag("ShowOnPause");
</span> <span>hidePaused();
</span> <span>}
</span>
<span>// Update is called once per frame
</span> <span>void Update () {
</span>
<span>//uses the p button to pause and unpause the game
</span> <span>if(Input.GetKeyDown(KeyCode.P))
</span> <span>{
</span> <span>if(Time.timeScale == 1)
</span> <span>{
</span> Time<span>.timeScale = 0;
</span> <span>showPaused();
</span> <span>} else if (Time.timeScale == 0){
</span> Debug<span>.Log ("high");
</span> Time<span>.timeScale = 1;
</span> <span>hidePaused();
</span> <span>}
</span> <span>}
</span> <span>}
</span>
<span>//Reloads the Level
</span> public <span>void Reload(){
</span> Application<span>.LoadLevel(Application.loadedLevel);
</span> <span>}
</span>
<span>//controls the pausing of the scene
</span> public <span>void pauseControl(){
</span> <span>if(Time.timeScale == 1)
</span> <span>{
</span> Time<span>.timeScale = 0;
</span> <span>showPaused();
</span> <span>} else if (Time.timeScale == 0){
</span> Time<span>.timeScale = 1;
</span> <span>hidePaused();
</span> <span>}
</span> <span>}
</span>
<span>//shows objects with ShowOnPause tag
</span> public <span>void showPaused(){
</span> <span>foreach(GameObject g in pauseObjects){
</span> g<span>.SetActive(true);
</span> <span>}
</span> <span>}
</span>
<span>//hides objects with ShowOnPause tag
</span> public <span>void hidePaused(){
</span> <span>foreach(GameObject g in pauseObjects){
</span> g<span>.SetActive(false);
</span> <span>}
</span> <span>}
</span>
<span>//loads inputted level
</span> public <span>void LoadLevel(string level){
</span> Application<span>.LoadLevel(level);
</span> <span>}
</span>Le script PointCounter doit être ajouté à l'objet de jeu de bordure inférieur de sorte qu'une fois qu'un bloc entreprend, le bloc sera détruit et le score mis à jour.
Maintenant, créons un script nommé "PointupDater" qui mettra à jour le texte du score. Nous pouvons ouvrir le script PointupDater dans notre IDE et Type:
public <span>int score;
</span>
<span>// Use this for initialization
</span> <span>void Start () {
</span> score <span>= 0;
</span> <span>}
</span>
<span>// Update is called once per frame
</span> <span>void Update () {
</span>
<span>}
</span>
<span>//checks for entering a trigger
</span> <span>void OnTriggerEnter2D(Collider2D other){
</span> <span>//checks other collider's tag
</span> <span>if(other.gameObject.tag == "Enemy"){
</span> score<span>++; //increments score
</span> <span>Destroy (other.gameObject); //destroys other collider's gameobject
</span> <span>}
</span> <span>}
</span>Nous devons ajouter le script PointupDater à l'objet Score Text Game. L'objet de jeu de bordure inférieur doit être ajouté à la valeur du compteur de points afin que le score puisse être mis à jour.
Pour terminer le jeu, nous devons ajouter un menu de jeu sur qui apparaîtra lorsque le joueur sera mort.
Ouvrez le script PlayerController dans notre IDE et en dessous de la dernière déclaration variable Ajouter:
public PointCounter pointCounter<span>;
</span> <span>// Use this for initialization
</span> <span>void Start () {
</span> text <span>= gameObject.GetComponent<Text>();
</span> text<span>.text = "Score: 0";
</span> <span>}
</span>
<span>// Update is called once per frame
</span> <span>void Update () {
</span> text<span>.text = "Score: " + pointCounter.score.ToString();
</span>
<span>}
</span>à l'intérieur du script EnemyController Ajoutez:
public bool alive<span>;
</span> <span>// Use this for initialization
</span> <span>void Start () {
</span> alive <span>= true;
</span> <span>}
</span>Pour commencer à éliminer le menu, nous pouvons créer un nouvel objet de jeu de texte et le nommer "GameoverText". Le texte doit être défini sur «Give Over» et la couleur du texte doit être blanche. Nous devons aligner le jeu sur le texte pour être légèrement au-dessus du centre de l'écran. Pour nous assurer que ce menu n'apparaîtra que lorsque le joueur sera mort, nous devons créer une nouvelle étiquette nommée «Showonfinish» et l'ajouter au jeu sur le texte.
Maintenant, duplicatons les boutons de redémarrage et de menu principal. Nous devons renommer les boutons de «Finrestartbuton» et «FinmainMenubutton» et ajouter la balise Showonfinish aux deux boutons.
Enfin, ouvrons le script Uimanager dans notre IDE et modifiez-le afin qu'il ressemble au code ci-dessous.
<span>void OnTriggerEnter2D(Collider2D other){
</span>
<span>//Checks if other gameobject has a Tag of Player
</span> <span>if(other.gameObject.tag == "Player"){
</span> other<span>.gameObject.GetComponent<PlayerController>().alive = false;
</span> Time<span>.timeScale = 0;
</span> <span>}
</span><span>}
</span> 
Nous avons maintenant ajouté une interface utilisateur simple à notre jeu. Les joueurs pourront désormais se déplacer à travers les deux scènes à l'aide des boutons. Nous avons également acquis de l'expérience dans le développement de l'unité modulaire et le codage sec (ne vous répliquez pas-vous-même). La façon dont nous avons créé le texte du score est un bon exemple de la façon dont le code d'unité doit être divisé afin qu'il soit recyclable.
Questions? Commentaires? Veuillez les laisser ci-dessous!
Le projet fini peut être téléchargé à partir de GitHub.
Ajouter un bouton de pause dans Unity consiste à créer un bouton d'interface utilisateur et à y attacher un script qui contrôle l'échelle de temps du jeu. L'échelle de temps est un multiplicateur mondial qui affecte la vitesse à laquelle le temps de jeu progresse. En le définissant sur zéro, vous suscitez efficacement le jeu. Le script attaché au bouton Pause doit inclure une fonction qui bascule l'échelle de temps entre 1 (vitesse normale) et 0 (pause) lorsque le bouton est cliqué.
La création d'un menu principal dans Unity consiste à créer une nouvelle scène qui servira de menu. Cette scène doit inclure des éléments d'interface utilisateur comme des boutons qui permettent au joueur de démarrer le jeu, d'ajuster les paramètres ou de quitter. Chaque bouton doit avoir un script joint qui effectue l'action appropriée lors du clic. Par exemple, le script du bouton Démarrer peut charger la scène du jeu, tandis que le script du bouton de quitter peut fermer l'application.
Ajout d'un jeu sur L'écran dans l'unité est similaire à l'ajout d'un menu principal. Vous devrez créer une nouvelle scène qui servira de jeu sur l'écran, avec des éléments d'interface utilisateur qui offrent des options pour le lecteur, comme le redémarrage du jeu ou le retour au menu principal. Ces éléments devraient avoir des scripts attachés qui effectuent les actions appropriées lorsqu'ils cliquent.
La transition entre les scènes de l'unité peut être accomplie en utilisant la classe SceneManager. Cette classe offre des fonctions pour le chargement et le déchargement des scènes, ainsi que pour interroger des informations sur la scène actuelle. Pour passer à une nouvelle scène, vous pouvez utiliser la fonction SceneManager.Loadscene, en passant le nom ou l'index de la scène que vous souhaitez charger.
Unity offre une variété d'options pour personnaliser l'apparence des éléments d'interface utilisateur. Vous pouvez ajuster les propriétés telles que la couleur, la taille et la position directement dans l'éditeur d'Unity. Pour une personnalisation plus avancée, vous pouvez utiliser les puissantes capacités d'animation du système d'interface utilisateur, ou même créer vos propres composants d'interface utilisateur personnalisés en étendant les classes existantes.
L'ajout d'effets sonores aux éléments d'interface utilisateur dans Unity peut être accompli en attachant un composant Audiosource à l'élément et en le configurant pour lire un son lorsque l'élément interagit avec. Par exemple, vous pouvez configurer un bouton pour lire un son de clic lorsqu'il est enfoncé.
Le système d'interface utilisateur d'Unity comprend une fonctionnalité appelée SCALER Canvas qui facilite la création de l'interface utilisateur qui évolue et s'ajuste à différentes tailles d'écran. En définissant le mode d'échelle d'interface utilisateur du scalmer Canvas sur «Échec avec la taille de l'écran», vous pouvez vous assurer que vos éléments d'interface utilisateur conservent une taille et une disposition cohérentes sur différents appareils.
Tester votre interface utilisateur dans Unity peut être effectué directement dans l'éditeur d'Unity. La vue du jeu fournit un aperçu en temps réel de votre jeu, y compris tous les éléments d'interface utilisateur. Vous pouvez interagir avec votre interface utilisateur dans la vue du jeu comme un joueur le ferait dans le jeu réel, vous permettant de tester les fonctionnalités et de vérifier tous les problèmes.
L'optimisation de votre interface utilisateur pour les performances dans l'unité peut impliquer une variété de stratégies, telles que la minimisation de l'utilisation de graphiques complexes, d'éviter les mises à jour inutiles et d'utiliser le scalmer en toile pour réduire la résolution de votre interface utilisateur sur des appareils bas de gamme. L'outil de profileur d'Unity peut être une ressource précieuse pour identifier les goulots d'étranglement des performances dans votre interface utilisateur.
Unity fournit une documentation approfondie sur son système d'interface utilisateur, y compris les didacticiels, Références API et meilleures pratiques. De plus, il existe de nombreuses communautés et ressources en ligne où vous pouvez apprendre des autres développeurs d'unités, tels que les forums Unity, Stack Overflow et divers sites Web de tutoriels.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
types de données de base Java
Que signifie le réseau maillé ?
Introduction à la méthode d'interception de chaînes en js
tutoriel pascal
La différence entre la balise d'article et la balise de section
Comment restaurer les données du serveur
Comment résoudre le problème de l'impossibilité de créer un nouveau dossier dans Win7
Comment configurer un VPS sécurisé
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
