Hi! I wrote this tutorial for anyone that wants to export their project for the Google Play Store, and include ads to generate revenue. In the past developers could have used Intel XDK, however new apps cannot be uploaded through that process anymore. This older tutorial is still helpful for AdMob, but I hope mine fills in the blank.
1. Install the Cocoon.io plugin
Close Construct 2 if you have it open. Download the plugin and install it in this path: CONSTRUCT_2_INSTALLATION_FOLDER\exporters\html5\plugins. Launch Construct 2 and add the object Cocoon InApps (the same way you add sprites or any other object). Next you will need to create an ad and get it's id. See the next step.
2. Set Up an AdMob account
Create an AdMob account here. Create a new Ad Unit for your game. To do this, see the picture below where the red arrow is and click the blue 'Add Ad Unit' button. Once that's done, click to copy the ca-app-pub-NUMBERS ad id.
Back in Construct 2, click the CocoonAds object and add the ad id as seen below:
3. Build your game with ads in mind
This part is pretty much self-explanatory, you need to build your game and during the development process plan out where you want to show ads. Here is how to set it up:
Call the ads if the Canvas Object exists:
Display the ads on a specific event, such as On Start of Layout:
4. Finish your game and Export
Once you've finished building your game, and included the AdMob ads, you should be ready to export. Click Export project -> Cordova -> Untick Minify Script -> Configure the settings depending on your game -> Export.
Open the folder that was created.
5. Config and C2Runtime
In the folder, open www and then open config.xml using a text editor (like Notepad++ or Sublime). On the second line, add android-versionCode="100000" (as seen below), and save, then close the config.xml:
Open c2runtime.js next. This time you will need to do a Ctrl+F search. All the c2runtime.js files will be unique to the game built, so just try to find and replace the following:
1. Ctrl+F search for this.isRetina and find this line: this.isRetina = ((!this.isDomFree || this.isEjecta || this.isCordova) && this.useHighDpi && !this.isAndroidStockBrowser);
2. Replace this line with: this.isRetina = ((!this.isDomFree || this.isEjecta || this.isCordova || this.isCocoonJs) && !this.isAndroidStockBrowser);
3. Take note that && this.useHighDpi was removed, leave it if you use DPI in the C2 project
4. Ctrl+F search for this.canvas.height = math and find: if (this.isEjecta)
5. Change that line to: if (this.isEjecta || this.isCocoonJs)
6. Save and close c2runtime.js.
Finally, zip up the entire exported folder (not as .rar but as .zip).
6. Cocoon.io Account and APKs
Create an account on Cocoon.io. Before you upload the zip, you will need to configure Ads and Settings:
Click on Services, and under Ads turn on AdMob:
Click on Settings, and select one of two choices, Webview+ or Canvas+. Take Webview+ if your game is a pixel-retro type game or has unique fonts, and take Canvas+ if your game is vector and you want everything to run fast. Underneath, set up everything from Bundle ID to Content URL:
Once you're happy, upload the zip. Click the Compile button (see picture below where the red arrow is). Wait a few minutes (depends on zip size, 100 MB is about 5 minutes):
After it has compiled, the Android image should stop blinking. Click on it to download the result.zip that contains the apk files. (The Android image is the one with the red circle around it).
Extract the 4 apks.
7. Sign and Align the APKs
Download the APK Signer tool from Shatter Box. Follow these very simple instructions on the site to sign and align your apks. Please note, you only need to sign and align the non-Debug apks that you find in the result.zip. Debug should only be used for testing.
8. Google Play Store
Buy a developer license for $25 (this is a one time purchase, you will be a developer forever).
Click the blue 'Create Application' button and follow the instructions provided. You need to upload an app icon and some screenshots. I won't go over how to set up your Google Play app because its self-explanatory and there are other tutorials covering that.
Upload the 2 signed and aligned apks (arm7 and x86) and wait a few hours! Congratulations, your app is now on the Google Play Store with AdMob ads!
9. Updating your existing app
If you found bugs or want to add new features, this is how you update.
1. After exporting, open config.xml and add this again, before version in the same line: android-versionCode="100100". Each update should increase the last 3 digits by 100 and so on, example 100100 could be version 1.0.1, 100200 could be 1.0.2...
2. Follow the exact same steps as in 5. Config and C2Runtime for the c2runtime.js (ctrl+F search and replace).
3. On Cocoon.io, before you upload the zip, increase the Version number under Settings -> Default (to 1.0.1 or whatever)
4. In the Google developer account, do this: Release management -> App releases -> MANAGE PRODUCTION -> Create Release
5. Do the sign and align and upload the new apks on Google Play Store. If you get an error that the apk version already exists, you need to check config.xml and make sure that Cocoon.io's version number has also increased. (Try again).