Une quête suivie, une cible, une interaction prioritaire. Les informations secondaires restent à portée, sans prendre toute la scène.
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

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.
Explorer, combattre, parler et ouvrir son sac demandent des informations différentes. Les éléments se relaient au lieu de s’empiler.
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.

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.tsP0Bureau / 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.tsP0Quê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.tsP0Pastille 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.tsP0Quê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:113P0Groupe 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.tsP0Groupe 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.tsP1Escouade 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:66P0Noms 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.tsP0Identité 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.tsP1PV, 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.tsP0Compé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:39P0Joystick, 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.tsP0Cible, 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.tsP0Bulles 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.tsP1Cercle 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.tsP1Sac, 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.tsP1Navigation 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.tsP0Ré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.tsP1Bê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.tsP0Signalement 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.tsP0Placement 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:643L’ordre d’intégration proposé.
Après le choix de la direction visuelle.
Le socle
Couleurs, typographie, surfaces, états, couches et placement communs. Réutiliser les fonctions existantes.
Le HUD quotidien
Navigation, réglages, quête principale, journal classé et trois sortes de groupes.
La scène et le combat
Noms, jauges, cible, boss, bulles et choix. Priorité à la visibilité des personnages.
Le tactile
Zones de pouce, petits formats, rotation, textes longs et claviers. Tous les gestes restent disponibles.
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