[CoRoLia] HUD

J'ai réfléchi au HUD, j'avoue ne pas savoir trop comment le faire, est-ce qu'il doit être le plus épuré possible ? Est-ce qu'il doit avoir beaucoup d'infos ?

L'infos qui ne sera pas présente dans le HUD sera présente dans le menu "pause".

Voilà les infos qui peuvent être affichées dans le HUD au maximum (le reste n'étant pas assez important pour l'afficher hors du menu pause (entre parenthèse j'ai noté la manière dont je pense afficher l'info, en rouge sont les infos qui sont primordiales) :

-HP du joueur (jauge)
-MP du joueur (icônes)
-nb de vies (icône + chiffre)
-relic upgrade : 4 max (icônes)
-magic scroll : 1 max (icône)
-Or (icône + chiffre)
-HP Boss (jauge)

Perso la magie faut qu'elle soit affichée je pense (on a pas le temps de la chercher pour savoir si on doit ramasser ou non une magie au sol, si on doit l'utiliser vite ). L'or est une sorte de score dans le jeu, je pense qu'il devrait être affiché à l'écran aussi.

Les hp du boss peuvent être affiché quand il y a un boss uniquement, ça ne pose pas de problème

Pour les vies je suis pas sur, mais quand je joue perso je regarde pas vraiment le nombre de vie (ça ne changera pas ma façon de jouer dans l'immédiat ). Si on montre le nombre de vie restantes à la mort du joueur, celui si s'en souviendra si ça lui semble important (dernière vie ). Les relics upgrade sont pas nécessaires je pense (le menu pause suffira ), le joueur sait celles qu'il possède.

En effet ! Tu as raison pour les upgrade et la magie.
Pour le nombre de vie, je suis assez ok avec toi, cependant dans beaucoup de jeux c,est marqué. Mais c'était peut être une habitude qui vient des jeux d'arcade où il n'y avait pas de menu et où l'affiche du nombre de vie était primordial. On va donc les afficher ailleurs.

La seule chose que je me dit qui n'est pas utile à montrer aussi est l'or. On a pas besoin de savoir en tout temps combien on a, ce n'est pas spécialement utile avant d'arriver sur la world map de toute manière, donc placer cet info dans le menu pause est correct aussi.

J'ai aussi changé ce qui affiche les MP du joueur, ce n'est plus des icônes mais un chiffre juste en dessous de l'icône de la magie possédée.

Donc visible dans le HUD :

-HP du joueur (jauge)
-MP du joueur (chiffre)
-magic scroll : 1 max (icône)
-HP Boss (jauge)


Visible dans le menu pause :

-nb de vies (icône + chiffre)
-relic upgrade : 4 max (icônes)
-Or (icône + chiffre)

+ autres trucs à définir plus tard.


Je vais donc créer des mockup de HUD et faire un topic dessus pour qu'on choisisse ce qui est le mieux, désormais, pour l'affichage.

J'ai plusieurs exemples de HUD in game, à chaque fois je propose une version avec la jauge des HP du boss affichée en plus pour voir comment ça donnera. Dis-moi celles qui te plaisent le plus.

J'ai fais avec ça un décor pour l'occasion afin de simuler ce que ça donnera in game en gros.
On a les HP du héros à gauche, ceux du boss à droite et l'icone c'est la magie possédée avec le nombre de MP.




1)




2)



3)



4)



5)

Mon choix va vers la première configuration. Le liserai jaune est vraiment bien pour rendre la magie bien visible, qui est bien située sous la barre de HP (on peut tout voir d'un coups comme ça parfait ! ). Le nombre de MP est peut-être pas très visible par contre

Si les lecteurs ont un avis, n'hésitez pas à le poster sur le topic de discussions !

Moi aussi je trouve que c'est la mieux.

Pour le nombre de MP, je pense que ça passe quand on joue (la fenêtre est deux fois plus grosse) mais au pure on trouvera un chiffre un peu plus grand si c'est vraiment un problème.


Donc maintenant il faudrait que je te donne les ressources et quelques autres infos techniques pour coder tout ça ?

Yep !

En effet c'est vrai qu'on est loin du full screen, surtout avec ma résolution

Position du HUD dans l'écran et infos :


L'image est de la taille de l'écran de jeu, zoomé x2, la position du HUD en haut à gauche est exactement comme il le faut in game. J'ai noté les espacements de pixels pour que tu ais un repère clair et précis.


Et une version de l'image à 100% si c'est plus utile pour toi :

Spoiler:

La jauge HP :
-la jauge HP commencera toujours au même endroit mais aura des longueurs variantes entre les différents persos.
-elle a deux layers, une pour la jauge remplie en vert et l'autre en dessous pour le reste (dont le fond rouge quand la jauge est vidée).
Exemple :


Le cadre jaune contenant l'icone de magie :
-elle est toujours visible et est vide si aucune magie n'est possédée.


L'icone de magie :
-elle apparait dans le cadre jaune si possédée.
-elle est en couleur si le perso a au moins 1 MP.
-elle est en noir et blanc si le perso n'a plus de MP.







Détails sur la longueur de la jauge HP :

J'ai opté pour des jauges HP de longueurs différentes suivant les HP totaux des héros. C'est plus visuel qu'une jauge égale qui baisserait ou augmenterait plus ou moins suivant les HP du héros. On sait, d'après le doc sur les héros, qu'ils ont des HP allant de 75 à 125. Ces valeurs sont celles qu'on utilise pour travailler (doc pour le moment) mais ne seront pas exactement les mêmes dans la prog. L'idée de ces valeurs initiales était un pourcentage (100 étant la valeur classique du nombre de HP). Vu qu'il fallait des jauges ni trop petites ni trop grandes, j'ai fait un simple produit en croix pour trouver un coefficient multiplicateur à attribuer sur nos valeurs de docs et les transformer en vraies valeurs in game. (Il serait préférable de changer de suite ces valeurs dans la progs, peut être ou ajouter un coef qui affecterait toutes ces valeurs. En fait, tout dépend comme on veut travailler... soit on est en valeurs réelles soit on est en pourcentages. Les deux ont leurs intérêts. A toi de me dire ce que tu en penses.)

Le coefficient est 3/5. Donc toutes les valeurs connues concernant les HP des héros doivent être multipliées par ce chiffre.


HP des héros :
?? HP (dans le doc) => ?? HP (in game)

75 => 45
100 => 60
125 => 75


exemples avec les ennemis :
Leurs forces est directement liée aux HP des héros.

Lutin :
Force : 10 => 6

Plante-bombe :
Force (Corps): 15 => 9
Force (Projectile): 5 => 3




Voilà chaque visuel de jauge :


75 => 45


100 => 60


125 => 75

Les nouvelles valeurs (45, 60 et 75) sont liées au nombre de pixel pour chaque jauge. De ce fait, 1 HP = 1 Pixel in game.

Il est fort probable que les plus petits dégâts possibles par un ennemi soient de 3. Mais se baser sur 1HP = 1 pixel est une bonne chose si on veut faire baisser progressivement la jauge de HP (si on marche sur un endroit qui nous blesse comme continuellement, par exemple.)



Jauge des boss :
Elle fonctionnera comme pour les héros, elle aura différente taille suivant chaque boss et il est fort possible qu'elle soit aussi basée sur 1 pixel = 1HP. (Les valeurs des forces des héros devront être modifiées car actuellement elles se bases sur la valeur 10 en moyenne qui est bien trop grande).

Super, il y a tout ce qu'il me faut pour programmer !

On utilisera la règle "1 HP = 1 Pixel in game" je pense.

Je me penche dessus dès que possible

Pour l'instant voila le rendu ingame :



J'hésite à arrondir le bord de la barre de vie (la rendre moins large de 1 pixel sur la bande des bords supérieur et inférieur ). Tu en penses quoi ?

Ouais ! C'est vraiment excellent d'un coup. J'adore.

Pour les HP, si tu le sens, si je comprends bien ça devrait être subtile. (Ou t'embête pas pour l'instant, bref, comme tu veux).

Mockup du Select Screen des héros


Visuels placeholder.




A) Le fond noir aura un visuel, donc une image de 320x240. L'image comprend les cadres gris ainsi que tous les textes hormis celui du héros sélectionné (voir D).

B) Le curseur, il commence sur le Knight par défaut et avec les touches droite ou gauche on peut le déplacer au dessus des autres héros (il se déplace d'un coup au dessus de chaque sprite comme une sélection de choix classique). Il joue un son quand il se déplace. Il joue un autre son quand on valide la sélection.

C) Les sprites des héros. Au début au nombre de 4, espacés (environ) comme sur l'exemple. Plus tard un 5ème et un 6ème peuvent s'ajouter, les sprites se resserreront pour loger comme sur cette image (les distances sont approximatives, à toi de faire comme tu le sens).


Select Screen avec 6 héros.


D) Le seul texte qui est interactif. Il change suivant quel sprite est sélectionné par le curseur. L'écran débute donc avec le nom "knight" affiché.

E) Le Facecet du héros sélectionné. Il change suivant quel sprite est sélectionné par le curseur. L'écran débute donc avec la face du "knight" affichée.

F) Ces jauges de stats changent suivant le héros sélectionné. Pas besoin de se prendre la tête avec de vraies valeurs tirées de variables. Vu qu'il n'y a que 6 possibilités ce sera 6 images que je ferai suivant les stats.

G) Les relics possédées. Elles s'affichent seulement si on les possède. La position de chacune n'a pas d'importance. Si on en possède une elle prendra la 1ère place sur les 4.

H) La magie possédée. Elle s'affiche seulement si on en possède une.

I) Le nombre de Potion(s) possédée(s), au max 3. Elles ne s'affichent que si on en possède.




Note au sujet du curseur/sprite des héros : Quand le curseur est placé au dessus d'un héros, le sprite de se dernier se met dans la position "run" et joue son animation en boucle. Il reprend son anim Idle dès qu'il n'est plus selectionné. Si on valide la selection le curseur se met à clignoter en blanc à répétition et un bruitage joue. Puis on quitte l'écran un instant après.


Si une chose n'est pas clair, dit-le moi.

Super mock up !

Est-ce que le curseur va sur le héros le plus à gauche si on appuie sur droite alors que l'on est sur le héros le plus à droite (de même pour l'autre sens ) ?

Oui, c'est toujours pratique et ne coute pas grand chose.

J'ai avancé la version propre de l'écran de selection des personnages et voilà ce que ça donne (manque encore le sprite du mage et les faceset mais le menu est principalement fait :






Placeholder VS final.


PS : Je posterai les ressources mises à jour très bientôt. ^^









EDIT : voilà les ressources !


Le fond.


Le curseur.




Les couches à afficher suivant le héros sélectionné par le curseur (les faceset ne sont pas encore fait).

Super !

Le flou du fond et de la police du "Select your hero" est pas super top pas contre je trouve

En fait je pense que ce n'est pas si flou, mais que la résolution est basse pour ce genre de détails. Le fond n'est pas très net, en effet, mais je trouve ça pas très beau quand un panorama est en pixel art "dur" en fait

On essayera d'arranger cela par la suite, mais actuellement je ne suis pas capable de faire vraiment mieux (plus net enlève des détails que j'aime pour le titre). Pour le fond, je vais essayer de le rendre moins flou). ^^'

En fait pour le titre ça passe, mais bon c'est aussi les gouts et les couleurs (y a eu plein d'avis positifs sur le topic de discussion ).

On verra ça à la fin de toute façon, la version actuelle est très propre et plus que présentable pour une démo