Article
"Le Ping Pong" en Live
Le Pong en live, “Le Ping-Pong” est un “casual game” experimental développé en React.js. Ce jeu utilise la web-cam et inclut de la reconnaissance de position du corps humain, dans une application web. La reconnaissance de la position vient de la librairie PoseNet, un projet développé en open source par Google.
Un article de Baptiste, Stagiaire Développeur Web & Mobile.
Le jeu est assez simple, c’est un jeu du Pong classique, au style rétro. la différence est qu’au lieu de déplacer la plateforme avec des boutons ou un joystick, il faut déplacer sa main de haut en bas.
Comment ça marche ?
-
Le principe
Deux ordinateurs doivent se connecter au site web, et chacun devra autoriser l’accès à la webcam. Un joueur doit créer la session, et l’autre doit la rejoindre à l’aide du code affiché à l’écran. Le jeu commence quand le joueur qui a créé la session choisit son côté (droit ou gauche).
Le jeu démarre immédiatement avec la balle lancée d’un côté. le but est de la renvoyer la balle en la faisant rebondir sur la plateforme. Quand la balle traverse l’écran d’un ordinateur, elle apparaît de l’autre côté. La plateforme bouge de haut en bas selon la position de la main droite du joueur de droite, et la main gauche du joueur de gauche.
-
L’application React
Il y a deux composants principaux qui fonctionnent en parallèle : la webcam (en charge de détecter la position) ; et le jeu du Pong, qui affiche les éléments du jeu, gère les interactions entre les objets, et communique avec Firebase.
L’application utilise Redux pour stocker différentes informations comme la “pose” détectée par PoseNet, et la position des objets du Pong.
Quand la balle doit traverser l’écran, une mise à jour est envoyée à Firebase, et les ordinateurs ajustent leur comportement pour correspondre à la position de la balle (On compare le côté de la balle avec le côté du joueur).
Comment l’avons-nous construit ?
En cherchant sur internet à propos de la détection du corps humain dans un navigateur web, nous avons découvert le PoseNet de Google, un CNN conçut pour détecter la posture et position du corps humain. Ce projet open source est fait pour être utilisé dans un navigateur web, en utilisant leur fameuse librairie : TensorFlow.js. Pour aller vite, cette librairie est utilisée pour faire du machine learning dans un environnement JavaScript (comme un navigateur web).
Après quelques tests pour bien comprendre comment elle fonctionne, nous avons commencé le projet. Nous avons utilisé la librairie React.js de Facebook pour faire notre single-page app.
