Barres de vie qui ont du style
Ajouté le mercredi 6 janvier 2016 par Seyjin
- Auteur du tutorial: Seyjin
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!
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à.
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 paraître 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 chaîne 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 :
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!
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…
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 🙂 👍