• Porteur du projet : Laurent
• Date : 15/07/2019
• Licence : libre !
• Contexte : oui
• Fichiers : exemple Gdevelop (html5) projet Gdevelop

Gdevelop est un logiciel libre permettant de créer facilement un jeu vidéo 2d sans écrire une ligne de code. Il propose des exports au format HTML5, android et iOS qui permettent d'utiliser des capteurs du téléphone sur lequel le jeu tourne, mais rien n'est prévu d'origine pour l'utiliser avec des capteurs externes. Gdevelop possède néanmoins un module réseau permettant d'émettre des requêtes GET, POST et de lire du JSON.

Beaucoup de capteurs DIY utilisant le protocole OSC pour communiquer, nous réaliserons une passerelle OSC→web.

Pour pouvoir répondre à une requête GET ou POST envoyée par Gdevelop, il faut utiliser un serveur web. L'utilisation du module python Flask permet de créer un serveur web en quelques lignes de codes qui répondra aux requêtes. L'OSC sera géré par pyLiblo qui offre des bindings python pour la bibliothèque liblo originellement écrite en C et particulièrement véloce. Enfin, une extension de flask, Flask-CORS ajoutera les en-têtes CORS (Cross Origin Resource Sharing) permettant la communication entre le jeu Gdevelop et le serveur web local.

Côté hardware, n'importe quel ordinateur muni d'une carte réseau fera l'affaire (Raspberry Pi compris), tous les logiciels et modules utilisés étant multiplateforme.

Le serveur web n'est accessible en local et utilise un port défini dans le code (par défaut le port 5000). Il doit donc tourner sur la même machine que Gdevelop. Pour éviter de devoir définir au préalable dans le code toutes les adresses OSC utilisées, une variable globale stocke dans le code chaque adresse OSC reçue ainsi que sa dernière valeur et crée automatiquement une adresse web correspondante. Par exemple, la réception de “/monOSC” créera automatiquement l'adresse web http://localhost:5000/monOSC qui répondra à toute requête GET adressée par la dernière valeur reçue ainsi que le code 200. Dans le cas où plusieurs données sont empaquetées dans le même message OSC, des adresses web seront automatiquement créées et numérotées (ex : “/monOSC1”, “/monOSC2”…) pour chaque donnée.

Pour récupérer les données dans Gdevelop il suffit donc de créer un évènement Send request to webpage avec “http://localhost:5000” comme host, “/monOSC” dans le path to page et créer une variable de scène dans store the response for this variable (voir l'exemple) Cette variable sera mise à jour si de nouvelles données sont reçues.

En cas de problème, il peut être utile d'accéder au serveur web directement depuis son navigateur pour vérifier que les données sont correctement reçues et mises à jour http://localhost:5000/monOSC Le script python donne également quelques informations de déboguage sur sa sortie console.

#!/usr/bin/env python
# -*- coding: utf-8 -*-
 
from flask import Flask
from flask_cors import CORS # Cross Origin Resource Sharing, needed by gdevelop
import liblo
 
OSClisteningPort = 9002
 
app = Flask(__name__)
CORS(app)
database = {}
 
@app.route('/<name>', methods=['GET'])
def variable(name):
    global database
    name = "/" + name
    if name not in database : 
        print(name,"not found in db, setting to 0")
        database.update({name:0})
    try : return str(database[name])
    except Exception as e : return str(e) # data couldnt be stringified
 
def OSCunknownAddress(add, data, tags, source):
    global database
    if len(data) == 1 : 
        database.update({add : data})
        if add not in database : print ("adding", data, "to database")
    else :
        for i in range(len(data)) : 
            address = add + str(i+1)
            if address not in database : print ("adding", address, "to database")
            database.update({address : data[i]})
 
if __name__ == '__main__':
   oscServer = liblo.ServerThread(OSClisteningPort)
   oscServer.add_method(None,None, OSCunknownAddress)
   oscServer.start()
   app.run(host='localhost', port=5000, threaded=True)

L'exemple fourni permet de faire tourner un smiley à partir de l'orientation d'un téléphone. Il nécessite l'application libre et gratuite sensors2OSC disponible sous Android depuis fDroid par exemple. Le paramètre orientation du téléphone envoie trois données, respectivement l'azimuth, le roulis et le tangage (en degrés). On utilise donc l'adresse http://localhost:5000/orientation1 pour lier l'azimuth du téléphone à la rotation du smiley dans gdevelop. L'IP de la machine qui fait tourner gdevelop et le serveur est entrée dans les options de sensors2OSC ainsi que le port d'écoute par défaut du serveur (9002). Une fois les cases orientation et envoyer les données cochées, on peut voir l'azimuth du téléphone depuis le pc en naviguant sur http://localhost:5000/orientation1. Une fois Gdevelop lançé, le smiley suit l'orientation du téléphone.

<blockquote>A noter : comme Gdevelop stocke les chemins absolus vers les contenus, il ne trouvera pas la seule image du projet (fournie dans le zip) Il faudra lui en indiquer manuellement le chemin</blockquote>