Barre d'UIs

Sur cette page tu trouveras comment créer :

Créer une barre d’UI

Le plus simple pour créer une barre d’UIs (pour n’importe quel element que l’on veut afficher) c’est d’utiliser un slider.

On le met à la taille et position voulue, et on arranche les différents morceaux du slider jusqu’a n’avoir plus que le strict necessaire:

En jouant avec les couleurs de background et fill on choisi la couleur de la barre quand elle est pleine ou vide

Ne pas oublier d’ajuster les valeurs minimum et maximum sur le Slider pour que la barre puisse afficher correctement!

Changer la texture

Pour changer la texture on commence par trouver une texture approprié sur google. Une fois la texture mise dans Unity on change ses paramètres pour qu’elle s’adapte à la barre d’UI:

(Attention ici c’est pour une image UI qui se répète à l’horizontal. Si il faut une répétition vertical on changera l’axis V)

On va ensuite sur la partie du slider que l’on souhaite texturer et on met la texture dans la case Source Image, avant de changer les paramètres.

ici dans l’image pour une barre horizontale qui se vide de droite à gauche pendant le jeu avec une image qui s’étire.

Dns cet exemple la c’est pour une barre horizontale qui se vide de droite à gauche pendant le jeu avec une image qui se répète.

A vous d’adapter selon vos barres!

Le code

Le code est extrement simple. On créer une variable public pour indiquer au script quelle barre utiliser, puis on lui dit simplement de mettre la valeur à jour:

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

 

public class GameManager : MonoBehaviour
{
    public Slider affichageTemps;

 

    public float Timer; //Temps au départ du jeu
    public static float _timer; //temps restant à un moment X du jeu

 

    void Update()
    {
        if (_timer > 0) {
            //tant qu’on a du temps
            _timer -= Time.deltaTime;

 

            //actualiser la valeur de la barre
            affichageTemps.value = Mathf.Round(_timer);

 

        }      
    }
}
Retour en haut