How to publish a Construct 2 Html5 game into Android using Monaca

How to publish a Construct 2 Html5 game into Android using Monaca

At the beginning of 2016 I bought a Construct 2 game template to make a marketing proposal.

Even with my little experience, I can tell that construct 2 is a great platform for developers. However, publishing the games can be hard and expensive for a casual developer like me.

This tutorial will try to explain how to export and test the game in a more painless way than the ones proposed on the official website of the project.

1. First, we need to get the html5 version of the game

Please be aware that we don’t want the version with a frame around. Frames help to adapt the game resolution in desktop browsers. However, that is not our final platform.

Open your Contruct 2, select export as ¨Html5 website¨ and later do not select to add a frame to the game, or it will look awful inside the phone.

If you bought a template as I did, and already include it, you can just enter in the ¨html5¨ folder and then on folder ¨Game¨. That is the game without a frame.

2. Upload and configure it:

Now that you have the html5 game, we need to upload the game to Monaca and configure it.

2.1 Upload the project

To avoid problems I advise you to use Chrome.

First, we register in monoca.io and we create a project using the ¨minimum template¨ that Monaca provides.

This is important because our project needs the file ¨config.xml¨ that the project provides.

0_1460669704047_1upload.jpg

We need to upload the game files into the folder ¨www¨. You can delete the rest of the files in the folder except ¨config.xml¨ if you want.

2.2 Configure the project:

Now that we have uploaded the game, we need to configure it so we can publish it into Android.

0_1460669725137_2config.jpg

2.2.1 We go to Config –> Manage Cordova Plugins

You should enable the plugin ¨Crosswalk WebView Engine¨. This will ensure that the project works properly. As a downside, the final app will increase its size a lot. From 3 Mb to 24 in my experience.

You can try to disable it later if you want and see what happens. In addition, is also interesting as a low resource version of the app. The lack of Crosswalk plugging would enable compatibility with Android versions older than Android 4.

In my case disabling Crosswalk just result in an app that does not reproduce some audio files, so it is worth trying.

2.2.2 We go to Config –> Android app settings

We just fill the options and add the pictures (app icons etc). The only interesting thing is at the end: Screen Orientation. This functionality will allow us to display your game in landscape mode.

0_1460669761390_3 .jpg

0_1460669783417_4 .jpg

0_1460669799249_6 .jpg

2.3.2 We go to Config –> Android Keystore settings

To publish an app in google play market, we need to add a certificate. An alias and a password of your election. Try to don’t forget the password or in the future or you would be unable to update the app in the market.

3. Test and publish

Monaca allows testing our apps thanks to their Monaca debugger native app that you can find in the market stores. It works quite well so is good to use it.

0_1460669836142_7 .jpg

Finally, you can publish it: Build -> build for android. Then follow the steps depending on your needs and it´s done, a game ready to publish in google play.

This is the result: