Out of Stamina : étude de cas d'un jeu 3D de course de nuit

Objectifs

Après des sites et des extensions, je voulais un projet très différent : un vrai jeu en 3D, entièrement dans le navigateur. Out of Stamina est un jeu de survie à la première personne. On incarne une joggeuse (ou un jogger, au choix dans le menu) qui court sur une route de campagne à 3 h du matin, poursuivie par des agresseurs. Il faut tenir jusqu'à 6 h : au lever du jour, ils s'enfuient et on a gagné.

Quatre objectifs ont guidé le projet.

• Un jeu qui se lance en un clic : aucune installation, un simple lien, sur ordinateur comme sur mobile.
• Une ambiance avant tout : la nuit, la brume, la route mouillée, les phares, le silence. Le décor doit faire peur sans avoir besoin de monstres.
• Des règles lisibles sans tutoriel : ni barre de vie ni jauge, mais un écran qui bleuit quand on s'essouffle et rougit quand on est touché.
• Un code propre : du TypeScript strict, vérifié à chaque build, avec tous les réglages regroupés au même endroit.

Le principe : tenir jusqu'à l'aube

La partie suit une horloge. La nuit va de 3 h à 6 h et se joue en environ six minutes réelles. L'heure s'affiche en haut à gauche. À partir de 5 h, le ciel s'éclaircit et les lampadaires s'éteignent ; à 6 h, le jour se lève, les poursuivants fuient et c'est la victoire.

Le joueur peut courir, marcher, sauter, se retourner et donner un coup de pied. Tout au long de la nuit, les agresseurs arrivent en groupes de plus en plus nombreux et de plus en plus rapides. Ils rôdent d'abord, puis chargent quand on est trop près. Un coup de pied les assomme quelques secondes, et les voitures qui passent sur la route les renversent aussi.

Le jeu est gratuit et jouable sur outofstamina.com. Les commandes sont au clavier (Z, Q, S, D, Espace, E, R) ou, sur mobile, avec un joystick tactile et des boutons.

Endurance, vie et sang-froid : un jeu sans barres

Le cœur du jeu tient dans une idée : gérer son souffle. Courir plus vite qu'au trot, sauter et donner des coups de pied vident l'endurance. Elle remonte en marchant, et bien plus vite à l'arrêt. Quand elle est à zéro, on ne peut plus que trottiner : c'est le « Out of Stamina » du titre.

• Endurance : les bords de l'écran bleuissent à mesure qu'elle baisse, et le bleu respire quand on est à bout de souffle.
• Vie : chaque coup d'un agresseur en retire, et les bords de l'écran rougissent, avec un battement quand elle est basse.
• Canettes : ramassées sur la route (parfois sur le toit d'une voiture), elles rendent de l'endurance.
• Voitures garées : on peut sauter dessus pour reprendre son souffle, car les agresseurs ne savent pas y grimper. Mais ils la frappent jusqu'à ce qu'elle fume, prenne feu et explose : il faut sauter avant.

Les règles s'expliquent en jeu, par de courts conseils affichés en haut à droite, plutôt que dans un écran de tutoriel.

Le téléphone : regarder derrière soi

Courir sans voir ce qui nous poursuit serait injuste. Le joueur peut donc lever son téléphone : un petit écran apparaît en haut à droite et montre la vue arrière, avec le visage du personnage au premier plan. On y voit les agresseurs se rapprocher, et le personnage pleure quand ils sont tout près.

Techniquement, c'est un second rendu de la scène vers l'arrière, copié sur l'écran du téléphone, avec un troisième rendu pour le visage. Pour ne pas alourdir le jeu, sa résolution est plafonnée et il n'est pas rafraîchi à chaque image, surtout sur mobile.

Un rendu 3D qui doit tenir dans un navigateur

Le jeu tourne en WebGL avec three.js. L'enjeu : obtenir une image sombre et crédible tout en restant fluide, y compris sur un téléphone.

• Post-traitement : bloom (halo des lumières), tonalité cinéma ACES, puis une passe maison qui ajoute vignette, grain et légère aberration chromatique, avec un flash rouge quand on est frappé.
• Textures générées par le code : l'asphalte mouillé, les flaques, le béton, l'herbe et les ombres douces sont créés au démarrage, sans fichier d'image.
• Ciel et lumière : un ciel en shader (étoiles, lune, nuages), un brouillard qui reprend la couleur de l'horizon, puis un lent passage de la nuit à l'aube.
• Un monde qui se construit au fur et à mesure : la route sinueuse, qui monte et descend, est calculée par formules et découpée en cellules créées autour du joueur, puis libérées derrière lui. Chaque cellule fusionne ses éléments en un seul objet par matériau pour limiter le travail du processeur graphique.
• Qualité adaptative : la résolution baisse automatiquement quand le nombre d'images par seconde chute, et le profil mobile désactive le bloom et l'antialiasing, avec un plafond de 30 images par seconde.

Stack et architecture

Contrairement à mes projets Prismic, ce jeu n'a pas de CMS : tout est dans le code et dans quelques fichiers de ressources.

• three.js et TypeScript : environ 8 700 lignes de TypeScript strict, vérifiées par ESLint et par le compilateur à chaque build.
• Vite : le serveur de développement et le build statique, déployé sur Vercel.
• Tailwind CSS v4 : toute l'interface (écran-titre, menu, pause, HUD, commandes tactiles) est construite en TypeScript avec des classes Tailwind, sans feuille de style écrite à la main.
• Web Audio : un graphe audio maison avec une ambiance (vent, grillons, oiseaux), les bruitages (klaxons, moteurs, explosion) et les voix, dont le volume se règle dans le menu.
• Modèles 3D allégés avec Blender : les personnages viennent de Character Creator et les voitures d'un pack low poly. Des scripts Blender les ramènent à un poids jouable : environ 23 000 triangles par poursuivant au lieu de 1,7 million, et environ 13 000 par voiture.
• Un code organisé par domaine : le monde, les entités, l'audio, l'interface et les effets ont chacun leur dossier, et tous les réglages (vitesses, endurance, durée de la nuit, poursuivants) sont regroupés dans un seul fichier de configuration.

Choix et défis

Trois décisions ont façonné le projet.

Faire peur sans montrer de gore. Le jeu reste sombre et tendu, mais le sang n'apparaît que lors d'un choc, sans démembrement ni blessures détaillées. L'angoisse vient surtout de la brume, du son et des silhouettes qui arrivent.

Un jeu lourd qui doit se charger vite. Une fois construit, le jeu pèse environ 50 Mo, dont une grande partie de modèles et de sons. J'ai allégé les modèles dans Blender, chargé en priorité le personnage choisi (l'autre ne l'est qu'au premier clic) et prévu la dégradation de la qualité plutôt que des saccades.

Rendre le jeu partageable. Le site a ses balises de partage Open Graph, des données structurées VideoGame, un sitemap et un fichier llms.txt. J'ai aussi préparé deux paquets de diffusion : un pour itch.io, et une version « sandbox » pour les sites qui affichent le jeu dans une iframe sans origine, où les scripts modules et les requêtes réseau sont bloqués. Dans cette version, les modèles et les sons sont embarqués dans des scripts classiques.

Bilan et suite

Out of Stamina est né vite : le dépôt git est ouvert le 6 novembre 2026 et compte une quarantaine de commits cinq jours plus tard. Je l'ai conçu avec Claude Code, à partir d'un brief écrit puis d'itérations : réglages d'ambiance, équilibrage, corrections de rendu. L'écran-titre le signe d'ailleurs : « Claudified by Guillaume Ducuing ».

Le jeu vient d'être mis en ligne : je n'ai pas encore de chiffres de fréquentation ou de retours de joueurs, et je compléterai cette étude de cas quand j'aurai du recul.

La suite : un second niveau, un quartier résidentiel avec ses maisons, ses jardins et ses silhouettes derrière les rideaux, est déjà dans le code mais n'est pas encore proposé dans le menu. D'autres niveaux sont prévus.

👉 Jouer au jeu : outofstamina.com