Publication sur le web : mes astuces


#1

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…


#2

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";

#3

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.


#4

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.


#5

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 ?

++


#6

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.


#7

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.


#9

bah, ca marche sur itch et gamejolt, du coup personne ce pleint. reguarde comment ils font, et montre ca aux admins de site de petits jeux flas :wink: