Tutoriel – Créer une barre de vie

Introduction

Dans ce tutoriel, nous allons regarder pour réaliser une barre de vie simple qui augmente ou diminue en fonction du nombre de points de vie dans Unity. Je pars du principe que vous avez créé votre projet. Bien sur après vous pourrez appliquer le concept à une jauge de magie, endurance ou expérience, etc…

Démarche

Pour commencer, nous allons créer un Canvas pour l’interface du jeu, il créera un objet EventSystem automatiquement, ce qui est normal.

Importez votre image qui servira de barre de vie. Si vous n’en avez pas, je vous propose de télécharger celle que j’ai créée rapidement pour ce tutoriel.

Pour structurer votre projet Unity, je vous conseille de le mettre dans un dossier Sprite par exemple. Une fois le fichier importé, sélectionnez votre ressource et passer dans l’inspecteur. Dans le premier champ Texture Type, sélectionnez Sprite(2D and UI) et faite Apply.

Maintenant que l’on a notre image, nous allons créer un objet Image dans le Canvas. Placez là où vous voulez dans votre Canvas, puis dans Source Image, nous allons sélectionner notre image. Une des options qui nous intéressent, c’est Image Type. C’est ici que nous allons dire comment gérer le remplissage de l’image.

Dans l’image ci-dessous vous pouvez voir la configuration à renseigner. On dit que l’on souhaite une image qui peut se remplir de manière horizontale dont le point d’origine est à gauche.

Pour gérer le remplissage, cela se fait avec Fill Amount qui varie entre 0 et 1.

Maintenant que l’on a configuré notre barre de vie, nous allons créer deux boutons pour tester cela.

Scripts

Maintenant pour que cela fonctionne, il va falloir faire un minimum de code.
Nous allons créer un script C# (HealthBar.cs dans mon cas) et l’ajouter à notre bar de vie.

Le code n’est pas trop compliqué :


using UnityEngine;
using UnityEngine.UI;

public class HealthBar : MonoBehaviour {
[SerializeField]
private int hp;
[SerializeField]
private int hpmax;
private Image healthbar;

void Start ()
{
healthbar = GetComponent<Image>();
}

// Inflige des dégâts
public void TakeDamage(int damages)
{
hp -= damages;
UpdateHealth();
}
// Soigne le joueur
public void Heal(int heal)
{
hp += heal;
UpdateHealth();
}

// Actualise les points de vie pour rester entre 0 et hpmax
private void UpdateHealth()
{
hp = Mathf.Clamp(hp, 0, hpmax);
float amount = (float)hp / hpmax;
healthbar.fillAmount = amount;
}
hp et hpmax sont les valeurs de la vie du joueur et ses points de vies maximums. [SerializedField] signifie que l’on peut les saisir dans l’éditeur directement. healthbar est notre barre de vie, on récupère d’abord celle-ci par le code.

TakeDamage est là où l’on gère les dégâts et Heal le soin. Ces méthodes appellent toutes les deux UpdateHealth qui s’assurent dans un premier temps que les hp ne soient pas inférieurs à 0 et supérieur aux hp max grâce à Mathf.Clamp. Ensuite on modifie le remplissage de la barre de vie.

Tester

Il ne reste plus qu’à tester. Pour cela nous allons ajouter les fonctions TakeDamage et Heal sur nos boutons.

Dans la zone en dessous de Runtime Only, il faudra sélectionner notre barre de vie pour avoir accès aux fonctions que nous avons créées.

Maintenant vous n’avez plus qu’à lancer votre projet et tester.

Conclusion

Il y a plusieurs façons de réaliser une barre de vie ou une autre jauge. Je trouve que cette façon n’est pas trop compliquée.
Si vous avez besoin d’informations complémentaires ou des suggestions/critiques, n’hésitez pas à me contacter. Cela me permettra d’améliorer la qualité de mes tutoriels.

Les sources du tutoriel sont disponibles ici.