Les barres de vie

Nous trouvons normalement une « barre de vie » ou « barre de santé » dans les jeux de combats de type FPS (First Person Shooter – ou – jeu de tir à la première personne), mais aussi dans des jeux de rôle que simulent des combats.

La barre de vie est un rectangle en couleur, de taille fixe ou variable, qui a le but de représenter l’état de santé d’un personnage. La barre de vie peut (ou non) afficher une valeur ou un pourcentage.

Dans cet article nous nous focaliserons sur une fonction qui a pour but de retourner une couleur dans le format standard « html », c’est-à-dire « #RRGGBB » ou RR sont deux chiffres hexadécimales représentant la composante rouge, GG pour la composante verte et BB pour la bleue.
Les barres de vie peuvent prendre des formes différents, par exemple un nombre de briques carrées ou de cœurs. Ici nous nous concentrerons sur les barres à couleurs.
Les barres de vie classiques vont du vert (santé aux 100%) au rouge (le personnage est presque mort). Ici nous nous focaliserons sur une fonction que prend en charge l’intervalle 0-100 et permet d’assigner une couleur à chaque valeur, en transition du plein vert (#00FF00) au plein rouge (#FF0000) en passant par le jaune (#FFFF00). Des autres transitions sont aussi possibles, ici nous donnons quelques exemples, tirées du reseau.

 

Les barres présentées ici ont plus de « style » et de graphisme mais nous nous concentrerons sur la couleur. Un exemple de fonction pour obtenir une association pourcentage→ couleur comme décrit avant est la suivante :

''' color_bar takes an integer between 0 and 100 and returns a tuple 
    representing a rgb value for colors between green and red. 
'''
def color_bar(v): 
    if v >= 50 :
        green = 255 
        red = 510-((v*255)/50)
        blue = 0
    else :
        red = 255
        green = (v*255/50)
        blue = 0 
    # return (int(red),int(green), blue) 
    hexcolor = '#%02x%02x%02x' % (int(red), int(green), int(blue))
    return (hexcolor)

La fonction obtient une valeur en paramètre (entre 0 et 100) et calcule les composantes R,G,B de la couleur, de façon uniforme entre vert et rouge, en passant par le jaune. La dernière partie, détermine une chaîne de caractères – couleur HTML (formats de chaîne de caractères).

Vous pouvez facilement vérifier que avec v=100 la couleur retournée par la fonction est #00FF00, avec v=50 cous avez #FFFF00, et avec v=0 vous avez #FF0000.

Ici de suite, un petit programme pour tester la fonction à l’aide de la librairie tkinter, qui fait varier à l’infini la couleur et aussi la longueur de la barre entre 100 et 0 et vice-versa. Le logiciel n’est pas parfait, il génère beaucoup trop d’éléments graphiques mais ici ça sert seulement pour vérifier les transitions des couleurs.

from tkinter import *
from time import sleep 

master = Tk()

''' color_bar takes an integer between 0 and 100 and returns a tuple 
    representing a rgb value for colors between green and red. 
'''
def color_bar(v): 
    if v >= 50 :
        green = 255 
        red = 510-((v*255)/50)
        blue = 0
    else :
        red = 255
        green = (v*255/50)
        blue = 0 
    # return (int(red),int(green), blue) 
    hexcolor = '#%02x%02x%02x' % (int(red), int(green), int(blue))
    return (hexcolor)

w = Canvas(master, width=340, height=100)
w.pack()

def dessin():
    while True: 
        v=100
        while v > 0: 
            w.create_rectangle(50, 20, 290, 80, fill="#adcfe2")
            w.create_rectangle(70, 35, 70+2*v, 65, fill=color_bar(v))
            v-=1
            w.update()
            sleep(0.025)
        while v < 101: 
            w.create_rectangle(50, 20, 290, 80, fill="#adcfe2")
            w.create_rectangle(70, 35, 70+2*v, 65, fill=color_bar(v))
            v+=1   
            w.update()
            sleep(0.025)
    
    
dessin()
mainloop()

Et voilà quelques captures d’écran.