Projet

Beatcube

Jeu vidéo de rythme musical FPS en réalité virtuel

BeatCube est un jeu de rythme en réalité virtuelle développé en équipe de trois, dans l'esprit de Beat Saber : casque VR sur la tête, le joueur frappe des cubes en rythme avec la musique pour maximiser son score et sa précision. Contrairement à un jeu de rythme classique à bibliothèque fermée, BeatCube permet à chaque utilisateur d'uploader ses propres musiques depuis une plateforme web, puis de les retrouver directement jouables dans le jeu en VR.



Le projet a été réalisé au semestre 6 de mon BUT Informatique, dans le cadre d'un projet tutoré, en collaboration avec Enzo Bordet et Eudes Charlot, et soutenu devant un jury composé d'Isabelle Portail (modélisation 3D) et Patrice Armand (bases de données relationnelles et non relationnelles).



Contexte et objectifs

Dans le cadre de la formation, les projets tutorés impliquaient à l'origine de travailler avec des associations partenaires sur des thématiques imposées. Plutôt que de suivre une thématique qui ne nous motivait pas particulièrement, nous avons choisi, à trois, de proposer un projet libre, plus ambitieux et plus en phase avec nos intérêts personnels : un jeu vidéo relié à une plateforme web. L'objectif pédagogique était double : travailler sur un projet qui nous motive réellement tous les trois, et permettre à chacun de progresser dans son propre domaine technique tout en apprenant à faire collaborer trois technologies très différentes (site web, API, jeu en réalité virtuelle). L'idée du jeu de rythme s'est inspirée d'un jeu auquel deux d'entre nous avions déjà joué, dans l'esprit de Beat Saber, avec la volonté d'y ajouter une vraie valeur ajoutée : permettre à chaque joueur d'importer sa propre musique plutôt que de se limiter à une bibliothèque fermée. Le projet s'est déroulé entre début janvier et début avril.



Le projet s'articule autour de trois briques développées en parallèle, chacune confiée à un membre de l'équipe :

  • Le jeu en VR (Unity), développé par Eudes : la mécanique de jeu, la génération des cubes rythmés à partir des musiques, le suivi des scores et de la précision en temps réel, ainsi que l'intégration avec le casque VR.
  • L'API backend (Symfony), développée par Enzo : la logique métier, les routes, l'authentification, la persistance en base de données, ainsi que le pont technique reliant le site web et le jeu Unity.
  • Le site web (React), dont j'ai eu l'entière responsabilité : l'interface permettant aux joueurs de créer un compte, d'uploader leurs musiques, de suivre leurs statistiques, de consulter le classement mondial, et pour les administrateurs de modérer la communauté. Je devais connecter chaque interaction du site aux routes fournies par Enzo, qui les reliait ensuite à la base de données.


Au-delà du développement du site, j'ai également collaboré étroitement avec Enzo sur la direction artistique du jeu : il avait besoin d'assets visuels dans un style néon/cyberpunk pour son environnement Unity. J'ai réalisé et retravaillé ces visuels sous Photoshop, parfois complétés par du code, avant de les lui transmettre pour intégration directe dans le jeu.



Décor 3D du lobby BeatCube réalisé sous Blender

Décor 3D du lobby BeatCube, assets néon

Planche récapitulative des assets du projet BeatCube

Mon périmètre : le site web

  • Authentification complète (connexion, inscription avec validation du mot de passe, confirmation, gestion des erreurs serveur)
  • Sessions sécurisées par token, avec routes protégées (utilisateur connecté / administrateur uniquement)
  • Upload de musiques personnelles avec métadonnées (titre, artiste, année, fichier audio)
  • Profil joueur : score total, précision moyenne, nombre de parties, full combos, niveau calculé, achievements à débloquer
  • Classement mondial en temps réel, avec badges de difficulté et mise en avant du rang personnel
  • Panel d'administration : recherche et filtrage des joueurs, consultation de leurs uploads, bannissement temporaire ou définitif motivé
  • Interface entièrement personnalisée : charte graphique néon (cyan / rose / rouge), animations et transitions dédiées

Stack technique

React 19, TypeScript, Vite, Tailwind CSS 4, React Router 7, Axios pour la communication avec l'API REST Symfony via authentification par token.


Interface web de BeatCube - vue 1

Interface web de BeatCube - vue 2

Interface web de BeatCube - vue 3

Interface web de BeatCube - vue 4

Interface web de BeatCube - vue 5

Interface web de BeatCube - vue 6


Lien du site : http://beatcube.eudescharlot.fr/

Retour d'expérience

La principale difficulté a été un temps d'adaptation à React. Habitué à développer en langage web natif (HTML, CSS, JavaScript sans framework), il a fallu apprendre à penser différemment : découper l'interface en composants réutilisables, raisonner en termes de props et d'état plutôt qu'en manipulation directe du DOM, et découvrir des outils comme Axios pour gérer les appels à l'API. Pour surmonter cette difficulté, j'ai principalement fonctionné par autoformation : documentation officielle de React et d'Axios, tutoriels vidéo, et beaucoup d'essais-erreurs directement sur le projet pour comprendre le fonctionnement réel des composants et du cycle de vie de l'application. Cette montée en compétence sur un framework structuré a représenté un vrai changement de méthode de travail, mais elle s'est révélée précieuse pour organiser un projet de cette taille en équipe, chaque brique (web, API, jeu VR) devant rester indépendante tout en communiquant de façon fiable avec les deux autres. Elle m'a aussi permis de mieux comprendre les enjeux propres à l'utilisation d'un framework par rapport au développement natif, que je pratiquais jusque-là par habitude.



Compétence humaine développée : la coordination d'équipe

Travailler sur trois briques aussi interdépendantes que le web, l'API et le jeu VR nous a obligés à communiquer très régulièrement sur l'avancée de chacun, pour signaler rapidement ce qui bloquait ou ce qui changeait d'un côté et pouvait impacter les deux autres. Cette coordination passait principalement par Git, pour suivre concrètement l'état d'avancement du code de chacun, mais aussi par des échanges informels sur Discord pour rester en contact au quotidien et réagir vite en cas de blocage. Ce fonctionnement m'a appris à mieux communiquer sur mon propre avancement et à anticiper les dépendances entre mon travail et celui des deux autres membres de l'équipe.



Lien avec mon PPP

Ce projet a confirmé mon envie de me diriger vers le développement de solutions qui m'intéressent réellement, plutôt que de subir un cadre imposé. Sur le plan technique, la découverte de React m'a ouvert à l'univers du développement web basé sur des frameworks, un pont naturel vers le développement mobile (React étant proche de React Native), un domaine que j'avais déjà commencé à explorer par curiosité personnelle avant ce projet. BeatCube a ainsi consolidé mon PPP autour du métier de développeur web, avec une vraie ouverture vers les technologies front modernes au-delà du seul développement natif.