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

Favourite 8 favourites
Tutorial written by victorjferOriginally published on 25th, June 2016 - 1 revision

A couple months ago I bought a contruct 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 painless way.

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 helps to adapt the game resolution in desktop browsers. However, that is not our our final platform.

Open your contruct 2, select export as ¨Html5 website¨ and 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.

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 advice you to use Chrome.

First we register in monaca.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.

2.2 Configure the project:

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

2.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.

2.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.

Open full size image

2.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.

3. 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 use 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 :)

Edit by justifun: fixed hyperlink

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

2
Nagval333 5,336 rep

From what you wrote monaca is a kind of INTEL XDK & cocoon.io compilation alternative?
Anyway In upper link you put monoca.io instead of monaca.io

Monday, June 27, 2016 at 4:50:03 PM
1
mihirolover 1,225 rep

Nice tutorial! Didn't know about this compiler. Is there also support for ads in monaca? Also, how is the performance of your game compared to Cocoon.IO or XDK Crosswalk build?

Tuesday, June 28, 2016 at 4:06:11 PM
-4
Kyatric 71.3k rep

You still need to own a valid Construct 2 license before publishing to Google play and in order to make any kind of commercial usage..

That point is missing from your tutorial/process and should be put in place as soon as possible.

@victorifer: Do you own a valid license ?

Sunday, July 03, 2016 at 3:34:21 AM
1
veeru5656 1,968 rep

Nice information. thanks

Friday, August 05, 2016 at 5:47:46 AM
1
iceangel 32.7k rep

Nice tutorial!

Thursday, October 06, 2016 at 3:25:55 PM
1
delgado 36.6k rep

About step 2.1
we create a project using the ¨minimum template¨ that monaca provides.
You mean what exacly ?
dl.dropboxusercontent.com/u/44710358/minimal.png
Ionic and Angular have 'minimal' templates too
thanks

Monday, October 10, 2016 at 12:15:05 PM
0
wcloud 242 rep

Perfect!!! Awsome!!!!
At Last I Found A Best Of All Build Android = Monaca

cocoonio = no sound black screen (I was delayed one week for fix it But i can't)
xdk = bug for old Version device android Not support full screen large volume file android XD (this too shall pass)

Monaca= Fixes! Fixes! Fixes! Fixes! Fixes!

oh thank bro for sharing....thank GOD!

Wednesday, October 19, 2016 at 9:41:45 PM
0
alextro 23.5k rep

Great alternative to compile apk.

Monday, November 28, 2016 at 12:54:24 AM
0
SatriaPerdana 329 rep

Please kindly make a video for it, or explain it more detail.
I'm very newbie here, I'm stuck at minimal template and don't know what is the exported files from html5 exported format (there's a lot of files like c2runtime, data, appmanifest etc. what exactly that I should upload there? or should I compress all that file to rar first?) that should be uploaded, please reply.
thx a lot

Saturday, January 14, 2017 at 7:07:40 AM
0
vuductrung 348 rep

[ SatriaPerdana ]
I made this video for you
youtube[dot]com/watch?v=DAjcU0LltH0
I think you should invite me to dinner haha!

Monday, January 16, 2017 at 3:26:02 PM
0
vuductrung 348 rep

i love you monaca

Monday, January 16, 2017 at 3:28:40 PM
0
alifalafiya 404 rep

Thank you for your tutorial.

Is it possible to integrate admob?

Sunday, May 07, 2017 at 9:07:40 AM
0
TwistedSaviour 202 rep

www.youtube.com/watch?v=Dt6aCPoaAyo

Video to the 'minimal template' option as the other vid mentioned doesn't seem to be up anymore.

Friday, December 01, 2017 at 7:00:22 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.