Je me suis retrouvé confronté à quelques problèmes, en publiant sur un site web, un jeu fait avec gdevelop, que j’utilise depuis peu (c’est mon premier jeu).
Les problèmes
1- la compilation gdevelop met tout à la racine du dossier
2- le jeu est placé en position : absolute, et placé par rapport à la fenêtre du navigateur
3- effet de scroll du navigateur (lorqu’il la page web dépasse le navigateur), avec les flèches de navigations utilisées pour le jeu
4- impossible de cliquer à l’extérieur du jeu, sur les liens, boutons…
Mes solutions
1- Rangement des fichiers
J’envoie tout dans un répertoire (pour moi, jeux/monjeu/)
Je modifie l’appel des fichiers javascripts, en ajoutant jeux/monjeu/)
je modifie le fichier data.js qui appelle les images.
En gros, modifier toutes les occurences de “file”: “imageN” en “file”: “jeux/monjeu/imageN”
2- pour le placement
je suppirme le style canvasArea en dur dans le fichier index.html
je place dans une autre div (du coup, canvasArea, sera placée en relatif dans cette div)
je modifie le fichier runtimegame-pixi-renderer.js
canvasArea.style[“position”] = “aboslute”; devient canvasArea.style[“position”] = “relative”;
je commente les lignes :
/this._canvasArea.style[“top”] = ((marginTop+(maxHeight-height)/2)+“px”);
this._canvasArea.style[“left”] = ((marginLeft+(maxWidth-width)/2)+“px”);
this._canvasArea.style.width = width+“px”;
this._canvasArea.style.height = height+“px”;/
3- je modifie le même fichier runtimegame-pixi-renderer.js, la fonction document.onkeydown
//Keyboard
document.onkeydown = function(e) {
manager.onKeyPressed(e.keyCode);
if(e.keyCode>=37 && e.keyCode<=40) {// Bloquer le défilement du navigateur
return false;
};
};
4- je modifie la fonction principale (de la page du jeu)
Ligne : game.getRenderer().bindStandardEvents(game.getInputManager(), window, document);
devient : game.getRenderer().bindStandardEvents(game.getInputManager(), canvasArea, document);
Donc, on limite l’action à canvasArea, au lieu du document. Et les clics à l’extérieur du jeu deviennent possibles !
Voilà pour mes petites modifs.
Ce sont des choses qui sont peut-être gérables ailleurs, mais je n’ai pas trouvé.
Si ce n’est pas prévu, ce serait intéressant d’ajouter ces petits trucs (à moins que je sois tout seul à galérer avec ça).
Du coup, j’apprécie maintenant pleinement le développement avec gdevelop !
Me reste la partie communication PHP à faire, et à voir comment limiter la triche…
Dans la dernière version pixi-renderer, le point 2 devient :
2- pour le placement
je supprime le style canvasArea en dur dans le fichier index.html
je place
dans une autre div (du coup, canvasArea, sera placée en relatif dans cette div)
je modifie le fichier runtimegame-pixi-renderer.js
this._pixiRenderer.view.style["position"] = “absolute”;
devient
this._pixiRenderer.view.style[“position”] = “relative”;
je commente les lignes :
//this._pixiRenderer.view.style["top"] = ((marginTop+(maxHeight-canvasHeight)/2)+"px");
//this._pixiRenderer.view.style["left"] = ((marginLeft+(maxWidth-canvasWidth)/2)+"px");
//this._pixiRenderer.view.style.width = canvasWidth+"px";
//this._pixiRenderer.view.style.height = canvasHeight+"px";
Pour etre plus précis, ce n’est pas “if(e.keyCode>=37 && e.keyCode<=40) {” qui bloque le scroll, mais le return false;. le if ne fait que detecter l’appui sur la touche du scroll.
Ma méthode pose un problème avec la souris !
Le coin X1 Y1 (en haut à gauche) n’est pas détecté à x1 y1 par la souris, mais est dépendant de la taille de l’écran… et du placement du jeu dans la page.
Exemple x360 et y26 au lieu de x1 y1.
Je n’arrive pas à voir quoi changer, pour que la souris prennent les coordonnées par rapport au placement du jeu.
J’ai testé pas mal de choses dans runtimegame-pixi-renderer.js, mais sans voir où modifier.
Si quelqu’un a une idée… je suis preneur !
Si je supprime le placement (mon point2) tout va bien pour la souris.
bon, j’ai fini par trouver !
C’est une div en position: relative sur le site qui met le bordel…
Bon, c’est quand même pénible, il faudrait vraiment que de façon très simple, le jeu soit placé dans la div qu’on lui affecte… sans être impacté par les trucs autour.
Y a-t-il un projet, pour que l’export HTML soit plus “pertinent” ?
Ou est-ce que je loupe un truc dans le développement ?
Si tu penses que ta version est mieux, fork et clone le repo de GDevelop et modifie dans GDJS/Runtime les fichiers que tu veux, puis fait une pull request.
Je ne suis pas sûr que ma version soit mieux.
C’est juste que mes modifs permettent d’afficher un jeu dans une page “habillée”, et pas comme par défaut, sur une page vide, où on centre le jeu.
J’ai l’air d’être un peu le seul à avoir ce besoin, qui me parait essentiel… mais je ne connais pas les besoins de ceux qui utilisent gdevelop.
Moi, je l’utilise juste pour remplacer des jeux flash existants sur des sites de petits jeux flash.
Presque 1 an après, j’ai toujours le même type de problème de souris !
Si j’arrive bien à placer le jeu dans ma div, les coordonnées de la souris ne partent pas de la div, mais de la fenêtre !
Il doit y avoir un problème qui m’échappe.
On doit forcément pouvoir paramétrer le jeu autrement au niveau du script, pour que tout soit bien pris en compte.
Mais je ne vois pas comment, je ne trouve aucun exemple.
Je viens de répondre à un autre membre pour le placement :
(avec toutes les explications pour le placement, la bonne taille…)
Donc, voici un exemple de jeu, placé dans une div. http://adminvps4.fr.nf/test4-forum-gdevelop/
C’est placé correctement, mais les coordonnées souris sont complètement fausse puisque basées sur la page web, et pas la div !
Si quelqu’un a une solution, je suis preneur.
Il y a des membres qui publient sur leur site web ?
C’est juste une iframe où le jeu est chargé basiquement. Donc en effet marche très bien… sur itch
Impensable de faire tourner dans une iframe sur un site. (pour moi, relié à php, avec scores et gains)
Pourtant la position du canvas est prise en compte.
A voir dans GDJS\Runtime\pixi-renderers\runtimegame-pixi-renderer.js
Ligne 273 à la définition de la fonction getEventPosition.
Si vous pensez que ceci est un bug je vous invite à mettre un bug report ici.
Avec un maximum d’explication et votre exemple sur une page web.
