Engine-neutral game UI/UX: responsive HUDs, menus, focus navigation
Concevoir et construire des UI/UX de jeu qui survivent à tous les écrans — layout responsive par ancres, scaling de résolution et safe areas, navigation clavier/gamepad au focus, piles d'écrans, HUD pilotés par événements
- Quoi
- Concevoir et construire des UI/UX de jeu qui survivent à tous les écrans — layout responsive par ancres, scaling de résolution et safe areas, navigation clavier/gamepad au focus, piles d'écrans, HUD pilotés par événements
- Coût
- Gratuit
- Prérequis
- un projet de jeu dans un moteur (Godot, Unity, etc.) avec une UI à construire ou corriger — le skill est un guide d'architecture que l'agent suit, pas un logiciel à installer
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill de @gamedev-skills pour l'architecture UI/UX de jeu moteur-neutre (il possède l'architecture et délègue l'API concrète des widgets au skill UI du moteur) : un workflow en 7 étapes — ancres + conteneurs, jamais de pixels absolus ; une stratégie de scaling par résolution de référence (expand vs letterbox) ; respecter la safe area (encoches, overscan TV) ; rendre chaque écran navigable clavier/gamepad (focus initial, voisins de focus, surlignage de focus visible) ; modéliser les écrans en pile push/pop (pause sur jeu, reprise) ; piloter le HUD par événements (`health_changed`, `score_changed`), jamais par polling chaque frame ; vérifier sur de vraies résolutions et appareils, gamepad uniquement. Patterns avec exemples Godot 4.7 et Unity 6.3 LTS (presets d'ancres Godot, ancres RectTransform et CanvasScaler Unity, `DisplayServer.get_display_safe_area()` / `Screen.safeArea`, `grab_focus()` / `EventSystem.SetSelectedGameObject`). Une liste de pièges (résolution de design unique, pas de politique d'aspect ratio, safe area ignorée, pas de focus initial, polling dans `_process`/`Update`, polices minuscules fixes, flow de menus en flags booléens, chaînes anglaises hardcodées) et un fichier de références avec le détail layout-and-flow (modes stretch, maths de safe area, patterns de focus, UI diégétique vs non-diégétique, accessibilité, layout prêt pour la localisation). Bémols honnêtes : guide d'architecture seulement — les widgets concrets, thèmes et styles viennent des skills compagnons (godot-ui-control, Unity UGUI/UI Toolkit) non fournis ici ; le jus visuel appartient à `game-feel`, l'UI de dialogue à `dialogue-systems` ; tester sur le matériel cible. Licence Apache-2.0. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet de jeu dans un moteur (Godot, Unity, etc.) avec une UI à construire ou corriger — le skill est un guide d'architecture que l'agent suit, pas un logiciel à installer Installe-moi « UI/UX de jeu moteur-neutre : HUD responsives, menus, navigation au focus ». Il enseigne à mon agent l'architecture UI de @gamedev-skills : layout par ancres (jamais de pixels absolus), scaling par résolution de référence avec politique d'aspect, insets de safe area, navigation clavier/gamepad au focus sur chaque écran, écrans en pile push/pop, et HUD pilotés par événements au lieu de polling chaque frame — avec exemples Godot 4.7 et Unity 6.3 LTS, liste de pièges, et fichier de références approfondi. Licence Apache-2.0. Dépôt : https://github.com/gamedev-skills/awesome-gamedev-agent-skills/blob/main/skills/disciplines/game-ui-ux/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « game-ui-ux ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. pointer l'agent vers l'UI de jeu à construire ou corriger et le moteur cible ; pour les APIs de widgets concrètes du moteur, installer séparément les skills compagnons godot-ui-control ou Unity UI — non fournis ici ; vérifier l'UI à de vraies résolutions et en navigation gamepad uniquement). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.