Unity - Tanks

Gestion de la santé

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 :

 
Sélectionnez
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 » :

 
Sélectionnez
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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2016 Unity Technologies. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.