Jeux de gardien de but : comment Keeper recrée la vraie pression des réflexes

Je voulais construire un jeu de football autour de la partie la plus dure d’un arrêt : la courte fenêtre entre la lecture du tir et le moment où une partie du corps se place sur sa trajectoire.

Ça excluait presque tout de suite les boutons. Cliquer à gauche ou à droite pouvait reproduire le résultat, mais pas la sensation de réagir. Je voulais que le joueur observe la course d’élan, lise la trajectoire, tende le bras, se penche et s’engage. La webcam devait devenir la manette, et la personne devant elle devait devenir le gardien.

C’est devenu Keeper. C’est l’un de ces jeux de gardien de but qui paraissent simples vus de l’extérieur : arrêter quatre tirs sur six pour passer un niveau. En dessous, chaque niveau change le problème de réaction. Le tir va plus vite, le ballon dévie davantage, le but s’élargit, les tirs dans les coins se multiplient et le gardien transposé couvre moins d’espace.

L’idée n’est pas de prétendre qu’un jeu de navigateur reproduit un match pro ou remplace l’entraînement d’un gardien. Ce n’est pas le cas. L’idée est d’emprunter les contraintes essentielles de l’arrêt de tir et de les condenser dans un jeu sûr et lisible, que tu peux jouer devant une webcam.

À quoi ressemble la vraie pression des réflexes d’un gardien

Un penalty n’est pas difficile parce que le gardien n’a jamais vu un ballon bouger. Il est difficile parce que l’information et le temps de mouvement disponibles arrivent presque en même temps.

Une analyse évaluée par des pairs, portant sur 88 penalties, a mesuré un temps de vol moyen du ballon de 525 millisecondes. Les chercheurs ont aussi observé que les mains des gardiens commençaient à s’écarter pour les tirs hauts et bas environ 245 millisecondes après le contact avec le ballon, tandis que le mouvement latéral pouvait démarrer à partir d’indices disponibles avant le contact. Lis l’étude sur la façon dont les gardiens détectent la direction et la hauteur d’un penalty.

Cette distinction a façonné Keeper. Un vrai gardien ne réagit pas seulement au ballon une fois parti. Il lit l’approche, la posture du corps et la frappe, puis corrige sa décision d’après le début de la trajectoire. Le jeu montre donc un footballeur qui prend son élan et arme la jambe avant le contact. Une fois le ballon parti, c’est la vitesse, l’effet et le point visé qui décident du temps de correction qui reste.

Keeper n’est pas un test de temps de réaction validé. La latence de la caméra, la taille de l’écran, celle de la pièce et le modèle de mouvement amplifié le séparent tous d’un vrai terrain. Mais les niveaux élevés se rapprochent volontairement d’une pression digne des pros. Le niveau 9 donne au joueur 520 millisecondes de vol du ballon, presque autant que les 525 millisecondes de moyenne de cette étude. À partir du niveau 10, on atteint le plancher du jeu, à 500 millisecondes.

Le premier défi : faire de la caméra un miroir

Keeper commence par demander au navigateur un flux vidéo de la caméra frontale. Le navigateur gère la demande d’autorisation via MediaDevices.getUserMedia(). Cette API exige un contexte sécurisé et l’accord explicite de l’utilisateur : la caméra ne peut donc pas s’ouvrir discrètement en arrière-plan.

Je demande une vidéo en 1280 par 720 idéalement, sans audio, en privilégiant la caméra tournée vers l’utilisateur. Le modèle de pose traite ensuite les images dans le navigateur. Keeper utilise MediaPipe Pose Landmarker en mode vidéo, avec une seule pose et le modèle léger exécuté via le délégué GPU quand il est disponible. Le guide Pose Landmarker pour le web de Google explique le même flux de travail image par image.

Les repères arrivent dans les coordonnées de la caméra. J’inverse chaque coordonnée x avant de l’utiliser. Si le joueur se déplace vers sa droite, le gardien doit aller vers la droite de l’écran de son point de vue. Sans ce miroir, un jeu à webcam sonne faux avant même le premier tir.

Une pose n’est pas encore un gardien

Un modèle de pose me dit où apparaissent la tête, les épaules, les coudes, les poignets, les hanches, les genoux et les chevilles du joueur dans l’image de la caméra. Il ne me dit pas où ces points se placent dans le but.

Je règle ça en traitant le but comme son propre système de coordonnées. Le centre des hanches du joueur devient le centre mobile du gardien. Chaque autre repère est mesuré par rapport à ces hanches, mis à l’échelle de la largeur et de la hauteur du but, puis placé dans la cage.

Cela donne à des corps différents un espace de jeu commun. Un poignet peut viser la lucarne que le joueur soit grand, petit, proche de la caméra ou plus en retrait. Le jeu ne recopie pas les pixels bruts de la caméra à l’écran : il transpose la forme de la pose dans la forme du but.

Pourquoi l’inclinaison doit bouger plus qu’elle ne le fait à l’image

Un salon n’est pas un terrain de foot. La plupart des joueurs ne peuvent pas se lancer en toute sécurité dans un plongeon complet, et je ne voulais pas que le jeu y encourage.

À la place, Keeper mesure le déplacement horizontal des hanches depuis la position debout calibrée et l’amplifie sur toute la largeur du but. Une inclinaison volontaire devient un plongeon. La position des bras et des jambes compte toujours, mais ce décalage amplifié des hanches permet à tout le gardien de se rendre vers un coin sans que le joueur ait à se jeter par terre.

La position debout de référence se recentre lentement entre les tirs. C’est important, car on dérive naturellement après plusieurs arrêts. Avec un point de calibrage fixe, une posture neutre finirait par passer pour une inclinaison permanente.

Avant le premier compte à rebours, le jeu vérifie que la tête, les épaules et les deux bras sont visibles et à peu près stables. Il maintient cet état prêt un court instant au lieu d’accepter une seule image chanceuse. L’écran de calibrage n’est pas séparé de la conception du jeu : il établit ce que la caméra doit voir et laisse au joueur la place de bouger.

Comment le corps entier devient une zone d’arrêt

La décision technique la plus importante a été qu’un arrêt ne dépende pas du seul poignet. Les vrais gardiens arrêtent les tirs avec les mains, les bras, les jambes, le torse et parfois la tête. Le système de collision devait reconnaître toute la silhouette.

Je construis le gardien à partir de plusieurs formes simples :

• Le torse est un polygone plein tracé à partir des deux épaules et des deux hanches.
• Les bras et les jambes sont de gros segments, traités comme des capsules plutôt que comme des os d’un pixel.
• Les poignets reçoivent des zones de gants circulaires un peu plus grandes.
• La tête a sa propre zone d’arrêt circulaire.

Quand le ballon atteint la ligne de but, le moteur pose une seule question : le ballon chevauche-t-il l’une de ces formes ? Pour un membre, je cherche le point le plus proche sur le segment et je compare cette distance à l’épaisseur du membre plus le rayon du ballon. Pour le torse, je teste si le centre du ballon tombe à l’intérieur du polygone.

Les repères sous un seuil de visibilité ne comptent pas dans l’arrêt. Ça évite qu’un poignet deviné ou une cheville cachée crée un blocage invisible. Le résultat est assez tolérant pour paraître physique, mais assez précis pour que le joueur doive vraiment aller vers le tir.

Simuler les indices avant la réaction

Un jeu de gardien de football équitable a besoin d’un tir lisible. Si le ballon surgit à pleine vitesse sans aucun indice, le joueur devine au lieu de réagir.

Chaque tir commence par un court armé de jambe. Le footballeur s’approche du ballon, la jambe de frappe se charge et un anneau qui se resserre rend le moment de la frappe lisible. Une fois le ballon parti du pied, il accélère vers le but. Il grossit aussi de sa taille lointaine à sa taille proche, ce qui ajoute un indice de profondeur.

L’effet suit un arc sinusoïdal. La courbe est nulle quand le ballon quitte le pied, s’accentue au milieu de la trajectoire et revient à zéro au point visé. Le ballon peut ainsi dévier sans rater la destination choisie par le tireur.

Quand un arrêt a lieu, le ballon ne disparaît pas. Il ricoche à partir du point de contact un bref instant, et la partie du corps qui a fait l’arrêt clignote. Cette minuscule pause a rendu la collision beaucoup plus facile à comprendre : le joueur voit pourquoi le tir a été arrêté.

Les niveaux élevés simulent un problème de réaction plus professionnel

La façon évidente de durcir un jeu de gardien de foot, c’est d’accélérer le ballon. J’ai voulu éviter de ne compter que sur ça, parce que la vitesse a un plafond. Passé un certain point, elle ne fait que supprimer toute chance de réagir.

Keeper fait évoluer cinq variables liées à mesure que les niveaux montent :

1. Le temps de vol diminue, donc le joueur a moins de temps pour s’engager.
2. L’effet latéral augmente, donc la trajectoire du début est moins directe.
3. Le but s’élargit, ce qui laisse plus d’espace à défendre.
4. La couverture du gardien transposé rétrécit légèrement, donc rester immobile protège moins le but.
5. Le tireur vise plus souvent les coins.

Au premier niveau, le ballon met environ une seconde à arriver. Ce temps diminue de 0,06 seconde par niveau jusqu’à un plancher d’une demi-seconde. En parallèle, l’effet et la probabilité de viser un coin montent vers des plafonds fixes. Le but s’élargit progressivement, au lieu de sauter entre des modes de difficulté arbitraires.

Ce qui compte, ce n’est pas un chiffre isolé, mais la façon dont les variables jouent ensemble. Les premiers niveaux t’apprennent la correspondance. Les suivants te demandent de tirer l’information de l’élan, de suivre l’effet, de t’engager plus tôt et de continuer à utiliser toute l’amplitude de ta pose. Cette combinaison se rapproche davantage de la pression de décision d’un gardien expérimenté que le simple fait d’accélérer le même tir central.

Les statistiques par niveau montrent toute la progression

J’ai vérifié le réglage actuel de la production directement dans la configuration du jeu. Voici les chiffres que Keeper utilise vraiment :

• Niveau 1 : vol de 1,00 seconde, effet de 5 pour cent, but large de 42 pour cent, 25 pour cent de probabilité de tir dans un coin et 102 pour cent de portée de base.
• Niveau 4 : vol de 0,82 seconde, effet de 20 pour cent, but large de 54 pour cent, 43 pour cent de probabilité de tir dans un coin et 96 pour cent de portée de base.
• Niveau 7 : vol de 0,64 seconde, effet de 35 pour cent, but large de 66 pour cent, 61 pour cent de probabilité de tir dans un coin et 90 pour cent de portée de base.
• Niveau 9 : vol de 0,52 seconde, effet maximal de 45 pour cent, but large de 74 pour cent, 73 pour cent de probabilité de tir dans un coin et portée de base minimale de 88 pour cent.
• Niveau 12 : vol de 0,50 seconde, effet de 45 pour cent, but large de 86 pour cent, 90 pour cent de probabilité de tir dans un coin et 88 pour cent de portée de base.

Le facteur d’effet est une valeur propre à l’espace de jeu, pas une prétention sur les mètres de déviation réels du ballon. La largeur du but et la portée sont aussi des proportions du but à l’écran. Ce qui compte, c’est la comparaison de la progression : entre le niveau 1 et le niveau 12, le temps de vol est divisé par deux, le but devient plus de deux fois plus large, la probabilité de viser un coin passe d’un tir sur quatre à neuf sur dix, et la couverture debout diminue.

C’est pour ça que les dernières manches donnent l’impression d’un autre niveau d’exigence, pas d’un premier niveau recoloré. Au niveau 9, la fenêtre de réaction est déjà dans la même demi-seconde que celle mesurée sur des images de penalties pros, et le tir a en plus plus de chances de dévier et de finir près d’un coin.

L’objectif d’arrêts est une règle de jeu, pas une référence pro

Chaque niveau compte six tirs. Arrête-en au moins 60 pour cent, soit quatre sur six, et le niveau suivant commence. Le score, c’est le nombre de niveaux terminés.

J’ai choisi un bloc fixe parce qu’il donne à chaque niveau une petite histoire. Le joueur connaît toujours l’objectif, le tir en cours et la marge d’erreur qu’il lui reste. Si les quatre arrêts demandés deviennent mathématiquement impossibles, la partie s’arrête tout de suite plutôt que de jouer des tirs sans enjeu.

Arrêter quatre tirs sur six donne un taux de réussite de 66,7 pour cent par niveau. Il ne faut pas le comparer aux vrais pourcentages d’arrêts sur penalty. Les tirs, l’échelle du corps et la répartition des cibles de Keeper sont pensés pour un jeu de navigateur qu’on rejoue, pas pour une équivalence statistique avec la compétition pro. Le repère du monde réel se trouve dans la fenêtre de réaction et la pression de la décision visuelle, pas dans le score.

Cette structure sépare aussi la régularité d’un arrêt chanceux. Un seul arrêt spectaculaire fait plaisir, mais passer des niveaux demande des décisions et des mouvements répétés. C’est mieux adapté à un court jeu de gardien de but en ligne qu’à un flux sans fin et sans point de passage visible.

Séparer le moteur de la caméra

Le cœur du moteur de jeu ne connaît ni React, ni la webcam, ni les repères de pose. Il gère le tireur, l’armé de jambe, la trajectoire du ballon, l’effet, le résultat des tirs, les règles de niveau et le score. La page lui fournit la taille de la scène et une fonction de test d’arrêt.

Cette frontière a permis de tester les règles importantes sans démarrer de caméra. Je peux donner au moteur une source aléatoire déterministe, faire avancer le temps, inspecter la trajectoire du ballon et vérifier quand un niveau doit être validé ou s’arrêter. La géométrie de la pose reste dans un module à part, où on peut la tester comme de la géométrie.

La boucle du navigateur utilise requestAnimationFrame(). Je calcule le temps écoulé entre les images et je le transmets au moteur : le ballon n’avance donc pas plus vite simplement parce qu’un écran a un taux de rafraîchissement plus élevé.

Ce que la création de Keeper m’a appris

Le plus dur n’était pas de reconnaître une personne. C’était de décider comment cette personne devait occuper un but numérique pendant que le tir se rapproche d’une vraie pression de réaction.

Le jeu a commencé à fonctionner quand j’ai cessé de traiter les repères de pose comme une manette toute faite. Ce sont des matières premières. La manette vient du calibrage, du miroir, des coordonnées relatives, de l’inclinaison amplifiée, des contrôles de visibilité et des formes de collision. La sensation vient d’un armé de jambe lisible, d’un contact visible et d’une courbe de difficulté qui change le problème sans changer les règles.

C’est ce que j’aime dans les jeux à webcam. Le système technique est compliqué, mais la consigne du joueur peut rester simple : lis l’approche, regarde le tir, tends le bras vers le ballon et fais l’arrêt. Les premiers niveaux te laissent le temps d’apprendre cette séquence. Les plus élevés te demandent de la faire en une demi-seconde.

Tu peux jouer à Keeper gratuitement dans ton navigateur. Pour un aperçu rapide de l’expérience, lis mon guide complémentaire sur le jeu de football en réalité augmentée. Si tu veux voir comment j’ai utilisé la même chaîne de suivi de pose pour la course plutôt que pour le but, lis comment j’ai créé Dino Survival.