I've done this a few times, including just recently thanks to a failed hard drive, so I thought I'd share my full process for making an app, since it comes up on here every so often. There are other ways, and I'm not claiming this is the best way, but it's been reliable for me. While the process should be pretty similar from a Mac or to make an iOS deployment, I don't have anything Apple to test it on, so I can't say for sure; this tutorial assumes you're using Windows and deploying to Android -- sorry for that limitation. You can find similar walkthroughs scattered around the internet, but this one is intended to be more complete and relevant to RM.
A word of warning: this isn't a short process or a short tutorial. The whole thing is generally pretty simple (and easy to Google if you hit a snag), but there are lots of steps and installs, and it can be time consuming the first time through. The good news is that you only have to do all this once, then you can churn out a fresh version of your app or another game with ease.
Spoiler: Requirements
Whew...there are a few; get ready. You can go ahead and get all of this stuff now, but it's also detailed in each step of the process if you want to do it as you go through.
RPG Maker MV or MZ (obviously)
A game you want to deploy to Android (also obviously)
Spoiler: 1) Deploy your game in web browser format
Okay, this doesn't have to be first, but you might as well get it out of the way. Cordova basically just saves web files (HTML and so on) into an Android-accessible form, so if your game works from a browser, it should work through this method.
Spoiler: 2) Install Node.js
This is what runs Cordova, so you'll need it first. You can get that from http://nodejs.org. You should note that this may take a few minutes (especially if you're also doing the Chocolatey install -- there may come points where you think Windows Power Shell has frozen), so maybe grab a drink before you settle down for the full ordeal. Once installed, test it out: open a command prompt window (you can just type cmd into the Windows search bar) and type:
Code:
node --version
复制代码
If it spits out the version number, you're in business.
Spoiler: 3) Install a git client
This is just something else Cordova uses that you'll need to get everything started. You can "git" (ha) what you need from http://git-scm.com. There's nothing special to say on this; just download and install with the default settings (or not -- I guess that's up to you).
Spoiler: 4) Install Cordova
You don't need a link for this one, just open that command prompt again and type this into it:
Code:
npm install -g cordova
复制代码
Once that's done, you can test it just like you did with node.js:
Code:
cordova --version
复制代码
Spoiler: 4a) Create your Cordova project
In the command window, navigate to the folder where you're going to make the project. This should be something unique to your app and it's probably best to start with an empty folder. My directory probably won't match up with yours, but here's an example of how to get there:
Code:
cd Documents/Output/android
复制代码
Note that 'cd' is the command to change directories; you have to type that before the desired location if you want to move to it. If you need to go up a folder you can just type:
Code:
cd ../
复制代码
Once you're where you want to be, you're only a single command from having your very own Cordova project:
Code:
cordova create <folder> <identifier> <name>
复制代码
Folder is the name of the folder you want your Android app to be built from and in. Identifier is the name the system will use for your app, usually something like "com.RPGMaker.MyGame." Lastly, name is the name of your app that other humans will generally see. As an example, you could type:
Code:
cordova create GameFolder com.rmmz.mygame MyGame
复制代码
That'll make a folder called GameFolder, it'll give your project the ID com.rmmz.mygame, and it'll make the official name of your app MyGame.
Spoiler: 4b) Add the Android platform to your project[quote]In the command prompt, navigate to your Cordova project's base folder (so if you used the above setup, you'd type cd GameFolder) and then type in:
Code:
cordova platform add android
复制代码
You can also add others with the same format; type in the following to see what's installed and what's available:
Code:
cordova platform ls
复制代码
[/quote]
Spoiler: 5) Add Cordova's build requirements
While we have everything we need to install and run Cordova already done and taken care of...well, we don't really. If you want to see what I mean, go ahead and type this into your terminal (you need to be in a Cordova specific folder, like the one you made above):
Code:
cordova requirements
复制代码
You're probably going to see that the four horsemen of actually using Cordova to make an app aren't installed (great, more stuff to install...huzzah). We'll just tackle them each one at a time.
Spoiler: 5a) Install Java JDK
You might already have the Java runtime environment, but we're looking for the JDK. Assuming you don't have it (the requirements check should let you know), cruise on over to https://www.oracle.com/java/technologies/downloads/archive/ and get the development kit appropriate to your pc (so x64 if you're running 64-bit Windows, x86 for 32-bit) and your version of Cordova. As of this update, Cordova 12 is the most current version, which supports up to Java JDK 11. Anyway, install that puppy and move on. Make sure you note the directory you install it to, though; you'll need that next.
Spoiler: 5b) Configure the paths for the JDK[quote]To do this, you need to get into System Properties, which should be found in the System window. Go to Control Panel > System and Security > System or just press the Windows+Pause/Break keys together. However you get there, look for a link for "Advanced system settings." You could also just type "environment variables" in the Windows search bar; the first option should be from your control panel, which is what you need.
Now that you (hopefully) have your System Properties window, click the Advanced tab and then click "Environment Variables." Under User variables select Path and click on edit. It's possible you won't have Path listed there; in that case, click the New button and put the Variable name as "Path" (no quotes). That should get us all caught up to the same point.
In the Edit environment variable window, hit new and type in the location of you JDK install (you can just copy and paste from the explorer address bar). If you used the default settings, it should look something like this:
Code:
C:\Program Files\Java\jdk-11\bin
复制代码
With that done, click okay, and look below System variables for JAVA_HOME. If it's not there, make it (the same way you would have with Path above), then edit it to include...the same thing! This time, leave off the \bin directory from the end. It'll probably look like this:
Code:
C:\Program Files\Java\jdk-11
复制代码
We're finally done with this step. Click OK until you run out of OKs. Go ahead and open that command prompt again and we'll make sure it's working. Type in:
Code:
javac -version
复制代码
Did you get a version number? If so, go on to the next step. If not...you messed something up. Sorry about that. Try again. Note that if you left the command prompt open between installs, you'll likely have to exit it and open a new instance to get the new stuff to show.
Spoiler: 5c) Install Android Studio
You've got to be sick of the installations by now; I completely feel that. We're close, though, I promise. You can get Android Studio here: https://developer.android.com/studio. You can also just get the SDK tools from that website if you don't want the whole studio program; the process is mostly the same, but I typically go for the full thing, since it's useful for other things and simplifies the process. I'll assume you're using Android Studio going forward. Run the application once to get everything set up -- it'll want to download some stuff and configure itself for use.
Once it's all set up, click 'more actions' from the starting screen (in Android Studio "Flamingo," which is the most current as of writing this), then select "SDK Manager" from the drop down. You need a few things here:
In the "SDK Platforms" tab, you'll need to install 'Android 13.0 Tiramasu' (or whatever version you'd like to build for; API 33 is the highest supported by Cordova 12).
In the "SDK Tools" tab, you'll first need to uncheck 'Hide Obsolete Packages' and check 'Show Package Details.' Under "Android SDK Build-Tools 34," install 33.0.2. Then scroll down until you see "Android SDK Command-line Tools (latest)" and "Android SDK Platform-Tools." Install all of those, and optionally "Android Emulator."
If you've got a different version of Cordova, check out this page to see which Android versions are supported: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
Spoiler: 5d) Configure the paths for the SDK tools
Go to that same System Properties window where we added our last paths. We're doing basically the same thing again, if you hadn't guessed. Under User variables, select Path and click Edit. This time you'll be adding the directories for tools, command line tools, build tools, and platform tools. If you chose to install the emulator, you'll also need a path for it. Those might look something like this:
Code:
That's all for User Variables; now go down to System variables. This time we're looking for ANDROID_SDK_ROOT, which you'll probably have to make. Click new, type ANDROID_SDK_ROOT into the name field, and enter the SDK directory into the Variable value. This is probably just going to be the same as the locations you used above, minus that last subfolder, making something like this:
Code:
C:\Users\YourName\AppData\Local\Android\Sdk
复制代码
Adding ANDROID_HOME should actually do and point to the same thing as ANDROID_SDK_ROOT, so you shouldn't need it, but it won't hurt to specify that as well with the same folder location used above.
Click OK a couple times when you're done. As always, we want to test, so open the command prompt and type in the following to see if you get a version number:
Code:
adb version
复制代码
Got a number? Great. No number? Less great; check your paths for typos and try again.
Spoiler: 5e) Install Gradle
That means another download first, but don't fret; the end is nigh! Here's the link to get Gradle: https://gradle.org/install/ You'll get the option for binary or complete. Get the one you like (I typically suggest not getting complete; you can always look up documentation online), then extract the files to C:\Gradle (or whatever letter your drive is).
Spoiler: 5f) Add gradle to your Path
You should be good at this part by now. Find your Environment Variables window again, select "Path" under System Variables and hit Edit. Add a new line and put in the path for gradle's \bin directory. It'll probably be something close to this:
Code:
C:\Gradle\gradle-8.2\bin
复制代码
That's it for gradle, but you should probably test and make sure it's working. In a new command prompt window type in:
Code:
gradle -v
复制代码
You should get a version number, just like the previous steps. If you didn't, go back and check for errors.
Spoiler: 5g) Check those requirements
This part is simple, but you want to make sure everything is where it should be before you move on. Type this into the command prompt while in your Cordova folder:
Code:
cordova requirements
复制代码
That should return as installed on all points, with no more of those pesky yellow letters to tell you that something's not working. If you're still getting those pesky yellow letters, go through the above steps again and look for any errors/mistakes/typos/etc.
[/quote]
Spoiler: 6) Add an icon (optional)
You can skip this part if you want, but the Cordova icon isn't terribly aesthetic. Start by making yourself an image. It should be square (equal height and width) and visible enough that people will be able to see it at small size, although the image itself can be bigger; you can save this in .png format. If you're not sure about something with icon making, it's ridiculously easy to get help from a quick Google search; unfortunately, I don't want to walk through the steps of making an icon on top of everything else. Once you have that, drop it in the resources folder of your project (/Documents/Output/android/MyGame/Res or whatever) and go back to the Cordova project's root folder. Find config.xml and edit it with some sensible program; Notepad works if you're a masochist, or you can use something like Notepad++. All you have to do to this file is add the line:
Code:
<icon src="res/icon.png" />
复制代码
That should work anywhere between the <widget> tags. Obviously, if your icon is named something other than "icon.png" you'll need to change that to reflect the right file.
Spoiler: 6a) Add adaptive icons
Again, I'm not really writing an icon tutorial, so I'm just going to touch this briefly. You'll need to make a different icon for each 'density,' put them all in that same res folder I mentioned above, and add something like the following to config.xml instead of what's listed for single icons:
Code:
UPDATE: This is optional, but I'd strongly suggest it for projects using API 33 (highest currently supported) or newer - Adroid now supports "monochrome" icons, and not including an option will make your otherwise nice adaptive icons less adaptive. All you need is a grayscale version of the same icons (one for each size - I know that's a lot of images) and include them with the 'monochrome' attribute. The updated version will look like this:
Code:
If you need help making the icon files, there are tons of good tools online to convert images to icons, but I'm not going to dive into the specifics of how each is different from the other. Good luck!
Spoiler: 7) Make your app use immersive mode (optional)
Again, you don't need to do this, but you're going to end up with menu buttons and notification bars distracting from your game if you don't. This used to need a plugin, but it's as simple as an edit to the config.xml file now (this should be in the root of you Cordova project). You should be able to put this anywhere within the <widget> element:
Code:
<preference name="Fullscreen" value="true" />
复制代码
Note that this WILL NOT stretch your game to the user's screen size; the ratio is going to be whatever you set it as in RPG Maker. This only hides the notification bar and menu buttons.
Spoiler: 8) Make your app (finally!)
Okay, I think we're ready to make a game. First, copy the contents of your game's output folder (that is, all the contents of your most recent deployment's folder) and paste everything into the www folder of your Cordova project. If there's already some stuff in there, just delete it; you won't need that. Once everything is copied, go back to the command prompt and type in:
Code:
cordova build
复制代码
Now you just have to wait a moment and you should be done! The output folder for your app may vary depending on your version of Cordova (I'm really not sure), but you should be able to find a debug .apk somewhere around here:
Code:
One last thing: this makes an unsigned apk; it's usable on Android devices, but it won't meet the requirements of the Google Play Store. For that, you'll need to sign the app and maybe bundle it to .aab format (I'm not sure on this one; things have changed since the last time I put anything on the Play Store). There are other tutorials to do those things, but this isn't one of them. Good luck!
Spoiler: 9) Maybe I should mention some more stuff...
That's all...kinda...but things have changed since the first draft of this guide. Here are some other things you can do to pretty up your work.
Spoiler: 9a) Add an Android Splash Screen
This is relatively new, and I don't really want to walk through the process for this guide, but they're a thing now. If you'd like to include one (and you probably will, or your game will open to the Cordova logo), a good place to start learning what to do is the official Android Developers website.
Spoiler: 9b) Fix your game's "index.html" file[quote]The basic launch page the Maker spits out for your game is...well, pretty basic. Honestly, that's almost always fine, but you might want to consider restricting how the image is scaled and what the area outside of your game window could look like. In the <head> element, I use something like this:
Code:
As for the background (the black area that might show to either side of your game), you can change the background color or add an image as attributes of the <body> element. For example, you could have this:
Code:
<body style="background: #4e2759 url(img/background/dopebg.png)">
复制代码
[/quote]
Questions? Comments? Did I screw something up? I've done this process a few times (not just with RPG Maker), so I'll happily try to answer any questions that come up, but I'm really not an expert either. If anything needs to be fixed, let me know and I'll get to editing this post. Thanks for reading and I hope this helps!
Edit: It is very late, but I tried to fix some of the outdated or otherwise wrong material here. I might, however, have just made it worse...I hope it helps, but please continue to leave any feedback that might help me or the next person trying this!