Comment concevoir et coder une barre de santé dans Unity3D

Pionnier dans certains des premiers jeux vidéo au monde, la santé est un mécanisme commun qui persiste dans de nombreux titres les plus populaires d’aujourd’hui. La santé permet d’utiliser des mécanismes de combat complexes, de créer une progression de joueur et de rendre votre jeu plus intuitif. Mais comment ajouter un système de santé à vos propres jeux ?

Unity3D facilite l’ajout d’éléments d’interface utilisateur 2D aux jeux 3D, c’est donc un excellent endroit pour commencer à explorer les barres de santé pour la première fois.

Ce que vous apprendrez

En surface, ce projet peut ne pas sembler compliqué. Malgré cela, vous devrez comprendre plusieurs concepts clés de codage Unity3D pour créer une barre de santé fonctionnelle. Cela signifie qu’il y a beaucoup à apprendre au cours de ce projet, notamment :

• Comment créer des éléments/sprites d’interface utilisateur 2D dans Unity3D.
• Comment éditer des composants d’objets de jeu avec du code.
• Comment partager des variables entre des scripts dans Unity3D.

Étape 1 : Configurez votre scène

Avant de pouvoir commencer à coder votre barre de santé, vous avez besoin d’une scène avec un modèle de joueur auquel elle s’applique. Pour commencer, vous pouvez suivre notre guide de contrôleur de personnage Unity3D basé sur la physique pour créer un modèle de joueur avec des commandes de base.

Avec une scène et un modèle de joueur en place, il est temps d’ajouter un élément d’interface utilisateur. Cliquez avec le bouton droit dans la fenêtre Hiérarchie et sélectionnez UI > Image . Cela créera deux nouveaux éléments dans votre hiérarchie : un objet parent Canvas et un objet enfant Image. Remplacez le nom de l’objet enfant par Healthbar. Choisissez une largeur, une hauteur et une position pour votre barre de santé à l’aide de l’inspecteur.

Vous pouvez ajouter une image d’interface utilisateur légèrement plus grande avec sa couleur définie sur le noir pour servir d’arrière-plan/de bordure pour la barre de santé. Assurez-vous simplement qu’il se trouve au-dessus de la barre de santé dans la hiérarchie afin qu’il s’affiche derrière.

Cet élément d’interface utilisateur fonctionne comme la base de votre barre de santé, mais vous avez également besoin d’un sprite en place pour l’animer. Accédez au volet Projet, cliquez avec le bouton droit de la souris et sélectionnez Créer > 2D > Sprites > Carré .

Sélectionnez la barre de santé dans la hiérarchie et faites glisser le sprite que vous venez de créer dans la zone de sélection de l’image source à l’intérieur de l’inspecteur. Vous pouvez également modifier Type d’image sur Rempli, Méthode de remplissage sur Horizontal et Remplir l’origine sur Gauche. Maintenant, si vous lancez votre jeu et utilisez le curseur Fill Amount , vous devriez voir votre barre de santé diminuer et augmenter.

Étape 2 : Ajouter une variable de santé

Il ne servirait à rien de créer une barre de santé sans une variable de santé en place pour dicter son état. D’autres scripts doivent pouvoir accéder à cette variable, et il est logique de la placer quelque part au centre. Ajoutez-le au script Character Control en tant que flotteur public :

public float playerHealth = 1.0f;


L’utilisation d’un flottant pour cette variable signifie que vous pouvez facilement représenter n’importe quel pourcentage de 0 à 100, pour correspondre à la variable Fill Amount de l’image de l’interface utilisateur de la barre de santé. Par exemple, un playerHealth de 0.5f correspond à 50% de la largeur de la barre de santé.

Étape 3 : partager des variables entre des scripts dans Unity

Les variables fonctionnent généralement dans leurs propres fonctions et scripts. Cela les rend inaccessibles à partir d’autres fonctions et scripts à moins que vous ne preniez des mesures pour indiquer au code où trouver les variables avec lesquelles vous souhaitez travailler.

Commencez par créer un nouveau fichier de script appelé Health pour héberger le code. Vous pouvez faire glisser et déposer ce script sur l’élément d’interface utilisateur Healthbar créé à la première étape. Le code suivant va dans la fonction void Update().

Ce processus commence par trouver l’objet de jeu qui possède la variable. Dans ce cas, il s’agit de l’objet Character_Model :

GameObject Character_Model = GameObject.Find("Character_Model");


Ensuite, il est temps de trouver le composant de script qui contient la variable avec laquelle vous devez travailler.

Character_Control character_Control = Character_Model.GetComponent();


Et, enfin, vous pouvez extraire la variable spécifique que vous recherchez. Dans ce cas, il s’agit de la variable playerHealth que vous avez ajoutée à votre contrôleur de personnage. Affectez-le à une variable flottante dans le script actuel appelé currentHealth.

currentHealth = character_Control.playerHealth;


Il suffit de quelques lignes de code pour obtenir la variable dont vous avez besoin, et vous pouvez appliquer cette méthode chaque fois que vous avez besoin d’accéder à la santé de votre joueur. Votre code devrait ressembler à ceci une fois que vous avez terminé :

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


public class Health: MonoBehaviour
{
    public float currentHealth;

    void Update()
    {
        GameObject Character_Model = GameObject.Find("Character_Model");
        Character_Control character_Control = Character_Model.GetComponent();
        currentHealth = character_Control.playerHealth;
    }
}


Étape 4 : programmer l’objet de jeu de la barre de santé de l’interface utilisateur

Maintenant que vous avez créé un élément d’interface utilisateur de barre de santé et que vous avez accès à la variable de santé du joueur, il est temps de les faire fonctionner ensemble. Pour commencer, ajoutez une variable statique privée qui contiendra le composant image de votre barre de santé :

private static Image Healthbar;


Vous pouvez ensuite affecter le composant image à cette variable dans la fonction void Start(), qui ne s’exécute qu’une seule fois.

Healthbar = GetComponent();


Maintenant que toutes vos variables sont en place, vous pouvez utiliser le code de l’étape précédente pour définir la largeur de remplissage de l’objet de l’interface utilisateur de la barre de santé. Vous n’avez pas besoin d’effectuer de conversion ici ; la santé du joueur et la quantité de remplissage de la barre de santé sont des variables flottantes.

Healthbar.fillAmount = currentHealth;


Avec ce code en place, votre barre de santé se remplira de haut en bas en fonction de la variable de santé trouvée dans le code Character_Control. C’est un peu ennuyeux, cependant, et cela pourrait certainement être utile avec un peu de couleur.

Commencez par ajouter une nouvelle couleur pour que la barre de santé devienne vert clair lorsque le joueur a beaucoup de santé.

Color greenHealth = new Color(0.6f, 1, 0.6f, 1);


Ensuite, ajoutez une instruction if pour vérifier si la santé du joueur est supérieure à 0,3f, c’est-à-dire 30% ou plus. S’il est supérieur à 0,3f, réglez la barre de santé pour qu’elle corresponde à la couleur que vous venez d’ajouter. S’il est inférieur à 0,3f, tournez la barre de santé en rouge.

if (currentHealth >= 0.3f) {
    Healthbar.color = greenHealth;
} else {
    Healthbar.color = Color.red;
}


Étape 5 : Tester le code

Comme vous pouvez le voir dans le code complet ci-dessous, ce projet est assez simple quand tout est réuni. Bien sûr, cependant, vous avez besoin d’un moyen de tester votre code.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


public class Health: MonoBehaviour
{
    private static Image Healthbar;
    public float currentHealth;

        if (currentHealth >= 0.3f) {
            Healthbar.color = greenHealth;
        } else {
           Healthbar.color = Color.red;
       }
    }
}


Vous pouvez ajouter une seule ligne de code au script Character_Control pour rendre les tests possibles. Chaque fois que le joueur appuie sur la touche W pour avancer, supprime une petite quantité de santé. Vous pouvez ajouter le même code à n’importe quel script ayant accès à la variable playerHealth pour les mêmes résultats :

playerHealth -= 0.001f;


Vous pouvez également envisager d’ajouter des actifs uniques à votre projet Unity. Vous pouvez trouver des ressources Unity gratuites sur le Web, ce qui vous donne la possibilité d’animer votre projet sans avoir à dépenser d’argent.

Construire des barres de santé dans Unity3D

Votre jeu commence à prendre forme maintenant que vous avez mis en place une barre de santé pour votre personnage. Il reste encore beaucoup de travail à faire, mais vous devriez maintenant avoir certaines des compétences clés dont vous avez besoin pour commencer à faire de réels progrès. Bien sûr, cependant, cela ne fait jamais de mal de lire plus de guides.