I. Introduction▲
Voici le quatrième épisode de la formation donnée au cours du Unite 2015 à Boston durant laquelle vous allez apprendre à faire un jeu dans lequel deux tanks s'affrontent.
Vous pouvez retrouver les autres épisodes de cette série dans le sommaire dédié.
II. Vidéo▲
Unity - Tanks ! - Gestion de la santé
III. Résumé▲
Dans cette quatrième vidéo, vous allez voir comment afficher le niveau de vie du tank à l'aide d'un curseur de défilement (« slider »).
III-A. Intégration du slider▲
Pour intégrer le curseur de défilement, vous devez vous placer en mode « pivot » et en espace de coordonnées local. Ajoutez le « Slider » à travers la hiérarchie.
Les éléments d'interface utilisateur doivent être placés dans un canevas (« Canvas »). Celui-ci est automatiquement créé lorsque vous rajoutez le « Slider » ou tout autre élément d'interface utilisateur.
III-A-1. Configuration du canevas▲
Par défaut, le nouveau canevas est placé dans l'espace de coordonnées de l'écran et est indépendant de notre scène. De plus, le « Slider » possède une poignée avec laquelle sa valeur peut être modifiée. Cela est loin d'être adéquat pour ce jeu.
Premièrement, afin que le gestionnaire d'événements n'entre pas en conflit avec le jeu, modifiez les propriétés « Horizontal Axis » et « Vertical Axis » du composant « Standalone Input Module » pour y mettre « HorizontalUI » et « VerticalUI » respectivement.
Ensuite, la taille du canevas doit être modifiée. Le composant « Canvas Scaler » doit avoir la valeur 1 pour la propriété « Reference Pixels Per Unit ». De plus, le « Render Mode » doit être défini à « World Space ». Ainsi votre canevas sera dans l'espace de coordonnées du monde.
Dans le jeu, la barre de vie est placée sous le tank et se déplace avec le tank. Dans Unity, cela signifie que la position du slider dépend du tank et pour ce faire, il suffit de rendre le canevas enfant du GameObject du tank.
La position du canevas doit être (0, 0.1, 0). De plus, la largeur et hauteur doit être 1.5, 1.5. Finalement, la rotation doit être (90, 0, 0) pour tourner le canevas et le « poser sur le sol ».
III-A-2. Configuration du curseur de défilement▲
Jusqu'à maintenant, le curseur de défilement est toujours incohérent avec le reste de jeu.
Pour enlever la poignée, il suffit de supprimer l'élément « Handle Slide Area ». Ensuite, sélectionner le curseur de défilement et ses éléments enfants afin de définir leur ancre (et position grâce à la touche « Alt ») pour étendre les éléments sur les deux axes.
Le curseur de défilement est toujours interactif. Pour enlever cet aspect, il faut désactiver la propriété « Interactable » du composant « Slider ». Dans le même composant, définissez la transition à « None », la valeur minimale à 0 et la valeur maximale à 100.
Renommez le curseur de défilement en « HealthSlider ». Modifiez l'image de fond (« Background ») pour utiliser l'image « HealthWheel » fournie avec le projet. Changez la couleur pour prendre celle correspondant aux valeurs (255, 255, 255, 80).
Dans le GameObject « Fill », modifiez l'image pour prendre « HealthWheel ». La couleur aura une composante alpha à 150. Par contre, il est nécessaire d'indiquer à Unity comment colorier l'image. Pour cela, modifiez le type de l'image (« Image Type ») en « Filled » et le « Fill origin » en « Left ».
Finalement, nous avons besoin d'un script, assigné au GameObject « HealthSlider » pour garantir que l'interface garde la rotation assignée dans l'éditeur :
using
UnityEngine;
public
class
UIDirectionControl :
MonoBehaviour
{
// Cette classe est utilisée pour s'assurer que les éléments d'interface utilisateur en espace monde
// telle que la barre de vie garde la direction appropriée.
public
bool
m_UseRelativeRotation =
true
;
// Est-ce qu'une rotation relative doit être utilisée pour ce GameObject ?
private
Quaternion m_RelativeRotation;
// La rotation locale au début de la scène.
private
void
Start (
)
{
m_RelativeRotation =
transform.
parent.
localRotation;
}
private
void
Update (
)
{
if
(
m_UseRelativeRotation)
transform.
rotation =
m_RelativeRotation;
}
}
Maintenant, vous pouvez mettre à jour le préfabriqué du tank.
III-B. Script de gestion de la vie▲
Il est nécessaire d'avoir un script pour la gestion de la vie du tank, créer une explosion lorsqu'il n'a plus de vie et mettre à jour le curseur de défilement.
III-B-1. Explosion▲
Dans le projet, vous pouvez trouver un préfabriqué « TankExplosion » implémenté à travers un système de particules. Ajoutez-lui une source audio pour ajouter un bruit d'explosion qui se jouera en même temps que l'animation. Décochez la propriété « Play On Awake ». Mettez à jour le préfabriqué et enlevez l'objet de la scène.
III-B-2. Script « TankHealth »▲
Prenez le script suivant et placez-le comme composant du GameObject « Tank » :
using
UnityEngine;
using
UnityEngine.
UI;
public
class
TankHealth :
MonoBehaviour
{
public
float
m_StartingHealth =
100f
;
// La valeur de départ avec laquelle un tank commence.
public
Slider m_Slider;
// La référence vers le curseur de défilement affichant la santé du tank.
public
Image m_FillImage;
// L'image composant le curseur de défilement.
public
Color m_FullHealthColor =
Color.
green;
// La couleur du curseur de défilement lorsque le tank a toute sa vie.
public
Color m_ZeroHealthColor =
Color.
red;
// La couleur de la santé lorsque le tank n'a presque plus de vie.
public
GameObject m_ExplosionPrefab;
// Un préfabriqué qui sera instancié dans la fonction Awake(), puis utilisé lors de la mort du tank.
private
AudioSource m_ExplosionAudio;
// La source audio du son d'explosion.
private
ParticleSystem m_ExplosionParticles;
// Le système de particule de la destruction du tank.
private
float
m_CurrentHealth;
// La santé actuelle du tank.
private
bool
m_Dead;
// Est-ce que le tank n'a plus de vie ?
private
void
Awake (
)
{
// Instancie le préfabriqué de l'explosion et récupère une référence sur le système de particule de celui-ci.
m_ExplosionParticles =
Instantiate (
m_ExplosionPrefab).
GetComponent<
ParticleSystem>
(
);
// Récupère une référence sur la source audio du préfabriqué.
m_ExplosionAudio =
m_ExplosionParticles.
GetComponent<
AudioSource>
(
);
// Désactive le préfabriqué afin de ne l'activer que lorsque nécessaire.
m_ExplosionParticles.
gameObject.
SetActive (
false
);
}
private
void
OnEnable
(
)
{
// Lorsque le tank est activé, réinitialise la vie du tank et enlève l'état de mort.
m_CurrentHealth =
m_StartingHealth;
m_Dead =
false
;
// Met à jour la barre de vie et sa couleur.
SetHealthUI
(
);
}
public
void
TakeDamage (
float
amount)
{
// Réduit la vie du tank.
m_CurrentHealth -=
amount;
// Met à jour la barre de vie.
SetHealthUI (
);
// Si la vie restante est à zéro ou inférieur et que le tank n'est pas encore mort, appelle OnDeath().
if
(
m_CurrentHealth <=
0f
&&
!
m_Dead)
{
OnDeath (
);
}
}
private
void
SetHealthUI (
)
{
// Définit la valeur du curseur de défilement.
m_Slider.
value
=
m_CurrentHealth;
// Effectue une interpolation de la couleur de la barre de vie entre les couleurs vert et rouge suivant la vie restante.
m_FillImage.
color =
Color.
Lerp (
m_ZeroHealthColor,
m_FullHealthColor,
m_CurrentHealth /
m_StartingHealth);
}
private
void
OnDeath (
)
{
// Définit l'indicateur de mort afin que cette fonction ne soit appelée qu'une seule fois.
m_Dead =
true
;
// Déplace l'explosion instanciée à la position du tank et l'active.
m_ExplosionParticles.
transform.
position =
transform.
position;
m_ExplosionParticles.
gameObject.
SetActive (
true
);
// Joue l'animation du système de particules.
m_ExplosionParticles.
Play (
);
// Joue le son d'explosion.
m_ExplosionAudio.
Play
(
);
// Enlève le tank.
gameObject.
SetActive (
false
);
}
}
Généralement, ce script permet de gérer la santé du tank. De plus, il va mettre à jour le curseur de défilement suivant la vie restante du tank (fonction SetHealthUI()) et s'il ne lui reste plus de vie, joue l'explosion (fonction OnDeath()).
III-B-3. Instanciation d'un objet▲
Dans la fonction Awake(), la fonction Instantiate() permet de créer un nouvel objet à partir d'un autre (ici un préfabriqué). Elle permet de rajouter dynamiquement des éléments dans la scène. Ici, elle est utilisée pour créer une nouvelle explosion, à la construction du tank. Toutefois, l'explosion n'est pas utile à ce moment-là donc le système de particules est immédiatement désactivé.
III-B-4. Finalisation▲
Pour finir, définissez les variables exposées dans l'inspecteur. Mettez à jour le préfabriqué du tank et testez !
IV. Ressources▲
Vous pouvez télécharger le diaporama de la présentation.
Vous pouvez télécharger les ressources pour ce projet sur l'Asset Store de Unity.
V. Commenter▲
Vous pouvez commenter et donner vos avis dans la discussion associée sur le forum.