English 
Français
Big Tuto SFML 2 / Action-RPG : Legends of Meruvia
Chapitre 12 : Affichons le HUD !
Tutoriel présenté par : Jérémie F. Bellanger (Jay81)
Date d'écriture : 26 juin 2016
Date de révision : -
Prologue
Voilà, alors maintenant, avant de nous lancer dans la gestion des collisions, la perte des coeurs, la magie, tout ça... on va d'abord afficher le HUD ! 
Et comme le chapitre précédent était très long et dense, celui-ci sera plus digeste, histoire de récupérer ! 
Mais c'est quoi c'truc qu'on va afficher ? 
C'est de l'anglais, HUD signifie Head Up Display ou Affichage Tête Haute. C'est tout simplement l'affichage sur l'écran des informations importantes relatives au jeu. Et ici, on va en afficher 3 : le nombre de coeurs, évidemment, mais aussi une jauge de magie, qui nous servira plus tard, et enfin le nombre de pièces d'or ramassées. Bon concernant les pièces d'or, on ne gèrera pas le loot dans la première partie de ce tuto et elles resteront donc à 100, mais cela viendra plus tard (ou vous le rajouterez vous-mêmes 
).
Allez, on est parti !
Nouveaux fichiers à ajouter au projet
Pour afficher le HUD, nous aurons besoin de plusieurs fichiers, mais là encore, si vous avez téléchargé l'archive, vous les avez déjà :
- un fichier font ou police de caractères : GenBasB.ttf qui est la police Gentium, une open font libre de droits, et qui se trouve dans le répertoire font, de votre projet. J'ai choisi Gentium car c'est une open font et vous pouvez l'utiliser gratuitement et la redistribuer avec votre jeu, ce qui n'est pas le cas de toutes les polices (attention notamment aux polices Windows qui ne sont pas libres ).
- 3 fichiers images qui nous serviront à afficher le HUD, les coeurs ainsi que l'énergie de notre jauge de magie. Pour remplir cette dernière, nous procéderons de la même manière que pour les jauges de PV des monstres. Ces images se trouvent dans le répertoire graphics de votre projet.
HUD.png life.png energy.png
Et voilà le résultat auquel nous voulons parvenir :
Le code
On va commencer par retourner dans notre header map.h, pour y ajouter les prototypes de nos 2 nouvelles fonctions : drawText() et drawHud() :
Fichier : map.h : Ajouter les 2 prototypes :
|
//Fonctions
void loadMap(std::string filename);
void draw(int layer, sf::RenderWindow &window, Monster monster[]);
void changeLevel(void);
void testDefilement(void);
void detectTilesSpeciales(int mapY, int mapX, Monster monster[]);
POINT detectWarpSpe(int number);
void drawHud(Player &player, sf::RenderWindow &window);
void drawText(sf::RenderWindow &window, std::string message, int size, int x, int y, sf::Color color);
|
Voilà, sinon au niveau des variables, je vous rappelle qu'on les avait toutes déjà ajoutées au début du projet, par souci de simplicité, aussi bien notre sf::Font font que les variables nécessaires à l'affichage du HUD.
Au niveau des fonctions, maintenant, on a ajouté les prototypes de nos 2 nouvelles fonctions :
- drawText() qui se chargera d'écrire une chaîne de caractères (string) à l'écran,
- et drawHUD() qui affichera le HUD, notamment en faisant appel à la fonction ci-dessus.
Si vous relisez notre constructeur, dans le fichier map.cpp, vous verrez que là aussi, on charge déjà notre font ainsi que les images du HUD. Comme on a déjà vu tout ça en détails dans le Big Tuto C++/SFML2 Rabidja, je pense qu'il est inutile de s'y attarder (sinon, vous pouvez toujours relire le chapitre correspondant, bien sûr ).
En haut du fichier map.cpp, on rajoute maintenant #include "player.h" :
Fichier : map.cpp : Rajouter tout en haut :
|
#include "player.h"
|
On passe au code de nos deux nouvelles fonctions, toujours dans le fichier map.cpp :
Fichier : map.cpp : Rajouter les fonctions :
|
void Map::drawText(RenderWindow &window, string message, int size, int x, int y, Color color)
{
sf::Text text;
// choix de la police à utiliser
text.setFont(font); // font est un sf::Font
// choix de la chaîne de caractères à afficher
text.setString(message);
// choix de la taille des caractères
text.setCharacterSize(size); // exprimée en pixels, pas en points !
// choix de la couleur du texte
text.setColor(color);
//Positionne le texte
text.setPosition(x, y);
//Et le dessine
window.draw(text);
}
void Map::drawHud(Player &player, RenderWindow &window)
{
//Affiche le HUD
HUD.setPosition(23, 10);
window.draw(HUD);
//Affiche le nombre de coeurs
//On crée une boucle pour afficher de 1 à 3 coeurs
//selon la vie, avec un décalage de 32 pixels
for (int i = 0; i < player.getLife(); i++)
{
if (HUDDirection == DOWN)
{
HUDtimer -= 0.05f;
if (HUDtimer < 0)
HUDDirection = UP;
}
else if (HUDDirection == UP)
{
HUDtimer += 0.05f;
if (HUDtimer > 3)
HUDDirection = DOWN;
}
HUDHearts.setPosition(60 + i * 23, 15 + HUDtimer + i);
window.draw(HUDHearts);
}
/* Affiche la magie */
//On calcule la magie en pourcentage
int magic = player.getMP() / 100 * player.getMPmax();
//On affiche une barre pour chaque pourcent
for (int i = 0; i < magic; i++)
{
HUDMagic.setPosition(60 + i, 45);
window.draw(HUDMagic);
}
drawText(window, to_string(player.getGold()), 20, 65, 62, Color::Black);
drawText(window, to_string(player.getGold()), 20, 63, 60, Color::White);
}
|
La fonction drawText()
Vous remarquerez qu'elle prend un bon paquet d'arguments, mais ce n'est pas compliqué en fait !
- window correspond à notre fenêtre, pour pouvoir y dessiner, comme d'habitude.
- message correspond au texte à afficher / écrire. C'est une chaîne de caractères, ou string en anglais.
- size correspond à la taille du texte à écrire.
- x et y sont les coordonnées à l'écran où on doit écrire.
- et color correspond à la couleur du texte !
Pour le reste, les commentaires expliquent son fonctionnement qui n'a rien de sorcier. La SFML nous mâche, en effet, le plus gros du boulot !
La fonction drawHUD()
La fonction est déjà pas mal commentée :
- on affiche d'abord le nombre de coeurs à l'aide d'une boucle. Le principe est le même que pour Rabidja, sauf que j'ai eu l'idée de les faire "danser" comme dans certains jeux, pour rigoler ! A l'aide d'un timer, on les fait donc monter puis descendre de 3 pixels. C'est pas obligé mais ça apporte un petit plus sympa.
- on remplit ensuite notre jauge de magie, en calculant un pourcentage, comme pour les PV des monstres. Comme ça, on pourra par la suite gagner des points de magie sans élargir la jauge : elle se videra juste moins vite.
- on affiche le nombre de pièces d'or (j'en ai mis 100, histoire de pas être trop radin ! 
).
Vous noterez qu'on écrit 2 fois le texte avec un léger décalage, en blanc et en noir. Cela pour deux raisons :
- 1. C'est plus joli,
- 2. Le texte reste toujours lisible, que le fond soit clair ou foncé !
Il ne nous manque plus qu'à mettre à jour la boucle principale de notre main() pour appeler la fonction drawHUD() dans la fonction draw() :
Fichier : main.cpp : Modifier la fonction draw() :
|
//Fonction de dessin du jeu : dessine tous les éléments
void draw(RenderWindow &window, Map &map, Player &player, Monster monster[])
{
//On efface tout
window.clear();
// Affiche la map de tiles : layer 2 (couche du fond)
map.draw(2, window, monster);
// Affiche la map de tiles : layer 1 (couche active : sol, etc.)
map.draw(1, window, monster);
// Affiche le joueur
player.draw(map, window);
//On affiche les monstres un par un
for (int i = 0; i < map.getNombreMonstres(); i++)
{
monster[i].draw(map, window);
}
// Affiche la map de tiles : layer 3 (couche en foreground / devant)
map.draw(3, window, monster);
//Affichage du HUD
map.drawHud(player, window);
}
|
Voilà, on compile et on lance le programme !
Le HUD s'affiche maintenant devant vos yeux ébahis ! 
Je vous dis donc à bientôt pour le chapitre 13 ! 
Jay