Patch
Patch: 288.3
Patch Bêta:
Officiel
  • Indie Game Creator
Compte
 
 
Dernier Message
Re : KWARN Armada Tactics (K.A.T)
par Nuagedan100
Aujourd'hui à 14:59:57

Re : KWARN Armada Tactics (K.A.T)
par arthurh
Aujourd'hui à 08:56:04

Re : Réaliser un tileset pixel art.
par Kloug
24 avril 2017 à 21:23:08

Re : Convertir une valeur de distance
par Patrice
24 avril 2017 à 20:24:49

Re : Convertir une valeur de distance
par Funkadicte
24 avril 2017 à 20:15:18

Re : Connexion entre PC et des appareils Android
par Nico
24 avril 2017 à 16:07:23

Re : Very Simply Animator
par ValLoche23
24 avril 2017 à 15:18:31

Re : Very Simply Animator
par Patrice
24 avril 2017 à 11:10:24

Partenaires
Les Articles du site

Création d'une barre de vie
Catégorie : Tutoriaux. 09/01/2015. Posteur : 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 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] + ""

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] + ""

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]/"



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!



Télécharger l'exemple
Le 22/01/2015 par : ValLoche23
Ah quand le tuto pour la barre de vie à la Kingdom Heart ?
Laissez un commentaire ?
Votre Nom ou Pseudo

Question anti robot (et de François):Le résultat de 4 + 4 (En lettre minuscule)

Question anti robot 2: Site Web (Ne rien marquer*)

Votre message

Balise BB code :
[b]Gras[/b]
[i]Italique[/i]
[img]Lien de l'image[/img]
[url]Lien Hyper Texte[/url]
[url=Lien Hyper Texte]Texte[/url]
* Laissez ce champs libre. Les robots comblent tous les champs, ça fait donc une bonne protection.