Tutorial: How to publish a Contruct 2 Html5 game into Android using Monaca

[victorjfer]

Contruct 2 is a great platform to create HTML5 games. However publishing the games can be hard and expensive for casual developers.

This tutorial will try to explain how to export and test the game in a more painless way.

A. First we need to get the html5 version of the game

Please be aware that we don’t want the version with frame around, so when you select export as ¨Html5 website¨ later do not do not select to add a frame to the game, or it will look awful in the phone.

If you bought a template like 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.

B. Upload and configure it:

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

B.1 Upload the project

To avoid problems I advice 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 need the file ¨config.xml¨ that the project provides.

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.

B.2 Configure the project:

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

B.2.1 We go to to Config --> Manage Cordova Plugins

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

You can try to disable it latter 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 is worth to try.

B.2.2 We go to 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.

B.3.2 We go to 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 do not forget the password or in the future or you would be unable to update the app in the market.

C. Test and publish

Monaca allows to to test 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 try it.

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:

https://play.google.com/store/apps/details?id=com.kate.find

[Fran Diox]

@victorjfer Great, thanks for sharing!

[Andi]

@victorjfer well done! :+1:

[victorjfer]

Glad you like. I´ll try to have it always updated on my blog.