Partagez
Aller en bas
avatar
Sphinx
Membre

Nombre de messages : 58
Distinction : aucune
Date d'inscription : 08/03/2016

Exporter son jeu vers Android

le Dim 27 Aoû 2017 - 20:02
Exporter son projet pour Android

Sommaire


  1. Installation des logiciels nécessaires

    1. Ajouter un nouveau chemin au Path du système
    2. Ajouter une nouvelle variable d'environnement au système


    1. Télécharger Android Studio
    2. Java Development Kit
    3. Ant
    4. NodeJs et Cordova
    5. Installer Android Studio
    6. Les explications


  2. Exportation du projet RMMV pour Android
  3. Création d'un projet Cordova
  4. Compiler le jeu
  5. Rendre son application déplacable sur la carte SD
  6. Importer votre projet dans Android Studio
  7. Conséquences sur le making
  8. Et après ?


Bonne lecture !

1. Installation des logiciels nécessaires

C'est probablement la partie la plus longue. Alors armez vous de patience et accrochez vous. Ah et aussi, prévoyez beaucoup de place sur votre ordinateur, le SDK d'android prend énormément de place (presque 10Go sur mon ordinateur). Je vais procéder dans l'ordre, j'expliquerai à la fin à quoi va servir chacun.

1.a. Ajouter un nouveau chemin au Path du système

A plusieurs reprises je vais vous demander d'ajouter des chemins d'accès à votre Path. Le Path est une sorte de liste de chemins d'accès dans laquelle le système va chercher une commande que vous tentez d'exécuter. Voici comment faire sur Windows 7 pour ajouter de nouveaux chemins à votre Path.
Allez dans Panneau de Configuration > Système et sécurité > Système.
Sur la droite, cliquez sur Paramètres système avancés. Puis dans la boite de dialogue qui s'ouvre, cliquez sur Variables d'environnement.
Enfin dans la liste Variables système, cherchez la variable Path. Double-cliquez dessus, ca ouvre une autre petite boite de dialogue (la dernière, c'est promis !). Dans la valeur de la variable (le champ du dessous), ajoutez à la fin le chemin complet vers le dossier à ajouter, en veillant bien à la séparer de la valeur précédente par un point virgule Wink. Après tout ca, vous n'avez plus qu'à refermer toutes les boites de dialogue en cliquant sur Ok à chaque fois, puis fermer le panneau de configuration ainsi que toutes les consoles d'ouvertes (le path n'est plus à jour dans ces consoles, il faut les réouvrir).

1.b. Ajouter une nouvelle variable d'environnement au système

Vous aurez aussi besoin de créer quelques nouvelles variables d'environnement au fur et à mesure des installations. Ces variables seront utilisées par Cordova et ses dépendances pour fonctionner correctement. Voici comment faire sur Windows 7.
Allez dans Panneau de Configuration > Système et sécurité > Système.
Sur la droite, cliquez sur Paramètres système avancés. Puis dans la boite de dialogue qui s'ouvre, cliquez sur Variables d'environnement.
Ensuite, avant de créer une nouvelle variable, cherchez si elle existe déjà dans l'une ou l'autre des deux listes. Si c'est le cas, double-cliquez dessus et changez sa valeur. Sinon, en dessous de la liste Variables système, cliquez sur le bouton Nouvelle..., et dans la nouvelle boite de dialogue qui s'ouvre, entrez d'abord le nom de la nouvelle variable puis en dessous sa valeur. Après tout ca, vous n'avez plus qu'à refermer toutes les boites de dialogue en cliquant sur Ok à chaque fois, puis fermer le panneau de configuration ainsi que toutes les consoles d'ouvertes (les variables d'environnement ne sont plus à jour dans ces consoles, il faut les réouvrir).

1.1. Télécharger Android Studio

Normalement je devrais terminer par ce logiciel-ci, mais il est tellement long à télécharger que je vous invite à commencer par ca. Vous le trouverez ici : https://developer.android.com/studio/index.html
Comme pour les logiciels suivants, je vous invite à prendre la dernière version ^_^. Je reviendrai à son installation un peu plus loin.

1.2. Java Development Kit

Bien, commençons. Tout d'abord, il vous faut le Java Development Kit. Pour cela, téléchargez puis installez la dernière version de Java SE (incluant le jdk) à l'adresse suivante : http://www.oracle.com/technetwork/java/javase/downloads/index.html
Java est nécessaire car Cordova crée l'application android en se servant de java.
Assurez-vous d'avoir Java dans le Path de votre système. Pour le vérifier, vous pouvez ouvrir une console MS-DOS et lancer la commande
Code:
java -version
Si ca vous affiche quelque chose comme ca
Code:
java version "1.8.0_144"
Java(TM) SE Runtime Environment (build 1.8.0_144-b01)
Java HotSpot(TM) 64-Bit Server VM (build 25.144-b01, mixed mode)
c'est bon.
Sinon, il faut ajouter manuellement le dossier bin (chez moi, son chemin d'accès est C:\Program Files\Java\jre1.8.0_144\bin). Vous pouvez à présent relancer le test précédent qui devrait fonctionner.
Enfin, ajoutez si elle n'existe pas déjà une nouvelle variable d'environnement nommée JAVA_HOME et avec comme valeur le chemin complet vers le jdk (chez moi, son chemin d'accès est C:\Program Files\Java\jdk1.8.0_144)

1.3. Ant

Ensuite passons à Ant. Là l'installation est assez simple. Il vous suffit de télécharger le fichier .zip, de le décompresser sur votre ordinateur, et enfin d'ajouter au Path le chemin vers le dossier bin contenu dans le dossier que vous avez décompressé.
Pour vérifier que Ant est bien installé et opérationnel, lancez la commande
Code:
ant -h
.
Si tout va bien, l'aide de Ant va s'afficher Smile

1.4. NodeJs et Cordova

Cordova est l'outil qui va nous servir. Ceci dit, Cordova est avant tout un paquet disponible via nmp, le gestionnaire de paquets de Node.js. Donc nous allons commencer par installer Node.js. Le plus simple est d'aller télécharger la dernière version sur le site officiel de Node.js : https://nodejs.org/fr/. Personnellement j'ai fait le choix de prendre la version stable actuelle, à savoir la version 8.4.
Pour vérifier que Node.js et npm sont bien installés, ouvrez une nouvelle console, lancez la commande
Code:
node --version
puis
Code:
npm --version
. Si tout est bien installé, ca va vous afficher les numéros de versions de chacun de ces deux outils, et nous pouvons continuer.

Ensuite nous avons Cordova à installer. Et là ca va être très simple, lancez simplement la commande
Code:
npm install -g cordova
. Ca va tourner tout seul quelques minutes puis cordova sera installé Smile Et pour vérifier que tout est bon, il suffit de lancer
Code:
cordova --version
dans la console, et normalement vous devriez obtenir le numéro de la version installée.

1.5. Installer Android Studio

En soi, l'installation n'est pas compliquée. Mais il faut bien penser à l'installer là où il y a de la place. Pensez également à bien installer le SDK, sans quoi nous serions bien embêtés plus loin. Et au passage, retenez bien où sera installé votre SDK, Android Studio va vous le demander au premier démarrage. Par défaut, il l'installe dans
Code:
C:\Users\<VotreNomDUser>\AppData\Local\Android\sdk
. Bien sur, vous pouvez décider où il sera installé, et heureusement parce que c'est ce qui prend le plus de place (pour le sdk des versions d'android 6 et 7, j'en ai pour presque 10Go).
Une fois Android Studio installé, il ne reste plus qu'à ajouter les dossiers suivants au Path du système (moi je ne mets pas les chemins complets parce que ca dépend de votre installation, mais dans le path il faut bien mettre tout le chemin !) :

  • sdk\platform-tools
  • sdk\tools
  • Android Studio\gradle\gradle-3.2\bin

Si tout est bien installé, en ouvrant une nouvelle console puis en lancant la commande
Code:
adb -version
vous devriez obtenir quelque chose de ce genre :
Code:
Android Debug Bridge version 1.0.39
Revision 3db08f2c6889-android
(suivi de l'aide de adb)

1.6. Les explications

Comme promis, voici pourquoi je vous ai fait installer autant de choses.

  • Android Studio : C'est l'IDE officiel pour écrire des applications android. Il intègre entre autre choses adb (Android Debug Bridge), ainsi qu'un émulateur android qui vous permettra de tester votre projet.
  • Node.js : Node.js était utile pour son gestionnaire de paquets npm. En dehors de ca, nous ne l'utiliserons pas.
  • Cordova : C'est le principal outil que nous utiliserons. Cordova est un projet d'apache qui construit une application qui se comporte comme un navigateur très léger. C'est tout ce dont nous aurons besoin pour transformer un projet RMMV (qui se comporte comme un site web) en apk (application android).
  • Ant et Java : Nous ne les utiliserons pas directement. C'est Cordova qui va les utiliser et c'est pour ca que je vous les ai fait installer avant.


2. Exportation du projet RMMV pour Android

Après tout ce temps passé à installer le nécessaire pour créer une application android à partir de sources web, il est grand temps de préparer notre projet Smile Et ca va aller vite vous verrez. D'abord un petit détail à savoir, pour les musiques il faut les avoir au format .m4a pour android. Cette précision faite, on peut continuer. Ouvrez votre projet dans RMMV. Ensuite allez dans Fichier > Déploiement. Puis choisissez la plateforme de destination. Dans notre cas, c'est Android/iOS. Vous pouvez cocher l'option Exclure fichiers inutilisés, votre projet sera moins lourd ainsi. Choisissez un dossier de destination dans lequel sera créé un sous dossier au nom de votre projet. Ce dossier contiendra un dossier www qui contiendra tout votre projet RMMV.
A noter que Cordova inclut une API qui permet d'interagir avec l'appareil android. Si vous souhaitez l'utiliser, vous pouvez, il faut juste modifier le fichier index.html avec n'importe quel éditeur de texte et ajouter cette balise script :
Code:
<script src="cordova.js"></script>
Le fichier cordova.js n'existe pas quand vous exportez votre jeu, mais il est automatiquement créé dans le projet Cordova, pas d'inquiétudes Smile
Et la doc de l'API de Cordova : https://cordova.apache.org/docs/en/latest/ (la doc anglaise est plus détaillée que la doc francaise)

3. Création d'un projet Cordova

Maintenant choisissez un endroit sur votre ordinateur où seront stockés tous vos projets Cordova. Une fois ce dossier créé, ouvrez-le dans l'explorater Windows. Ensuite il suffit de copier le chemin de votre dossier et d'ouvrir une console en mode administrateur (dans le menu démarrer, tapez cmd, puis faites un clic droit sur cmd.exe et cliquez sur Exécuter en tant qu'administrateur). Le mode administrateur est nécessaire pour lier les sources sans les dupliquer (ce qui prend inutilement de la place).


Dernière édition par Sphinx le Lun 4 Sep 2017 - 18:49, édité 2 fois
avatar
Sphinx
Membre

Nombre de messages : 58
Distinction : aucune
Date d'inscription : 08/03/2016

Re: Exporter son jeu vers Android

le Dim 27 Aoû 2017 - 20:03
Bref, une fois dans la console, lancez la commande
Code:
cordova create <dossier> <id> <nom> --link-to <sources>
où :

  • <dossier> est le nom du dossier qui sera créé dans le dossier courant
  • <id> est l'identifiant de l'application (sous la forme fr.nomDeveloppeur.nomAppli)
  • <nom> est le nom de l'application
  • <sources> est le chemin vers le dossier Projet\www où vous avez exporté votre projet à l'étape 2

Si vous avez un espace au milieu de l'un ou l'autre de ces arguments, pensez à mettre des guillemets (") autour !
Dans mon cas, je me suis basé sur le projet de mon script de Maplink. Ma commande sera :
Code:
cordova create maplink fr.sphinx.maplink Maplink --link-to "D:\Users\Sphinx\Mes jeux RMMV\Maplink\www"
Ensuite il mouline plus ou moins longtemps et retourne :
Code:
Creating a new cordova project.
A partir de là, on a un projet qu'on pourra exporter sur android.

4. Compiler le jeu

Toujours dans la même console, vous allez demander à Cordova de construire votre application pour Android (à cet instant, vous pourriez aussi lui demander de construire pour iOS, mais il faut du matériel mac pour compiler pour mac)
D'abord déplacez vous dans le dossier de votre projet que Cordova vient de créer en faisant
Code:
cd <dossier>
(c'est le même <dossier> qu'à l'étape précédente).
Vous allez lancer la commande
Code:
cordova platforms add android
Si tout va bien, il va mouliner un moment et il va vous afficher quelque chose qui ressemble à ca :
Code:
Using cordova-fetch for cordova-android@~6.2.2
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: fr.sphinx.maplink
        Name: Maplink
        Activity: MainActivity
        Android target: android-25
Subproject Path: CordovaLib
Android project created with cordova-android@6.2.3
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android

              This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving android@~6.2.3 into config.xml file ...

Plus tard, si vous avez modifié votre projet, et après l'avoir réexporter comme tout à l'heure à l'étape 2, il suffit de rouvrir la console dans le dossier du projet Cordova (celui dans lequel vous avez lancé la commande précédente) il faut reconstruire votre projet android en lancant la commande
Code:
cordova build android

5. Rendre son application déplacable sur la carte SD

Pour avoir expérimenté ceci, je peux vous dire qu'une application RMMV ca prend tout de suite de la place (comparé à l'espace disponible sur un téléphone ou une tablette). Et j'ai eu la désagréable surprise de voir que mon jeu n'était pas déplacable sur ma carte SD. Alors j'ai cherché un peu et j'ai trouvé une solution qui fonctionne Smile Pour autoriser une application à s'installer sur la carte SD, il suffit de modifier le manifeste de l'application. Mais ce n'est jamais une bonne idée de le faire à la main (le manifeste est recréé à chaque compilation, les modifications faites dedans ne perdureront pas du coup). J'ai dégoté un plugin de cordova qui permet de modifier une option du manifeste dans le config.xml du projet cordova, ce qui nous permettra d'autoriser le déplacement de l'application.
Si vous êtes encore dans la console, ne bougez pas et attendez la suite. Si vous étiez sorti, ce n'est pas grave, il faut juste retourner dans la console, dans le dossier de votre projet Cordova Wink. On va d'abord installer le plugin de cordova. Lancez la commande
Code:
cordova plugin add cordova-custom-config
Ca va mouliner un peu, c'est normal. Laissez le faire, et pendant ce temps on va modifier le fichier config.xml. Ouvrez le dans n'importe quel éditeur de texte et recherchez les lignes suivantes :
Code:
    <platform name="android">
        [...]
    </platform>
et entre les deux balises plateform, ajoutez la ligne suivante puis enregistrez vos modifications :
Code:
        <preference name="android-manifest/@android:installLocation" value="auto" />

Quand le plugin est fini d'installer et que votre config.xml est enregistré, retournez dans la console et recompilez votre projet android en lancant la commande suivante :
Code:
cordova build android

6. Importer votre projet dans Android Studio

6.1. Préparer son projet (et corriger un petit bug)

Ca c'est surtout pour permettre de tester son application android sur un émulateur, ou sur un appareil bien réel pourvu qu'il autorise le débuggage usb, un paramètre désactivé par défaut. Ouvrez Android Studio, puis cliquez dans la petite fenêtre qui s'ouvre sur Import project (Eclipse ADT, Gradle, etc.). Dans la fenêtre qui s'ouvre, le logiciel vous demande où se trouve votre projet android.
Quand vous avez ajouté la plateforme android à votre projet Cordova, à l'étape 4., cordova a créé un sous-répertoire dans le répertoire platforms de votre projet. C'est ce répertoire platforms\android qu'il faut aller chercher maintenant. Chez moi c'est le dossier maplink\platforms\android.
Une fois que c'est fait, Android Studio va indexer tous les fichiers du projet, ce qui peut lui demander plus ou moins de temps. Il va automatiquement tenter de construire l'application, en se servant de gradle. Au passage, il devrait vous demander de mettre à jour gradle justement. Cliquez sur Update, il sera content. Mais il y a un petit bug avec la version actuelle de gradle. Il va vous cracher une jolie erreur :
Code:
Error:(20, 0) Unable to load class 'com.google.wireless.android.sdk.stats.GradleBuildProfile'.
Possible causes for this unexpected error include:<ul><li>Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.)
<a href="syncProject">Re-download dependencies and sync project (requires network)</a></li><li>The state of a Gradle build process (daemon) may be corrupt. Stopping all Gradle daemons may solve this problem.
<a href="stopGradleDaemons">Stop Gradle build processes (requires restart)</a></li><li>Your project may be using a third-party plugin which is not compatible with the other plugins in the project or the version of Gradle requested by the project.</li></ul>In the case of corrupt Gradle processes, you can also try closing the IDE and then killing all Java processes.
Pour le corriger, il faut aller dans le dossier android (normalement Android Studio vous place automatiquement dessus) puis dans Gradle scripts. Ensuite éditer (en double-cliquant dessus) le fichier build.gradle (Module: android) (attention vous avez un autre build.gradle, du module Cordova).
Recherchez puis changez ceci :
Code:
apply plugin: 'com.android.application'

buildscript {
    repositories {
        mavenCentral()
        jcenter()
    }

    // Switch the Android Gradle plugin version requirement depending on the
    // installed version of Gradle. This dependency is documented at
    // http://tools.android.com/tech-docs/new-build-system/version-compatibility
    // and https://issues.apache.org/jira/browse/CB-8143
    dependencies {
        classpath 'com.android.tools.build:gradle:2.3.3'
    }
}
et remplacez la ligne classpath par :
Code:
      classpath 'com.android.tools.build:gradle:2.2.2'
Sauvegardez votre modification, puis dans l'avertissement jaune en haut de la fenêtre (Gradle project sync failed.[...]), cliquez sur Try Again. Il va à nouveau vous dire que la version du plugin gradle n'est pas à jour. Comme c'est cette mise à jour qui actuellement pose problème, dites-lui Don't remind me again for this project.
Il va travailler encore quelques minutes (ou un peu plus, ca dépend de la taille de votre projet je pense), laissez-le faire.

6.2. Tester sur un vrai téléphone/une vraie tablette android

Maintenant vous êtes prêts à tester. Au choix, vous pouvez tester sur un téléphone ou une tablette android que vous possédez (et avec le debuggage usb activé), dans ce cas il faut le brancher maintenant à l'ordinateur. Sinon vous pouvez aussi bien tester dans un émulateur, un appareil virtuel que vous allez devoir configurer un minimum. Quand vous êtes prêts, cliquez sur le triangle vert qui pointe vers la droite (symbole lecture quoi) et qui se trouve à peu près au milieu de la barre d'outils.
Ca va ouvrir une fenêtre qui va tourner un court instant, pour finir par vous lister 2 choses : d'abord les appareils réels connectés à l'ordinateur, et en dessous les appareils virtuels que vous avez déjà créé. Si c'est là votre première utilisation d'Android Studio, il est fort probable que vous n'ayez aucune machine virtuelle.
Si vous faites le choix de tester sur un vrai appareil android, sélectionnez le dans la liste puis cliquez sur OK.

6.3. Tester sur un appareil virtuel android (AVD)

Si vous voulez tester sur l'émulateur, répétez l'étape 5.2.
Mais ca va demander une petite étape supplémentaire. Cliquez d'abord sur Create New Virtual Device. Ensuite, à gauche, choisissez entre un téléphone ou une tablette (ou une montre ou une télé, on ne sait jamais Smile). Dans le panneau du milieu, vous avez la liste des appareils virtuels. Parmi ceux disponibles, vous retrouverez bien évidemment les appareils de Google, tels les Nexus. Puis en dessous, vous avez des appareils génériques définis par leur résolution et la taille de leur écran. Moi pour tester, j'ai choisi de me créer une tablette, et comme j'ai une galaxy tab s, j'ai pris la dernière de la liste, la tablette 10.1" WXGA ^_^. Une fois votre appareil choisi, cliquez sur Next.
Il vous demande maintenant de choisir la version d'android que vous souhaitez tester. Par défaut, à l'installation d'Android Studio, il a chargé le sdk de Android Nougat (7.1.1). Si vous en souhaitez un autre, il vous propose les plus récents, à savoir depuis Android Lollipop 5.1. Pour télécharger le sdk correspondant, cliquez sur Download à côté de la version qui vous intéresse. Une fois téléchargée, elle deviendra disponible pour installer sur un AVD. Une fois la version d'Android choisie, cliquez sur Next.
Il vous propose enfin de vérifier la configuration de votre appareil virtuel, et vous permet de sélectionner si vous souhaitez qu'il soit en portrait ou en paysage au démarrage. Quand tout est bon pour vous, cliquez sur Finish, et il va vous rammener à la liste des appareils du début. Sélectionnez votre nouvel AVD dans la liste puis cliquez sur Ok et l'émulateur va démarrer. Il est assez long au démarrage, surtout la première fois, alors ne soyez pas trop surpris Wink

7. Conséquences sur le making ?

Pour le peu que j'ai testé, j'en vois principalement une : je ne sais pas comment accéder au menu (échap depuis un PC) donc prévoyez peut-être un bouton cliquable sur l'écran Smile (et là je vous renvoie vers le tutoriel de Tonyryu sur comment créer un hub sur la carte)
Edit : En fait pour ouvrir le menu sur Android, il faut cliquer sur la carte avec 2 doigts (ce qui reste compliqué sur un émulateur qu'on actionne à la souris Wink)

8. Et après ?

L'étape d'après c'est de publier son programme sur le play store, mais ca je ne connais pas encore Wink De ce que j'en sais, ce n'est pas gratuit (un paiement unique de 25€, qui autorise à publier autant d'apps qu'on le souhaite, et après Google doit prendre autour de 30% du prix de vente de votre application, si je ne m'abuse).


Dernière édition par Sphinx le Lun 4 Sep 2017 - 19:04, édité 1 fois
avatar
Ewaldar
Membre

Nombre de messages : 1387
Age : 24
Localisation : Suisse
Distinction : aucune
Date d'inscription : 29/12/2011
http://ewaldar.wixsite.com/les-ames-perdues

Re: Exporter son jeu vers Android

le Lun 28 Aoû 2017 - 21:01
Hello,

Spinx, le vrai de vrai ? Depuis le temps que j'utilise PSP Wink Parenthèses à part, c'est super détaillé et cela permettra à tous ceux souhaitant exporter un jeu sous android/ios de le faire dans de bonnes conditions.

Merci du partage !
avatar
Sphinx
Membre

Nombre de messages : 58
Distinction : aucune
Date d'inscription : 08/03/2016

Re: Exporter son jeu vers Android

le Lun 4 Sep 2017 - 19:08
Smile Ajout d'une étape supplémentaire après l'étape 4 de compilation : autoriser le déplacement vers la carte SD. C'est une étape facultative, mais qui peut être très utile (un projet RMMV ca prend de la place, j'en ai commencé un qui pèse déjà plus de 100Mo, et encore je n'ai créé aucune carte ni ajouté le moindre tileset supplémentaire)
Contenu sponsorisé

Re: Exporter son jeu vers Android

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum