[1.5.1+] Exporting to Android using Cordova

● ARCHIVED · READ-ONLY
Started by Kaliya 20 posts View original ↗
  1. Due to the process described in MV's help section for exporting to Android no longer being functional (R.I.P Crosswalk), this is a guide that will allow you to export to MV using a new way. I am writing a guide in a way that assumes you do not have a functioning Android development environment setup so we will be going over how to set that up as well. This guide will be written to get MV games to work on Android version 4.4 (KitKat) or higher.

    Installing Prerequisites
    Links:

    Android Studio/Android SDK
    Java Development Kit
    NodeJS
    Installing Java Development Kit (JDK)
    Download the latest version of the Java Development Kit (JDK) from the link provided above. If you're running 32bit Windows, download the 32bit version, if you're running 64bit, download the 64bit version. When Installing the JDK take note of where it is being installed too, we will need to know the location to setup something later. It may ask you to install the Java Runtime Environment (JRE) as well, if so do that too.

    Now we need to setup a "JAVA_HOME" environment variable. To do this follow the steps below.

    1. First press Win+R (Windows Key + R), this should open up the RUN window.
    2. In the RUN window type "SystemPropertiesAdvanced" (without quotes) and press enter or click OK. This should open up the "System Properties" window, like the image below.

    Figure -1. System Properties
    c417JDu.png
    3. Click "Envrionment Variables..." It should open the Environment Variables window like below.
    Figure 0. Environment Variables Window
    ABb7f0R.png
    4. Under "System variables" click "New.." it should open up a window asking for a "Variable name" and "Variable value".
    5. For the variable name put the following (without quotes) "JAVA_HOME".
    6. For the variable value put the location/path of your JDK install. Commonly (for 64bit): "C:\Program Files\Java\jdk1.8.0_144" (without quotes).
    7. Press OK three times to close all the windows.

    Installing Android Studio/Android SDK
    Download the latest version of Android Studio, or the standalone Android SDK. This guide will be using the Android Studio to illustrate the process however so I suggest that.

    When installing Android Studio, make sure the Android SDK option is checked.

    At some point during the installation you will be able to select the location you want to install the Studio IDE and Android SDK to. This page looks like the below by default:
    Figure 1. Android Studio Install Config
    YU25EE4.png

    You can install it to anywhere you like, but for the sake of the tutorial and for my own reasons I will be installing the Android SDK to the "C:\Android" directory (see below image). I suggest keeping the install location for it easy to reach, and without spaces as sometimes even on Windows spaces can be the cause of issues when doing stuff. Note down or remember the location of the "Android SDK" (In my case, as you will see in the image below, it is C:\Android) we will need it later.

    Figure 2. Android Studio Install Config Change
    oLlxTHB.png


    Once the Install is complete, start Android Studio. You may see a screen like below.
    Figure 3. Android Studio 'Missing SDK'
    lE5XAyu.png
    If this is the case, click Next and then make sure everything on the next page is checked like below and then click Next again.

    Figure 4. Android Studio SDK Missing SDK Install 2
    Mp5KthP.png

    On the next page, click Finish and it will begin to install the missing components. When the missing components are installed, click Finish again. This should open up a window like so:

    Figure 5. Android Studio Main Window
    T4LZYTv.png

    Click "Configure" at the bottom of this window, and then click SDK Manager. This will bring up a window like so:
    Figure 6. Android SDK Manager
    h99Ffue.png
    On this window, under the SDK Platforms tab check "Android 4.4 (KitKat)" and then click Apply and then Okay. This will bring up a window asking you to accept the Android SDK/Google License to install this version of the Android API. Click Accept and then Next to install this version of the API. When this is done downloading and extracting the API, click Finish again and then click Apply and Ok again to close the SDK Manager window. You can now close the Android Studio window as well.

    Now we need to setup the ANDROID_HOME environment variable in Advanced System Properties. In order to do that follow the steps above that you used to setup the JAVA_HOME environment variable, except for variable name put "ANDROID_HOME" and for variable value put the location of the Android SDK directory that you noted during the install (in my case C:\Android). DO NOT close the "Environment Variables" window like you did previously for JAVA_HOME, instead locate the "Path" system variable by scrolling down the list (if need be). You will need to modify this a bit by following the steps below.

    1. Double click the "Path" variable, it should open up a new window to edit the variable. In Windows 10, the window looks like the below image.

    Figure 7. Path variable editing
    tEsgwQX.png

    If you aren't on Windows 10, it may look like the window from creating a new variable, just the variable value field has a bunch of paths separated by the character ";".

    2. If you're on Windows 10, click "New" it will add a new text field at the bottom of the list for you to add a new path too.
    3. In the new text field type the path to your Android SDK install and end it with "\tools" (in my case: "C:\Android\tools" without quotes). Please make sure it is the full path to the "tools" directory of your Android SDK install, when installing the Android SDK it may have added an "sdk" sub folder before the "tools" folder if you did not change the directory.
    4. Repeat the above process but add "\platform-tools" after (in my case it would be "C:\Android\platform-tools" without quotes).
    5. Repeat the above process but just end it with the base directory for the Android SDK (in my case just "C:\Android" without quotes).
    6. Press Ok to close all the Environment variable and System Properties windows.

    If you aren't on windows 10, just do the above steps but instead of clicking "New", just end the path with a ";" (without quotes) before typing a new path.

    To test if you did it right, press Win+R and then type CMD and press enter. It will open the command prompt, type "android" without quotes and press enter. If you did it right you should see something similar to the below image.

    Figure 8. Testing Android SDK In command prompt
    SmzFeMJ.png

    Close the command prompt, if that was what you saw, you can move on. If it wasn't try modifying the variables again.

    Installing NodeJS
    Download and install the Windows LTS installer from the download link provided above for NodeJS. When installing NodeJS make sure the "Add To Path" option will be installed, so you can access NodeJS from the command prompt without having to add it to the Path environment variable yourself. Also make sure "npm package manager" will be installed as well.

    Once it is installed, you should be able to open the command prompt (Win+R + typing CMD and pressing enter) and if it was installed correctly (meaning it also set the Path variable in the environment variables) you should be able to type "npm" without quotes and press enter and get similar to the following image.
    Figure 9. Testing npm
    xm6ICId.png

    Building an APK

    Getting Cordova Setup
    Congrats! If you made it this far, your Android environment should be setup correctly and now its time to get Cordova.

    Step 1. If command prompt isn't open from testing npm, open it again.
    Step 2. Type the following and press enter: npm install -g cordova
    Step 3. If it installs correctly you should see something similar to this image below:
    Figure 10. Cordova install
    ZrhHEkW.png
    Step 4. Test the installation of Cordova by typing the following in command prompt and pressing enter: cordova
    Step 5. If installed correctly, you will see a Synopsis on how to use the cordova command (the help).

    Creating a Cordova Project
    With Cordova installed its time to create a project. In RPG Maker MV, deploy your project for Android/iOS as you would normally to get the exported "www" folder. Then follow the below steps to create a Cordova project to use for the exported "www" content.

    Step 1. In command prompt type the following and press enter (see below though before pressing enter): cordova create myMVProjectCordovaDirectory com.my.mvproject myMVProject

    Where "myMVProjectCordovaDirectory" is the directory you want the Cordova project to be
    Where "com.my.mvproject" is the "address" of your android app (usually safe to just do like com.yourComapnyOrName.TheGameName) without spaces.
    Where "myMVProject" (the last one) is the name of the cordova project, usually safe to just use your game name with no spaces.

    Example: cordova create C:\AwesomeGameCordova com.liquid.awesomegame AwesomeGame

    Step 2. If done correctly you should get a simple "Creating a new cordova project." output.
    Step 3. CD into the directory of the cordova project using the "cd" command. For the above example: cd C:\AwesomeGameCordova
    Step 4. Once in the directory with command prompt type the following and press enter: cordova platform add android
    Step 5. If the above is done correctly, you should see something similar to this image:
    Figure 11. Cordova add platform
    m95JPRH.png
    Step 6. Type the following and press enter: cordova requirements
    Step 7. The above command will check to make sure you can build the project for android, if so you should see similar output tot he below image.
    Figure 12. Cordova requirements check
    pSwXkT4.png
    Step 8. Open up the exported "www" from your game project and copy the contents of the "www" folder.
    Step 9. Go to the location of the Cordova project in Windows Explorer and enter the cordova projects "www" folder, deleting everything in it.
    Step 10. Paste the contents of your games "www" into the cordova projects "www". Your cordova projects www folder should look like the below image now.
    Figure 13. Cordova www project folder merge
    Tw7dIjJ.png
    Step 11. In command prompt type the following and press enter: cordova build android --release
    Step 12. After awhile if all goes well, a lot of text should fly by that are basically the build steps executing themselves, and you should end up with a built project.
    Step 13. Copy the built apk, found in <PathToYourCordovaProject>/platforms/android/build/outputs/apk/android-release-unsigned.apk to your phone and install the apk! Additionally if you have your phone connected and ADB enabled, you can do "cordova run android" to automatically do this and launch the game on your phone.

    Troubleshooting

    1. When building the apk with "cordova build android --release" i get the "ERROR: cmd: Command failed with exit code 1" error Why?
    Try doing the following commands:
    cordova platform rm android
    cordova platform add android@~6
    cordova build android --release

    If the above doesn't fix the problem, you may have messed up in setting up your environment.

    F.A.Q

    NOTE: This guide still needs refinement, and I will go through it later today and do so. You should be able to follow it though and if you understand it build for android, if you have any questions feel free to ask.

    Happy RM'ing!
    - Liquid
  2. Nice tutorial! Too bad I did everything step by step and I still get an error when I try to open the .apk file on my phone:

    App not installed. The package might be damaged.

    I have Android 7.0 Nougat on an S7 Edge.

    EDIT: It's allright, I fixed it now. Thanks again for the tutorial.
  3. Dalph said:
    App not installed. The package might be damaged.

    I have Android 7.0 Nougat on an S7 Edge.

    EDIT: It's allright, I fixed it now. Thanks again for the tutorial.

    You're welcome. Do you happen to know what was the problem in case it happens to others?
  4. The game runs pretty laggy on my tablet using this method. I've actually been using this method for quite a long time but I added Crosswalk along and the performance is much much smoother.
  5. I wish I had seen this much sooner. It took me a while to even discover what Cordova was. I had to figure out everything here myself because the instructions with Crosswalk don't work. Apparently finding the older versions of everything to make them work is too hard for me to grasp/accomplish. I finally have apks that work with Cordova, but ran into nothing but problems trying to use crosswalk. I almost requested a refund because the official steps don't work.

    Lee Sang said:
    The game runs pretty laggy on my tablet using this method. I've actually been using this method for quite a long time but I added Crosswalk along and the performance is much much smoother.
    Did you get Crosswalk recently or did you already have it installed? I can't seem to get it to work regardless of what I do. Mainly it seems that the problems come from needing the sdk's through Android Studio.
  6. bhindi1224 said:
    Did you get Crosswalk recently or did you already have it installed? I can't seem to get it to work regardless of what I do. Mainly it seems that the problems come from needing the sdk's through Android Studio.
    You do exactly what the topic tells you plus entering this line in cmd: cordova plugin add cordova-plugin-crosswalk-webview
    If you want more details, you can check it on Github. Adding crosswalk to your app definitely will improve the performance on mobile devices, but it's not stable on most devices. Some devices might occur crashing problem and black screen problem, etc.
  7. bhindi1224, please avoid double posting, as it is against the forum rules. You can use the "Edit" function on your posts to add additional information you've forgotten or respond to multiple people. You can review our forum rules here. Thank you.

  8. Dalph said:
    Nice tutorial! Too bad I did everything step by step and I still get an error when I try to open the .apk file on my phone:

    App not installed. The package might be damaged.

    I have Android 7.0 Nougat on an S7 Edge.

    EDIT: It's allright, I fixed it now. Thanks again for the tutorial.

    I have the same problem, and I have no idea how to fix it. Help please?

    +) I solved the problem by signing it, but another error occurred : when played on the device it says 'Loading Error Failed to load (directory)/(whatever file).(whatever format).
  9. So after a bit of blind trial/error, managed to successfully sign the app and build it to android.

    Followed all the steps up to Step 10. After that, I looked to the App Signing page for Android Studio and generated a private key using the keytool command under "Build and sign your app from command line" (resulting in a .jks file). After that I edited the release-signing.properties files in yourcordovaprojectfolder/platforms/android with the information provided in generating the private key (probably not needed, but wanted to make sure it worked). Also made sure a copy of the .jks file was in platforms/android, again just to make sure nothing would go wrong with the build process.

    Then went to /platforms/android in the command prompt and ran gradlew assembleRelease to successfully build a signed apk.

    Again probably the worst way of going about building a signed app, but for just testing to see how it runs on your phone it'll work.
  10. Nysight said:
    So after a bit of blind trial/error, managed to successfully sign the app and build it to android.

    Followed all the steps up to Step 10. After that, I looked to the App Signing page for Android Studio and generated a private key using the keytool command under "Build and sign your app from command line" (resulting in a .jks file). After that I edited the release-signing.properties files in yourcordovaprojectfolder/platforms/android with the information provided in generating the private key (probably not needed, but wanted to make sure it worked). Also made sure a copy of the .jks file was in platforms/android, again just to make sure nothing would go wrong with the build process.

    Then went to /platforms/android in the command prompt and ran gradlew assembleRelease to successfully build a signed apk.

    Again probably the worst way of going about building a signed app, but for just testing to see how it runs on your phone it'll work.

    There's a lot of ways to create a keystore, you can read about it right here. Read carefully and you shall get it done, but I think the most simple way is to write down this line in cmd:

    keytool -genkey -v -keystore [somename].keystore -alias [somename] -keyalg RSA -keysize 2048 -validity
    [Key Validity in Days]

    If you do it right, it'll tell you to set a password and where to save the key, etc. There'll be 2 passwords. I recommend setting the same password for both of them. The key should be in *.keystore extension. After you got the keystore, follow this step to build a signed apk:
    1. Open a new cmd
    2. Write: cd [name of your project folder that created with Cordova]
    3. Write: cordova build android --release -- --keystore=[Where keystore placed] --storePassword=[keystore password] --alias=[the alias that you set] --password=[password]
    [Where Keystore Placed]
    should be something like this F:\folder\something\abc.keystore
  11. I can seemingly compile without errors but when I try to install on the device it gives the following error (the app was not installed.)

    photos below
    1.PNG 2.PNG 3.PNG
  12. @Fraank I think it's because you have to build a signed APK to be able to run on mobile devices.
  13. Thank you . I managed to run on my device but it gives the following error [ your browser does not support web audio api ]
    like this one in the image below. Why this mistake?
  14. Fraank said:
    Thank you . I managed to run on my device but it gives the following error [ your browser does not support web audio api ]
    like this one in the image below. Why this mistake?
    May I know the device you're using to run the apk?
    That error could be mean your device is outdated. Try to run it on other devices and see if it works.
  15. Dalph said:
    Nice tutorial! Too bad I did everything step by step and I still get an error when I try to open the .apk file on my phone:

    App not installed. The package might be damaged.

    I have Android 7.0 Nougat on an S7 Edge.

    EDIT: It's allright, I fixed it now. Thanks again for the tutorial.
    Hi, how do you fix the error?
  16. Hello, nice tutorial , a pity, i had learned it in my own yet. But i have a small problem, when i want to exit the game in my mobile. It exit ok, but the screen go black, i suppose it is for cordova, i need code for exit of the game totally. Can you say me how? Thanks
  17. Hey so im stuck on
    Step 6. Type the following and press enter: cordova requirements
    Step 7. The above command will check to make sure you can build the project for android, if so you should see similar output tot he below image.

    I uploaded images of the error and my setup stuff, if you see anything obviously wrong or have any suggestions please message me

    Edit: My path for java was incorrect, not suprised i messed something up i was working on this after several cape cods... any rate fixed so i guess good troubleshooting tip double and triple check all your paths :p

    Edit2: everything worked fine but now im getting the app not installed error on my phone, anyone ever find out how dalph fixed his problem with it?
  18. Wow. Nice guide, thx!
  19. Kenvarus said:
    Hey so im stuck on
    Step 6. Type the following and press enter: cordova requirements
    Step 7. The above command will check to make sure you can build the project for android, if so you should see similar output tot he below image.

    I uploaded images of the error and my setup stuff, if you see anything obviously wrong or have any suggestions please message me

    Edit: My path for java was incorrect, not suprised i messed something up i was working on this after several cape cods... any rate fixed so i guess good troubleshooting tip double and triple check all your paths :p

    Edit2: everything worked fine but now im getting the app not installed error on my phone, anyone ever find out how dalph fixed his problem with it?
    <3
  20. Please anyone can help me with this error
    RMowhXv.png