← Retour aux articles

ARTICLE #4

15/12/2025

ARTICLE #4

Jeu – Début du design et navigation à la manette – Alice

Après avoir posé les bases techniques du jeu, j’ai commencé à travailler sur le début du design, en particulier sur l’écran d’accueil et l’expérience utilisateur.

Écran d’accueil et sélection des musiques

J’ai mis en place un premier écran d’accueil fonctionnel, permettant de parcourir les musiques directement depuis le menu.

La navigation se fait maintenant à l’aide du joystick : le joueur peut faire défiler les différentes musiques de manière fluide.

L’objectif était de rendre la sélection plus naturelle et adaptée à une utilisation sur borne, sans dépendre uniquement de la souris ou du clavier.

Premiers éléments visuels

J’ai commencé à structurer visuellement l’interface (placement des éléments, transitions simples), même si le design reste encore en cours d’amélioration.

Site - Intégration de la Hero Section - Léna

Après avoir mis en place les bases du front, je me suis attaquée à la hero section de la page d'accueil. En m'appuyant sur les maquettes existantes, j'ai intégré les différents éléments visuels de cette section en utilisant des données temporaires dans un premier temps : textes en lorem ipsum, image placeholder en lieu et place de la vidéo prévue. J'ai également mis en place un encart "Ajouter à la Wishlist", incluant des liens vers les plateformes Steam et Xbox. 

Site – Système de liaison joueur / borne – Théo

L'un des enjeux du projet était de permettre aux joueurs de s'identifier sur la borne à partir de leur compte sur le site, afin que chaque partie soit rattachée à un vrai profil avec un historique de scores consultable en ligne.

Génération et validation du code temporaire

Le principe repose sur un code à 8 caractères, généré aléatoirement par le serveur. Quand le jeu démarre une session, il envoie une requête à l'API pour obtenir un ou deux codes selon le nombre de joueurs. Ces codes sont stockés en base avec un statut « non utilisé » et expirent automatiquement au bout de 15 minutes.

Le jeu affiche ensuite le code à l'écran et interroge régulièrement l'API pour savoir si un joueur l'a utilisé. De son côté, le joueur se connecte sur le site et saisit le code dans un formulaire dédié. Plusieurs vérifications sont effectuées : existence du code, expiration, utilisation préalable. Si tout est valide, le code est rattaché au compte du joueur et le jeu peut lancer la partie en mode connecté.

Multi-joueur et stateless

Le système gère jusqu'à deux joueurs simultanés, chacun avec son propre code. Ce mécanisme permet de garder l'API stateless : pas de mot de passe à saisir sur la borne, pas de session persistante, et une sécurité assurée par l'expiration automatique des codes.

Graphisme – Structuration des interfaces et recherches visuelles - Faustine

Dans la continuité des premiers wireframes réalisés précédemment, j’ai poursuivi le travail de structuration des interfaces du jeu sur Figma.

L’objectif était d’affiner l’organisation des écrans en clarifiant la hiérarchie des éléments et en facilitant la compréhension des différentes actions possibles pour le joueur. J’ai notamment retravaillé la disposition des composants interactifs (boutons, zones de sélection, navigation) afin d’assurer une transition fluide entre les différentes scènes du jeu.

En parallèle, j’ai entamé une phase de recherche autour de la miniature du jeu. J’ai exploré plusieurs pistes visuelles en testant différentes compositions, couleurs et mises en avant des éléments clés, avec l’objectif de produire un visuel à la fois lisible, attractif et représentatif de l’univers du projet.