Écrans UI de Jeu (Game UI Screens)

Écrans UI de Jeu

Faites en sorte que chaque écran fasse partie du même jeu. Travaillez à partir du meilleur écran existant du jeu plutôt que d'un style web générique, conservez une navigation digne d'un jeu et vérifiez chaque écran aux tailles que les joueurs utilisent. Adaptez-vous à la technologie d'UI (DOM par-dessus un canvas, UI moteur de jeu ou UI in-scène). Utilisez game-foundation pour le flux d'écrans lui-même s'il est disponible ; cette compétence couvre l'apparence et le comportement des écrans.

1. Inventaire

Listez chaque écran et superposition, y compris ceux qu'on oublie facilement : titre, menu principal, chaque menu de mode, garage ou équipement, paramètres, écrans de salon ou de salle, flux de rejoindre et d'invitation, chargement, pause, résultats, erreurs, états vides, le HUD, et les écrans réservés au développement. Pour chacun, notez le fichier, comment on y accède, comment on en sort, et s'il nécessite un serveur ou des données sauvegardées pour apparaître. Les écrans qui nécessitent le serveur de jeu doivent être exécutés avec celui-ci, ou signalés comme non vérifiés.

2. Extraire le contrat de style

Choisissez l'ancre : l'écran qui ressemble déjà le plus au jeu (généralement le titre ou le menu principal). Notez ses règles avant de toucher aux autres écrans : polices et traitement du titre, jetons de couleur, arrière-plan (scène 3D en direct, fond flou, illustration), formes des panneaux, états des boutons (inactif, survol, focus, enfoncé, désactivé), échelle d'espacement, mouvement, et indices sonores. Placez les parties partagées dans des jetons ou des classes partagées pour que les écrans ne puissent pas dériver. Lisez style-contract.md pour le modèle et les conventions du jeu.

3. Appliquer

• Dispositions de jeu plein écran, pas de cartes web. Pas de défilement de document sur le bureau ; les modales s'adaptent au viewport ; les longues listes défilent dans leur propre panneau.
• Navigation de jeu. Échap ou la commande de retour quitte chaque écran ; le focus clavier et manette se déplace de manière prévisible avec un état de focus visible ; l'action principale est évidente.
• Portes d'onboarding sous forme de flux. Si un nom ou un profil est requis avant certains modes, demandez-le en une seule étape de démarrage courte (champ nom + Jouer) au lieu d'afficher un menu plein de boutons verrouillés. Conservez la même validation dans les paramètres pour qu'une modification ultérieure ne puisse pas la casser.
• Une seule entrée quand une suffit. Ne demandez pas aux joueurs de choisir entre des options qui mènent au même endroit (par exemple trois points d'apparition sur une même carte) ; donnez une action principale et proposez les variantes dans le jeu.
• Hiérarchie du HUD. Lisez hud-and-loading.md. Chaque nombre étiqueté, rien qui ressemble à un affichage de débogage, éléments contextuels uniquement quand ils sont pertinents.
• Écrans de chargement avec un mouvement qui correspond au jeu, une progression réelle quand elle est disponible, et pas de flash pour les chargements courts.
• L'espacement s'adapte à la hauteur du viewport (avec clamp() ou des unités viewport) pour que les menus hauts ne soient ni tassés ni étalés sur les grands écrans.

4. Renommage des noms visibles par les joueurs

Lors du renommage du jeu, des modes, des lieux ou des objets : recherchez chaque variante orthographique (casse, espacements, traits d'union, fautes de frappe) dans les chaînes UI, les titres HTML, les manifests, la documentation, les noms de packages et les clés de stockage. Migrez les données sauvegardées lorsqu'une clé de stockage change afin que les joueurs existants conservent leur profil. Conservez les IDs internes stables sauf si la tâche exige de les modifier.

5. Vérifier

Vérifiez chaque écran touché à 1440×900, 1280×720, 1024×600, et à la taille téléphone (375×812), ainsi qu'aux cibles propres du projet. Utilisez des captures d'écran, et utilisez __pt.layout() de playtest (ou une vérification équivalente de boîte englobante) pour détecter le défilement de page, les contrôles hors écran et les chevauchements. Parcourez l'entrée et la sortie de chaque écran. Signalez les écrans que vous n'avez pas pu ouvrir et la raison.