Barres de vie qui ont du style

Salut salut,

La barre de vie est probablement l'un des élément le plus important de nos jeux vidéos. C'est pourquoi il faut les soignées. Qu'elles fasse partie intégrante de l'univers du jeu. Imaginez le jeu Zelda sans les cœurs et quarts de cœur... meh!
[hr]
Barre de vie style classique
Pour commencer, Nous allons définir le nombre de points de vies. Dans les propriétés de l'application, mettons "# de vies initiales" sur 20.

Posons ensuite un objet Vies, et modifions son image :

Un fond à notre barre ça serait plus joli, ajoutons un objet Décor :

Notre barre de vie est terminée. Maintenant testons là un peu.

Dans l'éditeur d'événements, créons deux événements :

• Lors de l'appuie sur la touche "Flèche Haut"
+ Le nombre de vies du [joueur 1] < 20
        [joueur 1] : Ajouter 1 au nombre de vies

• Lors de l'appuie sur la touche "Flèche Bas"
+ Le nombre de vies du [joueur 1] > 0
        [joueur 1] : Soustraire 1 au nombre de vies

La condition « Le nombre de vies du [joueur 1] > 0 » est ici inutile puisque le nombre de vies ne peux pas être négatif. Mais si on utilise une valeur globale par exemple ça peut s'avérer utile.

Lançons la scène, et voilà.

[hr]
Barre de vie style avancé
Ok, passons à un truc qui a plus de classe. Genre moins de graduations et le bout de la jauge en biais.

L'objet que nous allons utiliser peut paraitre inattendu, il s’agit du Text Blitter. Cet objet sert à afficher un texte en utilisant une image à la place d'une police de caractères.

Changeons déjà le texte pour qu'il ressemble à notre barre de vie : [1##:###:###:###:###F]

Nous allons également utiliser une chaine globale. Pour rappel on peut la définir via les propriétés de l'application.


Nous voulons dons que quand le joueur perd un point de vie une lettre soit enlevée. C'est à ça que va nous servir la chaine. Dans l'éditeur d'événements ajoutons un événement :

• Le nombre  de vies du [joueur 1] <> Len(Barre de vie )
          Fixer [Barre de vie] à Left$("[1##:###:###:###:###F]", lives("[joueur 1]") )

C'est à dire que quand le nombre de PV est différent du nombre de caractères de la chaine [Barre de vie], celle ci est remplacée par les "nombre de PV" premiers caractères de "[1##:###:###:###:###F]"

Il ne reste plus qu'a redéfinir notre "Text Blitter", en y ajoutant en même temps un caractère pour le bout en biais :

          [Text Blitter] : Changer le texte: [barre de vie] + "I"

Il faut aussi penser à l'affichage de notre barre qui doit être différent pou "0 PV" et "20 PV". Ajoutons deux conditions à l'événement qui devient :

• Le nombre de vies du [joueur 1] <> Len(Barre de vie )
+ Le nombre de vies du [joueur 1] > 0
+ Le nombre de vies du [joueur 1] < 20
          Fixer [Barre de vie] à Left$("[1##:###:###:###:###F]", lives("[joueur 1]") )
          [Text Blitter] : Changer le texte: [barre de vie] + "I"

Puis ajoutons les événements :

• Le nombre de vies du [joueur 1] = 0
+ Une seule action lorsque l'événement est en boucle
          Fixer [Barre de vie] à ""
          [Text Blitter] : Changer le texte: ""

• Le nombre de vies du [joueur 1] = 20
+ Une seule action lorsque l'événement est en boucle
          Fixer [Barre de vie] à "[1##:###:###:###:###"
          [Text Blitter] : Changer le texte: "[1##:###:###:###:###F]"

Ok, Nous y sommes presque. Éditons notre Text Blitter. Cliquons sur le bouton "Edit Charmap" et mettons juste les caractères qui nous intéressent : "[1#:F]I7"



Et pour finir, éditons l'image en :

Ce qui au final donne :

[hr]
Barre de vie style Zelda
Nous avons tous rêvé à la simple vue de ces petits quarts de cœur. Plus qu'une simple barre de vie, c'est l'essence même de The Legend of Zelda qui transparait à travers elle.

Déjà, observons un peu comment elle se présente :


Un cœur est divisible en 4, ce qui fait qu'un seul cœur fait 4 points de vie. Nous pouvons donc déjà établir la chaine [Coeurs Zelda] à "12341234123412341234".

Cette fois ci nous allons utiliser deux Text Blitter, un pour les quarts supérieurs et l'autre pour les quarts inférieurs. Tous deux avec le Charmap à "1423" et l'image :

Il nous faut aussi un objet String Parser pour manipuler notre chaine.

Ajoutons un événement :

• Le nombre de vies du [joueur 1] <> Len(Coeurs Zelda )
          Fixer [Coeurs Zelda] à Left$("12341234123412341234", lives("[joueur 1]") )

Dans le Text Blitter du haut, on veut seulement les "1" et les "4". Utilisons le String Parser pour supprimer les "2" et les "3" :

          [String Parser] : Fixer à [Coeur Zelda] (Comme String Parser est à moitié en anglais, ça fait "set source string to [Coeur Zelda])
          [String Parser] : Fixer à remove$( " [String Parser] ", "2" )
          [String Parser] : Fixer à remove$( " [String Parser] ", "3" )
          [Text Blitter 1] : Changer le texte: string$( "[Sting Parser]" )

Puis on fait de même pour le Text Blitter du bas.

Ajoutons aussi un objet Décor rapide en fond, .

Nous pourrions nous arrêter là. Mais on m'a fait remarquer que dans les jeux Zelda, la barre de vie remonte lentement.

Reprenons et modifions notre événement, qui devient :

• Le nombre de vies du [joueur 1] < Len(Coeurs Zelda )
          Fixer [Coeurs Zelda] à Left$("12341234123412341234", lives("[joueur 1]") )
          [String Parser] : Fixer à [Coeur Zelda]
          [String Parser] : Fixer à remove$( " [String Parser] ", "2" )
          [String Parser] : Fixer à remove$( " [String Parser] ", "3" )
          [Text Blitter 1] : Changer le texte: string$( "[Sting Parser]" )
          [String Parser] : Fixer à [Coeur Zelda]
          [String Parser] : Fixer à remove$( " [String Parser] ", "1" )
          [String Parser] : Fixer à remove$( " [String Parser] ", "4" )
          [Text Blitter 2] : Changer le texte: string$( "[Sting Parser]" )

Un petit copier/coller pour dupliquer l'événement et modifions le :

• Le nombre de vies du [joueur 1] > Len(Coeurs Zelda )
+ Restreindre les actions pour 00''-22
          Fixer [Coeurs Zelda] à Left$("12341234123412341234",len("[Coeurs Zelda] + 1") )
          [String Parser] : Fixer à [Coeur Zelda]
          [String Parser] : Fixer à remove$( " [String Parser] ", "2" )
          [String Parser] : Fixer à remove$( " [String Parser] ", "3" )
          [Text Blitter 1] : Changer le texte: string$( "[Sting Parser]" )
          [String Parser] : Fixer à [Coeur Zelda]
          [String Parser] : Fixer à remove$( " [String Parser] ", "1" )
          [String Parser] : Fixer à remove$( " [String Parser] ", "4" )
          [Text Blitter 2] : Changer le texte: string$( "[Sting Parser]" )

Hm... Il manque un truc. Le cœur qui clignote quand il n'en reste qu'un. Créons un objet Actif sous le premier cœur.
Animation Arrêté : ; Animation Marche :

Avec ça Ajoutons deux événements :

• Le nombre de vies du [joueur 1] <= 4
+ Une seule action si l'événement est en boucle
          [1er coeur vide] : Changer la séquence d’animation pour Marche

• Le nombre de vies du [joueur 1] > 4
+ Une seule action si l'événement est en boucle
          [1er coeur vide] : Changer la séquence d’animation pour Arrêté

Et voilà notre barre de vie style Zelda enfin terminée. Ta Ta TaLaaa!
[hr]
Barre de vie style Kingdom hearts
Quand j’ai commencé ce tuto, je voulais avant tout montrer qu’on pouvait tout à fait créer quelque chose avec des objets qui ne sont pas destiné pour à la base. Comme faire une barre de vie avec un objet texte.
L’idée était de proposer une méthode plus simple qu’un objet actif avec autant d’images que de points de vie.
Ce que j’avais trouvé pour cette barre était bien trop compliquée, et donc inutile.

La méthode qui suit est probablement la plus simple de toutes.

Commençons par faire un objet actif qui sera notre barre :


Celle ci est divisée en 20 parties, en violet, qu’on va remplacer par des couleurs différente affin de faire un dégradé. Comme ceci :


On aurait d’ailleurs très bien pu la faire toute rouge avec juste 1 bit de différence à chacune pour qu’elle semble d’une seule couleur.

Créons un autre objet actif nommé Palette, reprenant le dégradé ainsi qu’un dégradé gris :

On va aussi avoir besoin d’une Valeur Globale, appelée Jauge PV (définie dans les propriétés de l’application).


Passons dans l’éditeur d’événements. L’idée est que quand notre variable Jauge PV est plus petite ou plus grande que le nombre de vies, on remplace la couleur correspondante sur la Barre (en utilisant Palette) et on ajoute ou soustrait 1 à celle ci.

• Jauge PV < lives ( "Joueur 1" )
        Remplacer la couleur RGBAt( "Palette", Jauge PV, 0 ) par RGBAt( "Palette", Jauge PV, 1 )
                  Ajouter 1 à Jauge PV

Et dans l’autre sens, mais cette fois ce on change la valeur globale avant :

• Jauge PV > lives ( "Joueur 1" )
                 Soustraire 1 à Jauge PV
        Remplacer la couleur RGBAt( "Palette", Jauge PV, 1 ) par RGBAt( "Palette", Jauge PV, 0 )

L’action Remplacer la couleur est dans Animation :


Et voilà. Avec cette méthode on peut vraiment faire n’importe quoi, forme farfelue, visage en sang façon Doom, les barres présentée plus haut…
[hr]
S’il devait y avoir une conclusion à ce tutoriel, ça serait qu’on peut parfois trouver des façons auxquelles on n’aurait pas pensé. Et que si on ne trouve pas comment faire un truc, passons à autre chose, ça nous donnera peut être des idées. Partagez, discutez, et soyez créatifs 🙂 👍

PS: Il y a pleins de bonnes idée dans les messages qui suivent.

Voici une façon bien originale d'utiliser l'extension text blitter. En plus c'est bien commenté. Je garde l'exemple sous le coude, ça peut servir. Merci.

très bon tuto  :bravos comme dit atheros75 originale d'utiliser l'extension text blitter.
si il y a une extension pour faire la même chose pour avoir plient de vas-ont de faire des  barre de vie avec  (Interface Bar Object)

Super !
Une manière originale de penser les compteurs
On pourrait le faire en combinant d'autres objets, j'avoue qu'à choisir je préférerai des objets "Chaîne" ou "Liste" qui sont compatibles avec tous les runtime et avec la version free plutôt que "TextBlitter". A se limiter au runtime PC, il y à effectivement déjà "Interface Bar Object".
La démarche est vraiment chouette, encore bravo.

Merci pour vos messages :)

Je ne connaissais pas l'Interface Bar Object. Ça peut être pas mal dans certains cas, un style Diablo ou classique, mais je le trouve trop limité.
Ok Patrice, tu m'as battu. J'ai pas le niveau pour comprendre ton exemple. Déjà que je le trouve compliqué, alors si on veut l'amélioré c'est peine perdue.

J'étofferais le tuto avec d'autres styles de barres de vie dans les jours prochains.

Super Seyjin!

Merci pour ce tutoriel qui donne des idées ;)

Salut salut,

J'ai ajouté une barre de vie style Zelda au tutoriel. Et celle là j'en suis fière.

Seyjin tu es une championne. Ton tuto est si bien que j'ai fais un copier/coller pour l'avoir sous la main dès que nécessaire. Beau travail qui mériterait de figurer parmi les tutos officiels.

[quote]Ok Patrice, tu m'as battu. J'ai pas le niveau pour comprendre ton exemple. Déjà que je le trouve compliqué, alors si on veut l'amélioré c'est peine perdue.[/quote]

Ohlala, ce n'est surtout pas une compétition ! j'apporte juste modestement de l'eau au moulin de la réflexion. Ce serait dommage de garder mes solutions juste pour moi tout seul non ?
Comme je le dis souvent il y a autant de solutions possibles que de programmeur.

Je me suis essayé à une solution un peu plus compréhensible pour le "Zelda style".
En espérant que ça pourra aider.

Encore bravo pour ta contribution.

Ne t'en fais pas, j'ai dit ça pour rire. Je ne l'ai pas du tout pris comme une compétition. Ça m'a même donné des idées (mais j'ai toujours pas compris ton système de liste).

Je peux placer le tuto sur le site ou tu va le modifier  ?

J'ai prévu d'ajouter, un jour, d'autres barres (dont une en arc de cercle). Mais tu peux déjà le publier sur le site.

A propos de barre de vie en Arc de Cercle, il est possible de faire une Barre de vie à la Kingdom Heart ?

Du style :

Hâte de voir ça !  ;D

Salut salut,

C'est pour bientôt, le temps que je rédige le tuto.


C'est cool, mon tutoriel directement sur le site, la classe. Mono, pourrais y tu ajouter le lien vers l'exemple ?

Wow oO"

Salut salut,

En attendant la nouvelle partie du tutoriel, voilà déjà l'exemple. C'est Patrice qui va être content, la nouvelle barre n'utilise pas d’extension.

:bravos

A quand le tuto pour la barre de vie Kingdom Heart ? :)