Purchasing an iOS, Android, or Windows Phone export module isn't the only (legal) way to get your GameMaker: Studio projects running on these devices. Wrapping an exported HTML5 project to run as native applications using Adobe PhoneGap is a possibility - and almost too easy. In fact, I couldn't believe the results myself when I saw just how straightforward and automated this freemium service is.
After trying out other cross-platform services such as Electron, NativeScript, and NW.js, I can confidently say that PhoneGap is my favorite and will be my go-to wrapper for mobile. In this tutorial, I'll walk you through the gist of getting your HTML5 games up and running on iOS, Android, and Windows Phone. While there is an emphasis on wrapping GM:S-exported HTML5 projects in this post, you may still find this tutorial useful if your means of creating the project was through something else, like Construct. At the end of the day, an HTML5 project is an HTML5 project.
Before we begin, a couple notes. First, HTML5 has additional limitations when compared to writing iOS, Android, and Windows Phone applications in Objective-C, Swift, Java, et al, so be sure to take this into account when developing. For example, my test game would only render at half the possible resolution, so I had to do additional debugging. Don't ever assume everything will work as intended. Second, you will need an Apple Developer Certificate to work with iOS, even for basic testing. Necessary certificates and code signing keys are essential to publish on any of the three app stores.
Creating an HTML5 Project
For the sake of simplicity, I went ahead and made a quick and easy little project - something that's visually-impacting so we can see the game is actually running. If you're curious, the code draws 50 sprites every step randomly across the screen with varying scales, rotations, blends, and transparencies. Fair warning, it's quite trippy and should not be done if you experience epilepsy. I do this as a silly little way to gauge performance.
Be sure that the Target is set to HTML5 (highlighted in red) in the GM:S navigation bar. Then, either press Ctrl + Alt + C or navigate to File -> Create Application to build the HTML5 project. I created a folder on the desktop called Test_Project in which the project will be exported to.
Once the build is complete, navigate to the folder and zip it. On modern Windows operating systems, this is as simple as right-clicking the folder and then Send to -> Compressed (zipped) folder.
Uploading the Project to PhoneGap
Next, we will click the Upload a .zip file button and select the zipped project through the File Explorer. There is also the option to connect a Github account and pull directly from a repository.
Had we included a config.xml file with the project (GM:S does not generate one), the name and description would have been filled out for us already. Luckily, we can fill this in right here. If you would like to manually include the config.xml in the project, here are instructions and a template. Simply place the file in the Test_Project folder, re-zip it, and upload. In order to package application icons and splash screens, the config.xml file is needed. You can read more about that specifically here.
For testing purposes, not having this file present suffices. Press the blue Ready to build button once you're happy with the information present on the screen.
We're almost already done!
Scanning and Running the Project (Android and Windows Phone)
Patiently wait on the next screen for Android and Windows Phone applications to be compiled. iOS users, I'll get to you shortly. Clicking on the (completed) blue icons will download a .apk (Android) or .appx (Windows Phone) file to your computer. Rather than manually send that file to your phone, you can scan the QR code on the right of the page with your phone to be taken directly to the install. There's plenty of free QR code scanning applications on mobile app stores.
Viola! Upon scanning and installing via a prompt, your HTML5 project should be running on your device through a side-loaded application.
Signing Applications and Updating Builds
Clicking on the project name, you will be directed to the builds page. Here, you can upload a new file by pressing the Update code button (and Rebuild all if necessary). You can also add keys to your project so they can be signed. This is a necessary step if you want your application to be able to be published on app stores. For iOS, signing is mandatory to even test the application.
Rather than regurgitate information, PhoneGap provides fantastic documentation on this process for all three exports. Click here for the brief walkthroughs.
Pretty easy, eh? If you're struggling with any part or want to see what else you can do, I recommend reading up on PhoneGap's documentation. While this tutorial (if you can even call it that) was basically just a showcase of the greatness that is PhoneGap, I feel many indie game developers are unaware of what HTML5 wrappers are and how powerful they can be in regards to more unified development. As always, feel free to leave any comments, questions, or critiques below!