Rendre son jeu Löve2D jouable sur navigateur

Merci d'indiquer dans vos crédits ou sur la page de votre jeu l'utilisation de ce tutoriel.

Ca ne vous coûte rien mais fait toujours plaisir à lire (surtout pour moi).

 

Sommaire

 

Merci d'indiquer dans vos crédits ou sur la page de votre jeu l'utilisation de ce tutoriel.

Ca ne vous coûte rien mais fait toujours plaisir à lire (surtout pour moi).

 

L'objectif de ce tutoriel est de vous permettre de créer une version jouable sur navigateur de votre jeu Löve2D.
J'y ajoute également un petit tuto pour publier correctement son nouveau jeu sur itch.io

Pré-requis

Avant de commencer, il faut préparer son ordinateur car nous avons besoin de 2 logiciels :

  • Git
  • Python v2.7

 

Installation de Git

Ici, il s’agit de la version en ligne de commande, pas celle avec une interface graphique.
Vous trouverez la dernière version ici : https://git-scm.com/download/win

Processus d’installation

Lors de l’installation, cliquer sur « Next » sans rien changer jusqu’à arriver à cet écran : 

Install git

Sélectionner l’option comme ci-dessus puis continuer l’installation.

Vérification de l’installation

Pour vérifier si Git est bien installé, lancer l’invite de commande (touche Windows + R puis tapez « cmd.exe »).

N.B. : fonctionne aussi avec Windows PowerShell

Dans la fenêtre, saisissez « git --version » comme ci-dessous :

Verif git

Vous pouvez avoir une version différente (selon l’OS par exemple).

 

Installation de Python 2.7

Pour continuer, vous devez OBLIGATOIREMENT installer la version 2.7 de Python que vous trouverez ici : https://www.python.org/download/releases/2.7/

Les liens de téléchargement sont disponibles en bas de la page.

Processus d’installation

Je vous conseille très fortement de laisser tous les paramètres en standard.

Vérification de l’installation

Pour vérifier si Python est bien installé, lancer l’invite de commande (touche Windows + R puis tapez « cmd.exe »)

N.B. : fonctionne aussi avec Windows PowerShell

Dans la fenêtre, saisissez « python --version » comme ci-dessous :

Verif python

Préparation de l’environnement

Il s’agit ici de récupérer les fichiers qui vont nous permettre de convertir votre jeu Lua/Löve2D en jeu JavaScript.

Nous allons utiliser les développements de Tanner Rogalsky qui utilise Emsciprten (pour plus d’infos : https://github.com/TannerRogalsky/love.js)

Création du répertoire de travail

Vous allez créer un nouveau répertoire sur votre disque.

Je vous conseille très fortement de le mettre à la racine du disque.

J’ai choisi de créer un répertoire « C:\LoveWeb ».

Import des fichiers de conversion

Dans une invite de commande (touche Windows + R puis taper « cmd.exe ») ou Windows PowerShell, saisissez les informations ci-dessous :

git clone https://github.com/TannerRogalsky/love.js.git

Cela va télécharger les fichiers dans le répertoire « love.js ».

Réalisé avec PowerShell :

Repository shell

Réalisé avec l'invite de commande :

 Repository dos

 

Ensuite, positionnez vous dans le nouveau répertoire « love.js » et saisissez la commande comme ci-dessous :

Repository upd

Si vous obtenez un message d’erreur ou aucun message, il vous suffit de saisir « git init » puis de relancer la commande.

 

Conversion d’un jeu

IMPORTANT : Si vous avez une version de Python différente de la version 2.7, cela ne fonctionnera pas !

Lancer une invite de commande (touche Windows + R puis taper « cmd.exe ») ou Windows PowerShell.

Positionnez vous dans le répertoire « release-compatibility » comme ci-dessous :

Conversion path

Ensuite, vous allez copier dans un éditeur de texte la ligne ci-dessous pour y apporter quelques modifications :

python ../emscripten/tools/file_packager.py game.data --preload [path-to-game]@/ --js-output=game.js

Le texte en jaune est à modifier pour indiquer le chemin de votre jeu sur votre disque.
Le chemin de votre jeu signifie le répertoire contenant le fichier "main.lua".

 

RAPPEL : Merci d'indiquer dans vos crédits ou sur la page de votre jeu l'utilisation de ce tutoriel.

Ca ne vous coûte rien mais fait toujours plaisir à lire (surtout pour moi).

 

Pour vous montrer comment ça fonctionne, je vais utiliser un de mes propres jeux : Donkey Kong Remake (sources visibles ici : http://larry-games.e-monsite.com/pages/lua/donkey-kong.html)

Mon jeu se trouve dans le répertoire « C:\Users\Dominique\Documents\Projects\Lua\Donkey Kong ».

Donc je vais devoir changer [path-to-game] par le chemin pour obtenir la ligne suivante :

python ../emscripten/tools/file_packager.py game.data --preload "C:\Users\Dominique\Documents\Projects\Lua\Donkey Kong"@/ --js-output=game.js

Le fait que le chemin du jeu soit entre guillemets doubles (") est lié au fait que j’ai un espace dans un des noms de dossiers.

RAPPEL : Merci d'indiquer dans vos crédits ou sur la page de votre jeu l'utilisation de ce tutoriel.

Ca ne vous coûte rien mais fait toujours plaisir à lire (surtout pour moi).

Voilà, vous êtes prêt à publier votre jeu sur votre site !

Je vous conseille fortement de copier (copier, pas couper, hein ! ) l'ensemble de vos fichiers dans un autre répertoire.

 

Publier son jeu converti sur itch.io

Tout d’abord, il faut récupérer son jeu converti

Préparation du fichier à uploader

Allez dans le répertoire « release-compatibility », sélectionner tous les fichiers et créez une archive ZIP (clic-droit > envoyer vers > dossier compressé).

J’ai intitulé mon fichier « DonkeyKongBrowser.zip » :

Publication zip

IMPORTANT : Le fichier « index.html » doit se trouver à la racine de l’archive ZIP.

Publication du jeu

Sur itch.io, lorsque vous créez un nouveau projet, vous avez l’information « Kind of project ».

C’est ici qu’on indique quel type de fichiers vous souhaitez uploader.

Dans notre cas, il faut choisir « HTML » comme ci-dessous :

Publication itch

Vous devez ensuite cocher la case comme ci-dessous :

Publication itch upload

Ne pas oublier également d’indiquer les dimensions de la zone de jeu !

Grosse précision : vous devez ajouter environ 150 pixels de plus pour la largeur et la hauteur. Cela permet d’avoir une zone autour du jeu.
La raison de cela est qu’il faut d’abord cliquer sur le zone autour du jeu pour que le jeu obtienne les contrôles.

Publication itch size

Je vous conseille de faire une version Draft avant de la mettre en Release pour contrôler si votre jeu est jouable et que les dimensions sont bonnes.

Pour ma part, j'ai dû m'y reprendre à 4 fois pour avoir des dimensions correctes (^_^)

 

Voilà, votre jeu est maintenant accessible sans aucun téléchargement par tout le monde.

Vous pouvez jouer à mon Donkey Kong sur votre navigateur ici : https://asthegor.itch.io/donkey-kong-browsable

Date de dernière mise à jour : 08/08/2018