Skip to content
No description, website, or topics provided.
JavaScript Python HTML Processing
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client
processing
server
starter-kit
teams
.gitignore
README.md

README.md

Challenge IHM 2019

❯❯❯ Présentation du challenge

Sommaire

Introduction : comment ça va fonctionner ?

Vous avez un jeu (SuperTuxKart), un script-serveur et votre dispositif.

Le jeu SuperTuxKart est une variante de Mario Kart, et est jouable avec un clavier classique. Votre but va être de bidouiller pour jouer avec votre dispositif plutôt qu'avec un clavier. Comment ? En simulant l'appui sur les touches jouables. Par exemple, si votre dispositif invite le joueur à secouer une bouteille pour accélérer, la secousse de la bouteille va simuler l'appui sur la touche qui permet d'accélérer dans le jeu.

Qui simule l'appui sur la touche ?

Pour remplir cette fonction, un script-serveur est fourni par le challenge IHM. Ce script-serveur a pour but de recevoir des instructions et de les convertir en appuis sur les touches de clavier. Par exemple, l'instruction générée par une secousse de bouteille est reçue par le script-serveur, et ce script-serveur va simuler l'appui sur la touche dans le jeu SuperTuxKart.

Comment détecter les secousses de bouteille et autres interactions avec les objets ?

Vous allez équiper vos objets de capteurs électroniques sensibles aux mouvements, gestes, percussions (…) donc capables de capter les interactions du joueur utilisant votre dispositif. Ces capteurs vont convertir une action (mouvement, geste, percussion) en une valeur numérique, et cette valeur numérique va vous permettre d'interpréter l'interaction initiale.

Par exemple, une boîte d'allumettes peut être ouverte ou fermée. Grâce à un capteur de lumière placé dans la boîte, le capteur est soit éclairé par la lumière ambiante si la boîte est ouverte, soit plongé dans l'obscurité de la boîte fermée. Le capteur va donc vous renvoyer une valeur numérique (disons 1023 s'il est éclairé, et 0 s'il est dans l'obscurité) et c'est à vous, humain, d'interpréter ce résultat (1023 = capteur éclairé donc boîte ouverte ou 0 = capteur dans l'obscurité donc boîte fermée).

Comment récupérer les valeurs numériques des capteurs ?

Vos capteurs vont être reliés à une carte électronique qui va transférer les données émises par le capteur vers votre ordinateur. Un capteur envoie des valeurs à la carte électronique, et la carte électronique envoie ces valeurs à votre ordinateur. Pour l'exercice, nous utiliserons une carte Arduino, facile à prendre en main pour découvrir l'électronique.

❯❯❯ Introduction et codes d'exemple pour plonger dans Arduino et le monde des capteurs

Qui récupère ces valeurs numériques sur l'ordinateur ? Et qu'est-ce qui fait qu'une valeur de capteur devient une action de jeu ?

Vous allez coder un script capable de plusieurs choses :

  • Lire des valeurs envoyées depuis une carte électronique
  • Interpréter ces valeurs pour comprendre l'action de jeu à effectuer (accélérer, tourner à gauche, freiner…)
  • Envoyer l'action de jeu au script-serveur qui l'enverra à SuperTuxKart

Développons : votre script va récupérer les valeurs de chaque capteur, et vous allez les labelliser. Par exemple, cette valeur est issue du capteur de lumière dans la boîte, et permet d'interpréter s'il faut activer la Nitro ou pas. On va donc donner un nom à la valeur du capteur, pour la manipuler plus facilement : on créera par exemple la variable capteurNitro qui aura pour valeur 1023 ou 0 selon si la boîte est ouverte ou fermée.

Ensuite, avec l'ensemble des valeurs labellisées issues des capteurs, vous allez définir la logique pour interpréter ces valeurs. Par exemple :

  • Si capteurNitro = 1023, alors on interprète que la boîte est ouverte, donc que nous souhaitons activer la Nitro dans le jeu
  • Si capteurNitro = 0, alors on interprète que la boîte est fermée, donc que nous n'activons pas la Nitro dans le jeu

Certains capteurs renvoient des valeurs binaires (une valeur parmi 2 choix : vrai ou faux, 0 ou 1, etc) et d'autres renvoient une valeur comprise dans une plage de valeurs. Par exemple, un capteur de lumière ne renvoit pas uniquement 0 ou 1023 mais peut renvoyer tous les nombres entre 0 et 1023 : capteurNitro peut donc valoir 71, 116, 450, 890, 1022 selon la quantité de lumière reçue par le capteur.

C'est donc votre rôle de comprendre les différentes valeurs possibles, et de définir au mieux la logique d'interprétation des données. Donc en affinant notre exemple :

  • Si capteurNitro > 100, alors on interprète que la boîte est ouverte (car elle reçoit au moins un tout petit peu de lumière), donc nous souhaitons activer la Nitro dans le jeu
  • Si capteurNitro <= 100, alors on interprète que la boîte n'est pas assez ouverte (car elle ne reçoit que très peu de lumière, la boîte est sûrement fermée) ou est fermée, donc nous n'activons pas la Nitro dans le jeu

Une fois votre logique d'interprétation au point, vous avez donc un script qui définit les actions à effectuer dans le jeu en fonction des capteurs. Autrement dit, avec l'ensemble des valeurs des capteurs de votre dispositif, votre script est capable de déduire des actions de jeu à envoyer à SuperTuxKart.

Maintenant, comment envoyer les actions de jeu à SuperTuxKart ?

Souvenez-vous, on a parlé plus haut d'un script-serveur ayant pour but de recevoir des instructions et de les convertir en appuis sur les touches de clavier : c'est à ce moment-là qu'il devient utile.

  1. Votre script envoie des instructions à ce script-serveur, et va lui dire quelle action est souhaitée dans le jeu (accélérer, tourner à gauche…)
  2. Le script-serveur reçoit votre instruction, et simule l'appui sur la touche correspondant à l'action demandée

Du point de vue du jeu SuperTuxKart, un appui réel avec votre doigt sur la touche ou un appui simulé par le script-serveur est identique : le kart accélère.


Installation

La procédure est dédiée à macOS et la démonstration du vendredi se déroulera sur un Mac, par souci de gain de temps. Si vous tenez à développer votre code sur Windows ou Linux, la procédure est sensiblement identique mais quelques subtilités peuvent exister avec l'installation de Python ou d'autres outils nécessaires.

1. Installer SuperTuxKart

Vous allez pouvoir tester le jeu et comprendre les commandes puis vous pourrez tester votre dispositif pour de vrai, en contrôlant votre kart.

  1. Télécharger : http://iihm.imag.fr/ChallengeIHM19/install/mac-SuperTuxKart-ihm2019.zip
  2. Une fois téléchargé, ouvrir le dossier 📁SuperTuxKart-ihm2019
  3. Cliquer-droit sur l'app supertuxkart.app puis cliquer sur Ouvrir
  4. Une fenêtre s'ouvre : cliquer sur Ouvrir

Le jeu se lance.

  1. Répondre Yes pour l'envoi de données en ligne, afin de pouvoir jouer en ligne
  2. Cliquer sur l'onglet Existing Online Account
  3. Se connecter avec les identifiants de votre écurie (voir avec Kévin)

Vous êtes maintenant connecté à SuperTuxKart et vous êtes dans le menu principal.

  • Pour tester votre dispositif en solo, créer une partie en Singleplayer
  • Pour tester votre dispositif avec une ou plusieurs autres équipes, aller dans : Online ❯ Global Networking ❯ Find Server, cocher ☑ Show Private Server et trouver le serveur dsaadesignv. Ce serveur sera disponible chaque jour de la semaine (pendant les heures de travail). Si le serveur n'est pas listé, demander à Kévin ou créer le vôtre 👍

Vous savez maintenant lancer une partie de SuperTuxKart.

Après avoir perdu une demie-heure à jouer au jeu, installons les dépendances.

2. Installer Python et les dépendances

  1. Ouvrir le Terminal
  2. Écrire cette ligne dans le Terminal puis Entrée pour installer le package Xcode : (source)
xcode-select --install
  1. Ensuite, installer Homebrew :
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. Puis, installer Python 3 :
brew install python3
  1. Maintenant, installer le module keyboard de Python (pour que le script-serveur puisse simuler les appuis des touches de clavier) :
python3 -m pip install keyboard

3. Télécharger ce starter kit

Kévin vous a préparé des bouts de code prêts à l'emploi pour démarrer en douceur, et a centralisé les fichiers nécessaires, notamment le fameux script-serveur fourni par le challenge.

Pour récupérer cela :

  1. En haut de cette page, cliquer sur le bouton vert Clone or download puis sur Download ZIP
  2. Décompresser le fichier .zip et placer le dossier 📁ihm2019 sur le Bureau du Mac

La configuration est terminée 💪


Coder votre script

Dans Processing :

Sketch → Importer une librairie… → Rechercher UDP → Installer

Puis lancer le script


Démarrer la bidouille

Une fois votre ordinateur configuré (étapes 1 et 2 de l'installation), le protocole de démarrage commence ici.

1. Démarrer le script-serveur

  1. Ouvrir le Terminal
  2. Taper cd puis faire glisser votre dossier 📁ihm2019 sur la fenêtre du Terminal puis valider
  3. Taper cd server && python3 ./STK_input_server.py : après quelques secondes, ce message va apparaître STK input server started. Ne pas quitter la fenêtre du Terminal (vous pouvez bien sûr la réduire)

Le script-serveur est en place et fonctionnel. Il est donc prêt à recevoir des instructions pour simuler les touches de clavier.

2. Démarrer SuperTuxKart

Double-cliquer sur l'application précédemment téléchargée supertuxkart.app et lancer le jeu. Lancer une partie (solo ou en réseau) et dès que vous êtes sur la ligne de départ, ne faites rien (ou jouez un tour si vraiment vous avez envie) : l'objectif est d'être en mode jeu pour que les touches de clavier simulées se répercutent sur la conduite de votre kart (et pas sur les menus du jeu).

3. Démarrer votre dispositif

  • Vérifier que les capteurs soient bien branchés à votre carte Arduino
  • Vérifier que votre carte Arduino soit bien branchée à votre ordinateur en USB
  1. Ouvrir une nouvelle fenêtre de Terminal (bien garder la première fenêtre Terminal du script-serveur à côté)
  2. Lancer votre script : cd emplacementdevotrescript puis node votrescript.js

4. Démarrer votre script

Selon votre projet, votre script peut être un script Processing ou un script NodeJS. Démarrer le script selon la méthode associée :

  • NodeJS : ouvrir le Terminal, vous positionner dans le bon dossier (cd emplacementdevotrescript) puis lancer le script (node votrescript.js)
  • Processing : ouvrir le script dans l'IDE Processing, puis cliquer sur pour démarrer le script

5. Aller dans SuperTuxKart

À partir de maintenant, pour jouer, vous devez toujours avoir le focus dans la fenêtre de jeu SuperTuxKart. Puisque le script-serveur simule des touches de clavier, il les simule où que soit votre curseur. Autrement dit, si la fenêtre active est le Terminal au lieu du jeu, et que votre script-serveur simule la touche N, vous allez voir apparaître des N dans votre Terminal.

Donc cliquer sur la fenêtre de jeu SuperTuxKart et garder cette fenêtre active.

6. 🏁 C'est parti 🏁

Résumé de la situation : le jeu est lancé, le script-serveur est prêt à recevoir des instructions et à simuler des touches de clavier dans le jeu, votre dispositif est allumé et branché, et vous venez de démarrer votre script.

Maintenant, si vous utilisez votre dispositif tel que vous l'avez conçu (secouer la bouteille, ouvrir la boîte d'allumette, etc), votre dispositif envoie une valeur de capteur à votre script, qui interprète cette valeur pour déduire l'action de jeu à effectuer, action de jeu que votre script envoie au script-serveur, pour que le script-serveur simule la touche de clavier correspondante.

À vous de jouer !


Liste des commandes

Commandes obligatoires

Commande Description
P_LEFT Tourne le volant à gauche
Appui sur la touche
R_LEFT Ramène le volant de la gauche
Relâchement de la touche
P_RIGHT Tourne le volant à droite
Appui sur la touche
R_RIGHT Ramène le volant de la droite
Relâchement de la touche
P_ACCELERATE Appuie sur l'accélérateur
Appui sur la touche
R_ACCELERATE Relâche l'accélérateur
Relâchement de la touche
FIRE Lance un objet
Appui sur la touche Espace
RESCUE Ramène le kart sur la piste (sauvetage par l'oiseau)
Appui sur la touche Retour ⌫

Commandes optionnelles (mais utiles pour jouer)

Commande Description
P_BRAKE Appuie sur la pédale de frein (puis recule si l'appui est prolongé)
Appui sur la touche
R_BRAKE Relâche la pédale de frein
Relâchement de la touche
NITRO Déclenche une forte accélération temporaire
Appui sur la touche N
SKIDDING Déclenche un dérapage au cours d'un virage
Appui sur la touche V
P_LOOKBACK Regarde en arrière
Appui sur la touche B
R_LOOKBACK Revient à la vue standard
Relâchement de la touche B
You can’t perform that action at this time.