Jeux à webcam : comment j’ai créé un jeu de course contre un dinosaure

Je voulais faire un jeu de course où appuyer sur une touche ne comptait pas comme courir. Si le joueur arrêtait de bouger, le personnage devait s’arrêter aussi. S’il trouvait un nouveau coup d’accélérateur, la fuite devait paraître plus facile. Et s’il se contentait d’agiter les bras devant la caméra, le jeu devait faire la différence.

Cette idée est devenue Dino Survival, un jeu de navigateur où tu cours sur place pour échapper à un T-Rex. Dit en une phrase, ça paraît simple. En faire un vrai jeu, ça voulait dire résoudre une question bien plus difficile : comment une webcam transforme-t-elle un corps en mouvement en manette qui paraît équitable ?

Pourquoi les jeux à webcam ont besoin d’un autre type de manette

La plupart des jeux de course sans fin réduisent le mouvement à un bouton, un balayage du doigt ou une vitesse automatique. C’est pratique, parce que l’entrée est exacte : un bouton est enfoncé ou relâché, point.

Un corps, c’est plus brouillon. Les gens n’ont ni la même taille, ni la même pièce, ni le même angle de caméra, ni la même façon de courir. Les genoux peuvent sortir du cadre. Un vêtement peut cacher une articulation. Avec peu de lumière, un repère peut trembler même quand la personne reste immobile.

Je ne pouvais donc pas associer directement une pose à une vitesse. Il me fallait une chaîne capable d’observer le mouvement dans le temps, d’écarter le bruit et de réagir assez vite pour que tout paraisse relié :

1. Demander au navigateur l’accès à la caméra.
2. Estimer les repères du corps dans chaque image vidéo.
3. Mesurer le mouvement alterné des jambes et celui du corps entier.
4. Convertir les pas par minute récents en une allure de jeu stable.
5. Utiliser cette allure pour faire avancer le coureur et changer l’écart avec le dinosaure.

Le navigateur gère l’autorisation de la caméra via MediaDevices.getUserMedia(). Dino Survival demande uniquement la vidéo et utilise une caméra frontale quand il y en a une. Les images en direct sont ensuite traitées par le modèle de pose dans le navigateur.

Les repères de pose ne sont pas la même chose que la course

Dino Survival utilise MediaPipe Pose Landmarker en mode vidéo. Le modèle peut renvoyer 33 repères du corps, mais plus de données ne donnent pas automatiquement une meilleure manette.

Pour la cadence, je me concentre sur un groupe plus restreint : les épaules, les hanches, les genoux et les chevilles. Les épaules et les hanches me donnent un axe approximatif du buste. Les genoux et les chevilles me disent comment les jambes bougent par rapport à cet axe.

Cette mesure relative est importante. Si je mesurais seulement la hauteur d’un genou à l’écran, un téléphone penché ou un joueur décentré pourrait fausser le résultat. En projetant le mouvement des jambes le long de l’axe du buste du joueur, le détecteur dépend moins de la façon dont la caméra est placée.

Le jeu vérifie aussi que les deux hanches et les deux genoux sont visibles. Sinon, il te demande de reculer au lieu d’inventer en silence une allure à partir de données incomplètes. Dans un jeu à commande par le mouvement, un retour honnête vaut mieux que de faire croire que l’entrée est fiable.

Transformer l’alternance des jambes en cadence

Courir sur place crée un schéma qui se répète. Un genou monte, atteint un sommet et redescend. Puis l’autre jambe fait pareil. Le détecteur suit le mouvement des genoux et des chevilles et cherche ces sommets en alternance.

J’utilise des seuils adaptatifs pour chaque jambe, parce qu’un chiffre fixe ne convient ni à tous les corps ni à toutes les caméras. Un joueur plus grand peut produire un mouvement bien plus ample à l’écran qu’un joueur plus petit placé plus loin. Le détecteur apprend une plage locale utile, tandis qu’un plafond strict empêche cette adaptation de devenir trop permissive.

Après un sommet valide, la même jambe entre dans une courte période réfractaire de 130 millisecondes. Elle évite que le tremblement des repères en haut d’une levée de genou devienne deux ou trois pas imaginaires. Les pas valides entrent dans une fenêtre glissante de trois secondes, assez longue pour lisser le chiffre, mais assez courte pour remarquer un vrai changement d’effort.

S’il n’y a aucun pas pendant environ 1,1 seconde, la cadence retombe aussitôt à l’arrêt. Je préfère cette remise à zéro nette à un long déclin progressif. Quand le joueur s’arrête, le jeu doit s’arrêter.

Comment j’ai empêché les bras qui s’agitent de passer pour un sprint

Les premiers systèmes de mouvement récompensent souvent n’importe quelle activité dans l’image. Ça crée un raccourci évident : garder les pieds immobiles et bouger les mains. Et ça fait passer les secousses de la caméra pour de l’exercice.

Dino Survival ajoute un second filtre, basé sur les hanches. Il cherche un vrai rebond vertical du corps sur une courte fenêtre. La cadence ne compte que lorsque le schéma d’alternance des jambes et ce signal de mouvement plus large concordent.

Il ne cherche pas à noter la technique de course de qui que ce soit. Il demande simplement une preuve que le bas du corps fait le travail. Le mouvement des bras seul n’ouvre pas le filtre, et le petit bruit de l’estimation de pose ne fait pas avancer le coureur.

Ça a été l’une de mes plus grandes leçons en créant des jeux à webcam : une bonne entrée, ce n’est pas détecter le plus de mouvement possible. C’est détecter le bon mouvement et expliquer clairement quand la caméra ne le voit pas.

Des pas par minute à la poursuite du dinosaure

Le détecteur de cadence produit des pas par minute, mais le jeu n’a pas besoin d’une mesure de laboratoire. Il lui faut un signal clair et jouable. Je range le résultat dans trois paliers d’effort faciles à comprendre : petit trot autour de 70 pas par minute, course à 120 et sprint à 160.

Ces paliers deviennent une allure normalisée. Le moteur de survie s’en sert pour faire avancer le joueur vers un objectif d’évasion de 50 unités. Pendant ce temps, le dinosaure a sa propre vitesse, qui augmente au fil de la course.

L’écart varie selon la différence entre ces deux vitesses. Cours plus vite que le dinosaure et tu gagnes de l’espace. Relâche l’effort et il commence à te rattraper. Atteins la jeep et tu t’échappes. Laisse l’écart tomber à zéro et la poursuite est finie.

C’est ce qui donne à ce jeu un autre goût qu’un jeu de course de dinosaure classique. Le dinosaure n’est pas un simple chrono avec des dents. C’est une explication visuelle de l’effort que tu fournis à cet instant.

Le monde ne bouge que si tu bouges

Le sentier est fait d’une séquence d’images de jungle. Je les indexe sur la distance cumulée plutôt que sur l’horloge. Si le joueur arrête de courir, le décor se fige. Il repart, et le sentier recommence à défiler sous le coureur.

La taille apparente et la position du dinosaure dépendent de l’écart. En se rapprochant, il occupe plus de place dans la scène. La poussière, les traits de vitesse et l’affichage de l’allure vont dans le même sens. Plusieurs petits signaux répondent à une seule question : est-ce que je lui échappe ?

La boucle de rendu utilise requestAnimationFrame(), qui demande au navigateur d’exécuter le travail d’animation avant le prochain affichage. J’utilise l’horodatage du rappel pour calculer le temps écoulé : le mouvement dépend donc du temps, sans supposer que tous les appareils dessinent le même nombre d’images par seconde.

J’utilise aussi un coureur pré-rendu plutôt que de détourer la vraie personne dans la scène à chaque image. Ce choix réduit le traitement visuel sur mobile et donne au jeu un personnage constant. La webcam est la manette, pas l’illustration finale.

Pourquoi le calibrage fait partie de la conception du jeu

Le réglage de la caméra n’est pas un écran technique que je peux cacher au joueur. C’est le premier niveau.

Dino Survival affiche un guide de cadrage et attend que les repères nécessaires soient visibles. Il explique quand reculer et laisse au joueur un court compte à rebours avant la poursuite. Ce moment pose le contrat : garde le bas du corps visible, cours sur place et le jeu te suivra.

Il existe aussi un mode démo au clavier. Il permet d’explorer le jeu sans autoriser la caméra, de l’essayer sur une configuration non prise en charge ou simplement de comprendre d’abord les règles. L’expérience complète reste la version caméra, parce que le lien physique entre l’effort et la fuite est tout l’intérêt.

Ce que j’ai appris en créant Dino Survival

Le plus dur n’était pas de dessiner un T-Rex. C’était de décider ce qui devait compter comme un pas.

Une manette corporelle fiable demande plusieurs contrôles modestes qui travaillent ensemble. Les repères établissent où se trouve le corps. Les sommets alternés des genoux et des chevilles suggèrent la cadence. Le mouvement des hanches confirme que le joueur court vraiment. Une fenêtre glissante lisse le résultat. Une remise à zéro rapide garde l’arrêt honnête. Le moteur de jeu transforme ensuite ce signal en un écart que le joueur comprend sans lire un mode d’emploi.

C’est ce qui me plaît dans la commande par le mouvement dans le navigateur. La technologie s’efface quand le retour est bon. Tu ne penses ni aux repères, ni aux seuils, ni aux horodatages d’images. Tu vois un dinosaure, tu l’entends se rapprocher et tu cours.

Pour l’angle conception et recherche, lis pourquoi je pense que Dino Survival est le bon genre de jeu d’exercice.

Tu peux jouer à Dino Survival gratuitement dans ton navigateur. Rien à télécharger. Si tu veux voir comment la même chaîne webcam gère les mouvements du haut du corps, lis comment j’ai créé Monster Punch, un jeu de boxe en ligne. Pour d’autres jeux qui démarrent instantanément, consulte mon guide des jeux gratuits sans téléchargement.