CORALSConception du HUD · 22 octobre 2026Le dossier PDF ↗
Une interface au service de l’aventure

Laisser respirer
Corals.

Un même langage pour les quêtes, les boutons, les personnages et les commandes. Trois directions à comparer, puis une refonte à intégrer par étapes.

Première intégration d’Atlas dans le jeu. La navigation, le suivi de quête, les groupes et les commandes d’interface reprennent maintenant cette direction. Les huit planches restent des propositions pour la suite : leurs données sont illustratives et leurs deux fonds ont été reconstitués par IA. Elles ne sont pas des captures du HUD jouable. Voir la version du jeu ↗

Trois façons d’habiter le même monde.

Même scène, même contenu, même organisation.

Les planches, en détail.

Combat, dialogue, sac et mobile déclinent la direction A.

A · Atlas des marées

Ouvrir la planche en grand ↗ · Image

Direction A : suivi de quête et groupes à gauche, navigation à droite, ressources et compétences en bas, scène dégagée au centre.
La quête, les groupes et la navigation partagent les mêmes matières. L’objectif suivi possède une seule boussole. L’or met en avant ce qui mérite l’attention.

Les boutons dessinés dans les images représentent le futur HUD. Ils ne commandent pas le jeu. Les contrôles de cette page servent uniquement à parcourir les planches.

Ce qui doit changer dans les trois cas.

01Une hiérarchie avant une décoration.

Une quête suivie, une cible, une interaction prioritaire. Les informations secondaires restent à portée, sans prendre toute la scène.

02Le bon affichage au bon moment.

Explorer, combattre, parler et ouvrir son sac demandent des informations différentes. Les éléments se relaient au lieu de s’empiler.

03Une famille de composants.

Cadres, boutons, onglets, jauges et bulles partagent des règles de taille, de couleur et de comportement, sur ordinateur comme au doigt.

Décomposer avant de reconstruire.

23 familles relevées dans le code et les captures.

La capture fournie montre le problème : un suivi de quête brun, un groupe bleu, des médaillons dorés, un sélecteur de commandes et de nombreuses étiquettes rivalisent pour l’attention.

Le code de production contient déjà des corrections d’empilement et de mobile. Le travail proposé s’appuie dessus : il reste à donner à tous ces éléments des règles communes.

P0 : structure, lecture et usage à traiter en premier.
P1 : extension du système et finition.

Base auditée : c66b83e. La capture est historique, pas une nouvelle capture de la production. Ouvrir une ligne pour voir le constat, la proposition et les fichiers concernés.

Capture historique fournie : panneaux de quêtes et de groupe volumineux à gauche, boutons serrés en haut, noms des Squiddy répétés.
P0Navigation principale

ConstatLes médaillons portent chacun leur cadre, leur ombre et leur cartouche. La capture montre des libellés coupés ; hud-skin.ts et responsive.ts règlent leur taille séparément.

PropositionUne rangée commune : Journal, Sac, Équipage, Menu, langue. Le portrait mène au personnage ; Expéditions reste accessible depuis Menu. Libellés entiers, mêmes états et raccourcis.

src/standalone/hud-skin.ts:13 ; src/standalone/responsive.ts:57 ; src/standalone/builder/tools.ts
P0Bureau / Mobile / HUD

ConstatUn sélecteur de commandes occupe le coin de la quête. Il ressemble à un outil de test et répète les réglages d’interface.

PropositionRéglages > Interface : commandes Auto, souris/clavier ou tactile, et visibilité du HUD. Conserver un moyen évident de réafficher le HUD et les choix manuels.

src/director/preview.ts:1456 ; src/standalone/settings/hud.ts
P0Quête principale et étape

ConstatLe suivi brun et doré se distingue des panneaux marins. Titre, chapitre, étape et direction prennent beaucoup de hauteur.

PropositionUn seul suivi : type de quête, titre, objectif actuel, direction. Progression détaillée dans le Journal. Repli en combat, objectif toujours accessible.

src/standalone/builder/quests.ts:60 ; src/standalone/builder/quest-hud.ts
P0Pastille d’histoire et chapitres

ConstatLa pastille d’histoire est un module distinct du suivi de quête, même si responsive.ts les empile désormais.

PropositionIntégrer l’invitation au chapitre dans le même emplacement que le suivi ; priorité à une décision en cours. Garder l’acte, le chapitre et l’arc dans le Journal.

src/standalone/builder/story.ts ; src/standalone/responsive.ts
P0Quêtes annexes et quêtes partagées

ConstatLa quête d’un autre joueur se retrouve dans sa ligne de groupe. La lecture d’une liste de membres devient une lecture de quêtes.

PropositionJournal classé : principale, annexes de l’île, quêtes partagées. Un seul objectif suivi. La ligne du membre indique seulement qu’il partage une quête.

src/standalone/multiplayer/party.ts:50 ; src/standalone/multiplayer/party.ts:113
P0Groupe d’habitants

ConstatLe groupe du Village possède ses propres avatars, jauges et états. Il peut coexister avec le groupe de joueurs.

PropositionUne présentation commune des membres, sous le titre explicite Groupe · Habitants. Développer PV et effets pendant le combat, détails à la demande hors combat.

src/standalone/builder/village.ts:210 ; src/standalone/beings.ts
P0Groupe de joueurs en ligne

ConstatUn panneau supplémentaire affiche noms, niveaux, PV, lieux et quêtes ; les repères de distance existent aussi dans le monde.

PropositionTitre Groupe de joueurs. Distance dans la ligne, état de connexion discret, chat et invitation à portée. Flèche au bord seulement si elle apporte une information utile.

src/standalone/multiplayer/party.ts:40 ; src/standalone/multiplayer/presence.ts
P1Escouade des Players

ConstatL’escouade Tideborn est encore une autre famille de compagnons. Le mot groupe ne suffit pas à expliquer qui suit le héros.

PropositionMême composant de membre, section Escouade · Players. Ne jamais confondre un Player avec un habitant qui parle, ni avec un autre humain.

src/ds2/ds2-world-squad.js ; src/standalone/beings.ts:66
P0Noms et barres des créatures

ConstatLa capture répète le nom de la zone. Le moteur prend encore le nom de l’acteur, puis lui ajoute le niveau ; ce nom peut provenir du placement de zone.

PropositionNom d’espèce issu du bestiaire. Au repos : repère de groupe ou nom au survol. Au combat : nom de la cible et PV des créatures réellement engagées. Pas de perte d’identité pour les cibles uniques ou boss.

src/standalone/mobs/native-mobs.ts:150 ; src/standalone/builder/mobs.ts:54 ; src/director/DirectorHud.ts
P0Identité des personnages

ConstatUn nom et une barre ne disent pas qui fait agir le personnage. Le projet possède déjà les sept sortes dans beings.ts.

PropositionAssocier nom, signe et libellé de sorte selon le contexte. Les couleurs de santé restent distinctes des couleurs de sorte. Utiliser la source commune beings.ts.

src/standalone/beings.ts ; src/standalone/builder/village.ts ; src/standalone/multiplayer/presence.ts
P1PV, PM, XP et portrait du héros

ConstatLes jauges projetées sous le héros peuvent rejoindre les barres des voisins. Les accès Personnage et Sac se concurrencent.

PropositionUn repère stable du héros avec ses ressources ; le portrait ouvre sa fiche. Décider après essai si une jauge très discrète reste également près du héros en combat.

src/director/DirectorHud.ts ; src/standalone/character/ ; src/standalone/inventory.ts
P0Compétences et raccourcis

ConstatLa roue, les grandes actions et leurs variantes à plus de huit compétences ont leurs propres règles de placement.

PropositionMême famille de cases, avec états disponible, sélectionné, hors portée, coût insuffisant et recharge. Clavier : barre ; tactile : zones de pouce. Conserver tous les emplacements et le ciblage existants.

src/director/SkillWheel.ts ; src/director/preview.ts:1518 ; src/standalone/responsive.ts:39
P0Joystick, sprint et caméra tactile

ConstatLe joystick, Sprint et les compétences sont posés séparément. Sur une petite hauteur, les invites doivent encore trouver une place.

PropositionDeux zones de commande réservées aux pouces. Contrôles au moins 44 px, pas de numéro clavier sur tactile. Invite au-dessus ; aucune fenêtre ne laisse des contrôles actifs derrière elle.

src/director/TouchJoystick.ts ; src/standalone/settings/hud.ts:26 ; src/standalone/responsive.ts
P0Cible, combat et boss

ConstatCible, bandeau En combat, barre de boss et journal d’expédition sont des surfaces différentes.

PropositionUne priorité claire : danger et cible devant le suivi de quête. Barre de boss dans le même emplacement réservé, annonces brèves, effets et télégraphes lisibles dans le monde.

src/standalone/combat/combat-phase.ts ; src/standalone/expedition/ ; src/standalone/hud-skin.ts
P0Bulles et choix de quête

ConstatL’arrivée est déjà passée en bulles. D’autres dialogues utilisent encore le panneau de conversation ; plusieurs règles de masquage et de caméra coexistent.

PropositionÉtendre le vocabulaire des bulles sans changer questTalk : question sur le locuteur, choix sur le héros, réplique choisie visible. Éviter les autres bulles, les bords et les commandes ; ne jamais faire osciller la caméra entre deux répliques.

src/standalone/world-lab/barrel-arrival.ts ; src/standalone/builder/bonds/dialog.ts ; src/standalone/builder/bonds/quest-talk.ts
P1Cercle et interactions libres

ConstatLe système basique et le système d’interaction par quête ont des fonctions différentes. Les uniformiser ne doit pas effacer cette distinction.

PropositionMême matière et mêmes boutons. Garder le cercle pour le système basique ; la quête ouvre directement son échange. Autre chose reste une sortie explicite vers le système basique.

src/standalone/builder/bonds/pie.ts ; src/standalone/builder/bonds/wheel.ts ; src/standalone/builder/village.ts
P1Sac, objets et comparaison

ConstatLe sac comporte déjà équipement réel, apparence distincte et comparaison. Il combine une autre famille de boutons et de cadres.

PropositionConserver toutes les informations de Tales of Pirates : requis, durabilité, attributs, bonus et effet sur le héros. Appliquer les surfaces communes ; comparaison alignée avec signes + / −, action principale unique.

src/standalone/inventory.ts ; src/ds2/ds2-world-bagui.js ; src/standalone/character/
P1Fiches, équipage, journal et boutiques

ConstatCes grandes fenêtres ont leurs propres en-têtes, croix, onglets et pieds. Certaines utilisent encore le parchemin.

PropositionUn gabarit de fenêtre commun : titre, fermeture, navigation, contenu défilant et pied fixe. Le contenu conserve son identité ; le cadre et les interactions restent constants.

src/standalone/builder/crew.ts ; src/standalone/builder/bonds/sheet.ts ; src/standalone/hud-skin.ts
P1Navigation en bateau

ConstatLe HUD du bateau et les appels de personnages partagent le bas d’écran avec les commandes à terre.

PropositionLa navigation devient un état du même HUD : bateau, barre et actions contextuelles remplacent les commandes à terre. Ne pas additionner deux barres complètes.

src/standalone/builder/boats/boat-hud.ts ; src/standalone/responsive.ts
P0Réglages et outils admin

ConstatLe tiroir Outils rassemble de nombreux accès. Les outils sont déjà soumis aux droits, mais leur style ressemble encore aux actions de jeu.

PropositionRéglages regroupés ; entrée Administration visible selon les droits existants. En édition, une zone d’outils assumée. Les joueurs gardent une interface de jeu simple.

src/standalone/admin/rights.ts ; src/standalone/builder/tools.ts ; src/standalone/settings/ui.ts
P1Bêta, langue, compte et notifications

ConstatPlusieurs pastilles permanentes ou temporaires se placent indépendamment, avec des corrections de chevauchement spécifiques.

PropositionUn emplacement de service et une file d’annonces. Priorité aux erreurs de sauvegarde/compte ; bêta discrète. Sur mobile, le rangement de la langue dans Menu est une proposition à confirmer, car la règle actuelle la garde visible.

src/standalone/beta.ts ; src/standalone/i18n/picker.ts ; src/standalone/account/ ; src/standalone/live-update.ts
P0Signalement et mise à jour en direct

ConstatLes signalements et la reprise automatique doivent continuer à fonctionner pendant la refonte. Les captures d’interface sont un élément du diagnostic.

PropositionF8 et Signaler toujours atteignables. Toute nouvelle fenêtre protégée reçoit data-c2-modal. Rejouer la capture DOM, la mise à jour différée et le retour de position après chaque lot intégré.

src/standalone/report/ ; src/standalone/live-update.ts ; tests/live-update.test.ts
P0Placement et couches communes

Constatresponsive.ts empile déjà plusieurs blocs et hudObstacles.ts mesure des obstacles. Les styles restent distribués et des z-index très différents subsistent.

PropositionFaire évoluer ces briques en un placement partagé et des couches nommées. Aucun panneau ne choisit seul une position fixe au coin d’écran. Éviter d’ajouter une nouvelle couche de surcharges CSS.

src/standalone/responsive.ts ; src/ui/hudObstacles.ts ; src/standalone/builder/village.ts:643

L’ordre d’intégration proposé.

Après le choix de la direction visuelle.

LOT 1

Le socle

Couleurs, typographie, surfaces, états, couches et placement communs. Réutiliser les fonctions existantes.

LOT 2

Le HUD quotidien

Navigation, réglages, quête principale, journal classé et trois sortes de groupes.

LOT 3

La scène et le combat

Noms, jauges, cible, boss, bulles et choix. Priorité à la visibilité des personnages.

LOT 4

Le tactile

Zones de pouce, petits formats, rotation, textes longs et claviers. Tous les gestes restent disponibles.

LOT 5

Les grandes fenêtres

Sac, comparaison, fiche, équipage, boutiques, navigation en bateau et outils d’édition.

Ce qui a été vérifié — et ce qui reste à jouer.

Les huit planches ont été rendues et examinées comme images, sans navigateur. Le générateur vérifie les limites et les collisions entre les rectangles de commande des quatre maquettes mobiles, ainsi que les largeurs de texte déclarées. Le dossier conserve les sources vectorielles.

Ces contrôles portent sur les maquettes. Ils ne prouvent pas le comportement d’une interface de jeu en mouvement. L’intégration devra vérifier le tactile réel, les bulles en déplacement, les six langues, les fenêtres ouvertes, la capture des signalements et la mise à jour automatique.

Le regroupement visuel des créatures ne doit jamais empêcher de cibler un individu. La présentation de l’équipement ne doit jamais recréer une tenue fictive sur le héros. Le déplacement de la langue dans le menu mobile reste à arbitrer par rapport à la règle actuelle qui la garde visible.

Relevé de vérification · Inventaire détaillé · Sources et prompts des fonds