Little God Story – DevBlog #6 (HUD)

Dans cet article, une réflexion sur les choix effectués en terme de HUD pour Little God Story. Comme d’habitude, beaucoup de changements ont eu lieu entre le début et l’état actuel des choses. Comme je pense avoir atteint un équilibre suffisant, il y a peu de chance que l’état actuel du HUD évolue fortement dans la suite du développement.

Mes choix ont été fortement influencés par les tests et donc par les testeurs. Merci à eux pour leurs idées qui permettent de rendre le jeu meilleur.

Le premier HUD purement utilitaire
Le premier HUD purement utilitaire

Introduction

Le HUD (Head up display) est un élément que l’on pourrait croire essentiel dans un jeu vidéo. Il affiche les points de vie, les munitions restantes, les points d’Xp ou plein d’autres choses encore. Un véritable changement s’est effectué ces dernières années. Certains jeux tentent de le supprimer le plus possible ou de l’intégrer au monde afin d’augmenter l’immersion (Far Cry 2, Metro 2033), d’autres persistent à en faire quelque chose d’envahissant (Borderlands avec ses messages explicatifs qui te cachent la moitié de l’écran pendant que tu vises).

En tant que développeur, je tiens à dire que le HUD est une façon facile de personnaliser un jeu/mod. Dès qu’on le change, l’impression de jouer à un jeu unique se renforce. Cela peut aller d’un simple texte (« XP = 325/640 ») à une refonte graphique complète. Ainsi, pour un développeur, faire un HUD minimaliste, c’est difficile psychologiquement. Cela enlève une possibilité simple de donner une patte graphique à son jeu.

Dernier élément essentiel : le public visé. Comme je l’ai dit dans un précédent article, certains testeurs (dont moi) ont fait tester le jeu à des publics plus casuals (féminins et/ou enfants). Il est évident que le HUD choisi influencera fortement l’accessibilité du jeu. Ce choix n’est pas si évident, car Little God Story ne propose pas de combat et beaucoup de réflexion. En cela, il est tout à fait possible de l’orienter vers le casual gaming. Cependant, le jeu étant prévu sur PC, il paraît évident que les gens qui y joueront seront des joueurs assidus, adeptes de jeux indépendants !

Concept du HUD

Le premier HUD personnalisé
Le premier HUD personnalisé

Avant de commencer à créer le HUD de Little God Story, j’ai créé un prototype qui devait me permettre simplement de vérifier que le code fonctionnait. Le premier HUD m’affichait l’Elément en cours avec un texte de couleur correspondante. Il a fallu ajouter ensuite une simple barre de vie, de mana et de munitions (chaque barre étant d’une couleur différente !).

Le problème du HUD, c’est qu’il sous-entend que le concept du jeu doit être finalisé un minimum avant de s’y attaquer. En effet, tout changement majeur dans le gameplay peut induire d’introduire de nouveaux éléments ou de les supprimer. Dès la deuxième version de test, j’ai ainsi du ajouter la barre de mana. Avant le mana n’existait simplement pas… J’ai donc établi une liste de ce que le joueur aimerait bien pouvoir savoir à chaque moment :

  • L’élément actuellement utilisé
  • Les points de vie
  • Le Mana

Cela peut paraître peu, mais il n’y a rien de plus dans Little God Story. En effet, le Mana sert aussi de munitions et il n’y pas de carte à afficher (étant très linéaire). Je ne parle pas ici de certains concepts non-finalisés que le joueur peut afficher ou voir ponctuellement :

  • Résumé du tutoriel (aussi appelé Journal)
  • Affichage de l’objectif en cours
  • Messages divers et variés qui s’affichent à l’écran

En effet, ces informations ne sont pas utiles en permanence à l’écran. Certes, l’objectif pourrait être affiché tout le temps (comme dans Borderlands) mais ce serait occuper une partie de l’écran pour rien. Concernant le tutoriel et les messages, rien n’est finalisé actuellement. J’y reviendrai plus tard, quand tout sera beaucoup plus avancé.

Dernière chose : l’arme utilisée fait entièrement partie du HUD puisqu’elle peut afficher des informations également (les munitions sont directement affichées sur l’arme dans Doom 3, la jauge d’air comprimé dans Metro 2033…). Cela facilite fortement l’immersion.

Premières moutures

Lors des premiers tests, les joueurs connaissent mal le jeu. Il n’y a pas ou peu du tutoriel, les niveaux sont parfois bancals et les idées d’énigmes mal faites. Bref, faire un HUD intuitif n’est pas la meilleure chose à faire. Ainsi, la première mouture un peu personnalisé du HUD de Little God Story contenait une barre de vie rouge, une barre de mana bleue et un logo de l’élément utilisé. Les codes couleurs classiques sont utilisés afin de ne pas perdre le joueur. Enfin, l’élément est symbolisé par un logo afin d’aider le joueur à comprendre le jeu. En effet, il existe quatre interrupteurs différents dans Little God Story reliés à un élément. Le logo du HUD renvoie ainsi directement au logo de l’interrupteur, expliquant implicitement au joueur le lien entre les deux.

Cette version n’a pas posé de problème pratique aux joueurs. Les informations étaient facilement accessibles. Certains se sont plaints d’un logo d’élément trop envahissant (qui fut réduit pour la version suivante). Cependant, cette version était assez efficace, bien qu’assez moche. Le côté très coloré contrastait trop avec l’aspect sombre du jeu. De plus, Little God Story veut se doter d’une ambiance forte, à la fois sombre et mélancolique. Avec un HUD discret, cela est beaucoup plus simple à réaliser.

Le crosshair renvoie au graphisme de lélément utilisé
Le crosshair renvoie au graphisme de l'élément utilisé

En recherche d’immersion

Les derniers tests, plus pointus, m’ont amenés à rechercher plus d’immersion (au détriment d’un apprentissage plus intuitif). En effet, le changement d’élément se traduit par un changement visuel à l’écran et dans les déplacements. Les joueurs ont ainsi signifiés qu’ils n’étaient que rarement perdus, ils savaient dans quel élément ils jouaient. De plus, la main du joueur (qui sert d’arme) changera selon l’élément (en flammes pour le mode feu, semi-transparente en mode air…) et donnera ainsi automatiquement l’indication au joueur. On peut donc enlever le gros logo qui n’est donc plus nécessaire. Une autre indication sert également à signifier l’élément : le crosshair. Ce dernier a un design qui rappelle l’élément utilisé. Ainsi, peu de risque que le joueur soit perdu.

La barre de vie disparaîtra également, remplacé par les effets classiques vus dans les jeux actuels. En effet, les tests ont montré qu’il était rare dans le jeu que les joueurs soit blessés. L’erreur équivaut souvent à la mort dans Little God Story. Résultat : si un joueur se blesse, sa vie revient petit à petit (ce qui est cohérent avec le fait que le joueur est censé être un dieu !). La notion de barre de vie peut donc sauter.

Reste la barre de mana. Je remercie ici un testeur en particulier qui m’a donné l’idée : le curseur disparaît petit à petit quand le mana s’épuise. Cet effet, facile à implanter, est très visible. Il permet au joueur de voir son mana disparaître. Et comme il est situé au centre de l’écran, il est beaucoup plus simple à voir.

Au final, le HUD de Little God Story est discret : un simple curseur blanc et la main du joueur sont affichés à l’écran. Il est certain que cela est possible qu’avec l’avancée d’autres domaines :

  • personnalisation de la texture et du matériel de la main selon l’élément utilisé
  • ajout d’effets graphique qui permettent de mieux ressentir l’élément avec lequel on joue
  • ajout de sons personnalisés lors du changement d’élément
  • ajout de messages lorsque le Mana est épuisé

Si je suis arrivé à accepter d’avoir un HUD moins présent et donc de moins personnaliser graphiquement ce même HUD, c’est aussi parce-que le jeu en lui-même a une patte graphique plus affirmée. A partir du moment où le jeu semble présenter un aspect plus personnel (par les armes à l’écran, les interrupteurs, l’ambiance…), le HUD peut redevenir un élément d’immersion et non plus uniquement une façon d’imposer sa patte graphique.

Le HUD actuel, beaucoup plus discret
Le HUD actuel, beaucoup plus discret

Je me permet de faire une petite digression sur Unreal Safari. J’avais commencé à travailler sur le HUD que je voulais très africain et délirant. J’avais ainsi mis des fruits (kiwis, oranges) et des feuilles de bananiers. Je vous invite à lire le post que j’avais laissé sur WeFrag et les remarques qui avaient alors été faites : http://www.wefrag.com/forums/entre_aide/topics/138233

Unreal Safari : un HUD flashy !
Unreal Safari : un HUD flashy !

13 commentaires à propos de “Little God Story – DevBlog #6 (HUD)”

  1. Lien de la première image corrigé.

    Je bosse en UI. Je suis incompétent en Scaleform et c’est pas forcément adapté à un jeu médiéval.

  2. Mince je pensais que tu aurais pu me filer des tips. (accessoirement je comprends pas en quoi une techno est pas adaptée à un type d’univers, sachant les tutoriaux basés RPG dans scaleform)

  3. belzaran a dit :
    Je bosse en UI.

    C’est à dire par script uniquement ?
    Il me semblait avoir lu qu’Epic avait retiré ce genre de chose, ne laissant que le combo flash+Scaleform qui m’avait alors refroidit lorsque je m’étais documenté sur l’UDK.

  4. Encore un article intéressant.
    Tu devrait revoir un peu la texture de la main en feu pour quelque chose de plus marqué [contrasté entre le rouge, le blanc, le jaune et le noir, comme le feu quoi] et surtout ajouter des particules: Comme un brasier: Des petit point incandescent qui s’envolent, peut être aussi un effet de flamme et surtout un shader de déformation 🙂

    En écrivant ça j’me dis que t’as deux choix en fait:
    -Soit la main est vraiment en flamme, perso je penche sur ça mais ça risque d’être envahissant si on veut que ce soit crédible.
    -Soit la main est un brasier: Une main en cendre, donc marron/noire avec des petits points rouge et jaune sur la « peau », comme un barbeuc quoi. Moins sympa mais aussi moins encombrant.

    Bon OK, tu va me dire que ce n’est pas encore travaillé mais j’te l’dis quand même 🙂

    Bon ap’ !

  5. Actuellement, Epic n’a pas viré la partie scriptée pour les HUD. C’est uniquement un choix à faire (il suffit d’ajouter une ligne dans son script pour dire qu’on préfère bosser à l’ancienne).

    Pour la main, c’est du méga-WIP, soit deux minutes de travail : j’ai repris le matériel du gant normal et j’ai ajouté une partie émissive en orange. Sinon, c’est prévu façon barbec’.

  6. belzaran a dit :
    Pour la main, c’est du méga-WIP, soit deux minutes de travail : j’ai repris le matériel du gant normal et j’ai ajouté une partie émissive en orange. Sinon, c’est prévu façon barbec’.

    Ok, j’m’en doutais, sympa ! 🙂

  7. Lion2 a dit :

    belzaran a dit :
    Je bosse en UI.

    C’est à dire par script uniquement ?
    Il me semblait avoir lu qu’Epic avait retiré ce genre de chose, ne laissant que le combo flash+Scaleform qui m’avait alors refroidit lorsque je m’étais documenté sur l’UDK.

    En plus scaleform nécessite peut être un poil plus de connaissances en flash, mais bon dieu que c’est énorme a intégrer, tout est facile, la publication est rapide. Scaleform c’est vraiment le full winz de l’UI ingame.

  8. J’avoue que ça reste une techno bien a part AS et flash belzaran, mais l’actionscript ce n’est qu’un pseudo js, ça reste très abordable pour un mec qui à un minimum de connaissances en dév.

Répondre à Cydonia Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*