Tipolino
Tipolino
27 mars 2026
Travaux étudiants
UI / UX Design
Transformez votre smartphone en manette et rejoignez l'arène !
Tipolino est un Party-Game multijoueur hybride où votre téléphone devient l'arme ultime. Le concept est simple : deux équipes (Margherita vs Fromagio), une pizza au centre, et un chaos total en temps réel sur grand écran.
Le Projet
Dans le cadre d’un workshop à l’École de design de Nantes Atlantique, l’objectif était de concevoir une expérience de jeu multijoueur utilisant des technologies de communication en temps réel (WebSockets).
Tipolino est né de la volonté de créer un pont entre le mobile et le grand écran. Le concept ? Deux équipes, la Margherita et la Fromagio, s'affrontent pour le contrôle d'une pizza. Le smartphone se transforme en manette dynamique, tandis que l’action se déroule sur un écran partagé en 3D.
L’Expérience (Gameplay)
Coopétition : La pizza ralentit celui qui la porte. Pour gagner, il faut savoir la garder, mais surtout savoir faire la passe à ses coéquipiers pour échapper aux adversaires.
Interaction physique : Utilisation de joysticks virtuels (nipple.js) pour un contrôle fluide.
Confrontation : Les joueurs sans la pizza doivent "pousser" le porteur pour intercepter l'objectif, créant un chaos organisé et ludique.
Mon Rôle & Approche Technique
Ce projet est le fruit d'un travail collaboratif intense au sein d'une équipe de 6 étudiants (Mathilde Calu, Enguerrand Caffre, Romain Choblet, Paul Cochet, Tom Durand et moi-même).
De mon côté, j'ai particulièrement exploré la synergie entre le design et le développement assisté par Intelligence Artificielle :
Intégration UI to Code : J'ai pris en charge l'intégration des interfaces conçues sur Figma. En utilisant des modèles d'IA (Gemini et Claude via Antigravity) pour traduire mes intentions de design en code fonctionnel, j'ai pu dépasser mes limites techniques et me concentrer sur l'expérience utilisateur.
Direction Artistique & IA Générative : J'ai piloté la création de l'univers visuel et des supports de communication en générant des assets par IA, assurant une cohérence forte entre le gameplay et l'image de marque.
UX Gaming : Pour cette première incursion dans le Game Design, j'ai repensé l'ergonomie pour un contexte de "partie en continu" et géré l'intégration des flux caméras des joueurs via WebRTC (PeerJS).
Stack Technique
Frontend : HTML5, CSS3, Three.js (Rendu 3D), Rapier.js (Physique).
Manettes : Mobile First UI, Nipple.js, API Vibration.
Backend : Node.js, Express, WebSocket (ws).
IA Tooling : Antigravity (Gemini/Claude) pour le code, Midjourney/Runway pour les assets.
