Pour commencer
Admettons ici que vous avez déjà toutes les ressources graphiques pour votre barre de vie - faites les comme vous le souhaitez ! Mais la structure de base est celle-ci :
La deuxième est optionnelle. C'est juste pour que ça rende mieux.
Etape 2
Importez les images dans Construct et assignez-leur des points comme ceci :
Ajustez si nécessaire. Cela va vous simplifier la vie au moment de créer des events. Nommez les objets. Je vais les appeler Frame, Subbar et Bar. Le personnage ou l'objet visé, je vais l'appeler Hero :)
Mettez les objets de la barre de vie dans un layer à part, au dessus de tout si vous le souhaitez. Soyez sur que ses Parallax X et Y soit à 0.
Etape 3
Ajoutons quelques propriétés. Ajoutez juste les propriétés "Life" et "MaxLife" à l'objet ciblé, et "InitialWidth" à l'objet de votre barre de vie. Pour ajouter des propriétés, allez dans le panneau de gauche -> Instance Variables -> Edit Variables. Modifiez les comme vous le désirez. Par exemple si votre héros a au maximum 100 vies, mettez juste MaxLife et Life à 100, ou une autre valeur si vous voulez :)
Pour créer un propriété : Soit allez directement dans les propriétés de l'objet, section "Instance Variables", ou sur l'event sheet: Add Action -> Double clic sur l'objet - > Allez à la section "Instance Variables" -> Set Value. Habituellement dans l'événement "On Start of Layout" mais cela peut être où vous voulez.
Etape 4
Dernière étape : les events. Pour une meilleure organisation, ajoutez un Event Sheet appelé HUD ou ce que vous préférez en allant sur :
Onglet projet -> Clic droit sur Event Sheets -> Add Event Sheet.
Ensuite, l'ajouter à l'Event Sheet principale avec un Clic droit sur l'écran de l'Event Sheet principale -> Include Event Sheet. Puis, sur l'Event Sheet HUD :
Ajoutez un événement System : On Start of Layout. Dans ses actions, mettez:
- Bar : Set Position to (Frame.X, Frame.Y)
- Subbar : Set Position to (Frame.X, Frame.Y)
- Bar : Set Instance Variable InitialWidth to Self.Width
En dessous, ajoutez un événement System: Every Tick avec les actions suivantes :
- Bar : Set Width to (Self.InitialWidth + (Hero.Life-Hero.MaxLife)*(Self.InitialWidth/Hero.MaxLife))
(Merci à Sargas pour l'astuce !)
C'est bon ! Les points des images vont les positionner correctement, donc en ajuster la taille ne vas pas les mal-placer.
Maintenant, manipulez Hero.Life comme vous le voulez ! On se revoit bientôt pour un nouveau tutoriel :D
Traduit de l'anglais par paulolol.
Aperçu final :