1. Home
  2. CocoonIO
  3. Get Started
  4. CocoonIO – Complete Guide for Construct 2
  1. Home
  2. CocoonIO
  3. CocoonIO – Complete Guide for Construct 2

CocoonIO – Complete Guide for Construct 2

What's CocoonIO?


CocoonIO is the latest service from ludei to compile your HTML5 games to Android or iOS. Up to now Ludei offers the best performance with their unique Canvas+ engine. With CocoonIO it’s now even possible to add addtional Cordova & Phonegap plugins to your project. If you want to learn more about ludei’s CocoonIO then check out following links.

  CocoonIO or    Ludei's Blog

You can add and maintain 2 projects with the free plan (file size is limited to 50 mb). If you want more, you can check out their upgrade plans over here.


Cocoon Documentation

I also provide some content & tutorials for the new Cocoon Helpdesk. You can find it here.

  Cocoon - Documentation

If you miss something here or in the offical doc files, let me know!

What are the benefits from this new technology?

To sum it up, these are the most important benefits from Ludei’s CocoonIO Service.

  • Awesome performance on mobile devices
  • Expandable with Cordova & PhoneGap plugins
  • Small file size
  • Sign and align tool included

In the following guide I will explain how to compile an app with CocoonIO from scratch. I’m using Construct 2 to build my HTML5 Games. But you can do this with any HTML5 Framework.

Install the Plugins

With CocoonIO a new or better more new plugins for Construct were released by Ludei. If you build your games with CocoonIO it’s recommended to remove the old ‘CocoonJS’ plugin from your project and to replace the events and actions with the one provided by the new plugin.

Download new Plugins

This download link has always the latest files and directly downloads the zip file!

Download the zip file by clicking on the ‘Download ZIP‘ button at the right sidebar.

If the download was successfully unzip the package. The plugins are located in the ‘…/src/’ folder. The content should be…

  • ads (cocoon-ads)
  • cocoon canvas+ (cocoon_canvasplus)
  • inapps (cocoon-inapps)
  • share (cocoon-share)
  • social (cocoon-fb, cocoon-gpg, cocoon-gc)

Important! Do not copy the parent folders like “ads”, but instead enter the folder and copy the “cocoon-ads” folder!



Close Construct 2 for the following steps.

In each of this folder there is another folder. Enter each folder and copy this folder to ‘…/Construct2/exporters/html5/plugins/…’

Then open Construct 2 and check if all plugins are available now.


Please note...

Note, if you add any CocoonPlugin, expected the CocoonCanvasPlus Plugin, you also must install the corresponding plugin later in the Cocoon.io – Plugins section, too! Otherwise you’ll get a Black Screen Error.

Build your Game

About the video...

This is a simple video made by me, but sadly without tone. I hope it helps you to understand the basics. For a more detailed guide, please use the one below. Thank you!

Construct 2

Basically you don’t need to make adjustments to your project if you already use cordova plugins (for example from cranberrygame). You can directly export it the way it is.


If you want to compile to canvas+ (what I recommend) you must replace all ‘Browser’ functions like ‘Close Browser’ with the events and actions provided by the new Atomic Plugin ‘CocoonCanvasplus’. Also if you are still using the old ‘CocoonJS’ plugin, replace it with the new Atomic Plugins for Construct 2. You find an installation guide here.

Open your project in Construct 2 and choose ‘Cordova‘ as exporter.


Uncheck ‘Minify Script’.



Uncheck the “Minify script” tick! This may cause blackscreens in your game.

You can leave the default settings. Just confirm and export it.


Then open the the export folder and open delete following files

  • config.xml
  • intelxdk.config.additions.xml (if exisits)

The ‘intelxdk.config.additions.xml’ file only will be added if you use some sepcific plugins, like the ‘Browser’ object or the ‘Cordova Dialog’ plugin.


Eventually zip all remaining files. This zip file is for uploading in the next step.

Create a Project


Login in and create a new project by uploading the zip file from the previous step. Just Drag’n’Drop the ZIP file in the area ‘Drop ZIP or Upload’.




Your project will then be created. After that, open the project and visit the ‘Settings’ tab and enter your details.


Don’t forget to save the settings by clicking the small icon in the right bottom corner.


Visit the Plugins tab in order to install all needed plugins.

For all cranberrygame plugins, add the “Git Repo URL” at the “Custom” section.


Install here ALL cordova / cocoon plugins which you are using in your Construct 2 project. Otherwise the game starts with a black screen!

Keys and Certificates

CocoonIO allows you to upload signing keys to directly sign and align your game. Depending on tthe platform you will need diffrent key formats.

First go to to your CocoonIO Profile and select “Signing Keys” or click on the link below.

  Key Management

Android - KeyStore

If you are not familiar what a keystore file is, please visit this tutorial and create a new keystore file.

  Create a KeyStore file

Then select Android and click on ‘Add Android Key‘.


Now enter all your information needed.


  • Title: Can by any title you wish (just to identify the key in the selection)
  • Alias: The alias used for the key creation
  • Certificate password (Alias password): The used password
  • KeyStore password: The used password
  • KeyStore: Your generated keystore file

iOS - Provisioning Profile & p12

Firstly you need to create your certificates in your Apple Developer Account.

  Apple Developer - Certificates

You’ll need a certificate for Production and for Development.


Just click on the corresponding tab (Development or Production) and follow the steps to create a certificate for it.

It’s not necessary to add an iOS key to your CocoonIO Account. If you do not select any key, you’ll get a xcode archive file. Open this with XCode and you can export your Game for production / development as well. But if you do add a a key, you will directly get an .ipa file.

Provisioning Profile

In order to get your Provisioning Profile open XCode on your Mac Computer and select Preferences.


Then select your Developer Account and click on View Details.


Then perform a right-mouse click on your certificate and click on Show in Finder.


Hint: Rename it for better identification.

p12 Certificate

Open the Keychain Access application (in the Applications/Utilities folder) and select your certificate.


If the shown entries are missing, download your certificates from your Apple Developer Account first and then perform a double click on the corresponding certificate. This will add it to the Keychain Access App.

Perform a right mouse click on the corresponding certificate and choose “Export”.


Give it a proper name, so it can be identified later.


Then add a password. This password is the password you have to add later on CocoonIO!


Always use a Distribution Provisioning Profile and a Production Signing Certificate.

  • Title: Can by anything
  • Password: The password for the p12 certificate (the one you have chosen for the export)
  • Provisioning profile: AppStore / AdHoc
  • Certificate (p12) file: your p12 Certificate (Production)

Now add all your details and click Add.

Compile your Game


Available WebView Engines

  Canvas+ (recommended)   WebView+   WebView

I recommend Canvas+ due it’s awesome performance and small file size. But in the end, it’s up to you what to choose. You can change this at the ‘Settings’ tab.

Select a keystore or certificate file

Select your key from the list below. If you have not added a key yet, go to the chapter “Keys & Certficates” above.


After that, go back up and click on the small ‘Compile‘ button and your game will be compiled.


When it's done

You will be notifed via mail when the game is ready.

You will find also the download link to your files in this mail. Download, unzip and test your app. When you are satisfied, upload it directly to the store.

Need help?

Please visit this topic at the cocoonio forum.

  Aks for help!


The Cocoon Construct 2 plugins (Ads, Canvas+, Facebook, and so on) doesn’t work in your browser preview. Therefor you need to export your game with Cordova, zip those files and run the zipped game files in your Developer App. The developer app represents exactly your game. It has the same Bundle ID and Version code. Otherwise you could not test services like InApp Purchases or the Google Play Game service by Google.

With Android

The Developer App for Android

You can create a developer app for each project at cocoon.io.

Note: Like mentioned above, the Developer App has the same properties as the live apk file later, so it will overwrite your existing installation (if you have an older version of your game installed).


Click on ‘Compile Developer App’. This may take awhile. Once the app is ready you can download it here.


You also get notifed via mail. Then you can download the Developer App directly to your phone and install it (the most devices are working with the ARM version).

With iOS

The Developer App for iOS

If you want to test your game on iOS you can download the official iOS Developer App from Ludei. You can download it below.

Cocoon Developer App
Cocoon Developer App
Developer: Ludei
Price: Free

Generate your own Developer App

You also can create your own developer app. It works like on Android.


Click on ‘Compile Developer App’. This may take awhile. Once the app is ready you can download it here.


How to debug your Game in Construct 2


Before you are doing following steps make sure that you have installed the Developer App on your device.

Open your project you want to debug with Construct 2 and export it to Cordova. Open the folder where you exported the files.

  • Delete: intelxdk.config.additions.xml
  • Delete: config.xml

The plugin information are already included in the Developer App, so you don’t need those two files above.

It’s very important to test your game in the Developer App first, so you don’t have to compile a new apk file for each little changes. Also if you stuck and you cannot locate the issue, will the Developer App help you to find and fix the issue. For this you can use the “Browser” object provided by Scirra in Construct 2. This plugin has the action “Log”, so you can log events in the console while running the game in your Developer App.


If you now run this game in your Developer App, you can see the events in the console log.


Zip the files

If you have performed all steps above you can zip the content and upload it to your test device (where the developer app is installed).



Alternatively you also can upload the zip file to a web server or your dropbox account and load it via an URL. If you use the iOS Developer App, it’s much easier to run it from an URL.


Then choose the engine you want to use. I personally recommend Canvas+ due it’s awesome performance.



In the upper left corner you can check the current performance (FPS, frames per second).

Now you’re able to debug your app without compiling it. This makes the whole process much easier than compiling each changes.

cio_developer_app_debug_console cio_developer_app_debug_actions

The Developer App comes along with a debug console. There you can see the log (Warnings & Errors).

Fetch game files via an URL

Here you find some information how to run your game via an URL.

Via Dropbox

  • 1) Upload your zipped game files to your dropbox account (if you don’t have one, click the button below)

  Create a new DropBox Account

  • 2) Release your file and copy the link


  • 3) Adjust the URL by replacing the ?dl=0 to ?dl=1

Maybe you have to copy the URL in a text editor first.

  • 4) Create a QR-Code (optional, but recommended)

Copy your link and create a QR Code from it.

  Generate a QR-Code

  • 5) Scan the QR-Code in your Developer App or add the URL manually


  • 6) Run the file


Icon & Splashscreen

Add an own Splash Screen

If you want to add your own Icon or Splashscreen then

  1. Click on your project -> Settings
  2. Choose the Icon tab and upload your icon (1024 x 1024 px)
  3. Choose the Splash tab and upload your splash screen (2048 x 2048 px, png)*

*) Your custom splashscreen will appear after the cocoon default splash screen.

Platform specific hints


Nothing special here, sorry 😛
For iOS the icon has to be a square! The icon will be cropped automatically, so there is no need to use any templates to get Rounded Corner icons. Actually your Binary gets rejected if you upload an icon with rounded corners.


Remove Splash Screen

You can remove the Ludei “CocoonIO” splash screen for a fee. This must be purchased for each project (bundle ID) individually. Just visit the “Slpash” tab of your project.


Then click on “Remove Splash”



If you remove the Splash Screen it’s recommended to add an own Splash. Otherwise you get a gap of black screen on each start. It’s better to show a splash screen while the game is loading in the background. Set the time to 3-5 seconds.

Avoid Black Screens

Some uses have expired some black screen gaps of 2-6 seconds shown after the “Cocoon” splash screen was shown. To avoid or minimize the gap time, you can add a custom loader layout in your C2 Project. For this apply following settings to your project.

First layout: Loader (this Layout must be created first)
Loader layout: Yes
Loader style: Progress bar & logo

You can make a custom loader bar or just show your splash on that layout. That’s completely up to you.

Then switch to the event sheet of the Loader Layout and add following line.


On loader complete > Go to "MainGame"

You find a complete guide over here.

  Custom Loader Layouts


Don't forget...

Add the ‘CocoonAds’ plugin to your project (you must have installed the AtomicPlugins by ludei).

Ad ID’s

First of all we need to add our ad ID’s (AdMob).

  AdMob (Go to your Account)

When you are logged in into your account select the app from which you want to use the ID’s.


Copy both ID’s and insert it to the CocoonAds Plugin in your C2 project.


Install the Plugin in the cloud compiler

Don't forget...

If you use the CocoonAds Plugin in your Construct 2 game, please make sure that you also install the corresponding plugin in the Cloud Compiler under Cocoon.io – Your Project – Plugins! It’s called “Native AdMob for Android” or Native AdMob for iOS”.


Don't forget...

Add the ‘Cocoon GooglePlaysGames’ plugin to your project (you must have installed the AtomicPlugins by ludei).

In order to use the Google Play Games Function in your game you must have uploaded an apk file to the Play Store (beta phase).

Upload your Game

First visit your Google Play Developer Console. If you don’t have an account yet, create one.

  Google Play Developer Console

The fee for a new account is 25$. This is a one-time payment. After that, there are no recurring payments to made like on the ITunes Store.

Build your Game

In order to upload an apk file to the store you must compile it first.

  How to build with CocoonIO

Create a new App

If you already have created an app at your Google Play Dev. Console you can skip this step.


Click on ‘All Apps‘ and then on ‘+ Add new App‘ (in German: + Neue App hinzufügen).


Enter the title of your game and click on ‘Upload APK‘ (in German: APK hochladen).


Now switch to the ‘BETATEST’ tab and choose ‘Upload first APK-File in Betaphase‘ (in German: Erste APK-Datei in Betaphase hochladen).


If the upload was successfully it will take awhile till your app is reachable via the test link.

Create a Game Service

Go to the tab ‘Game Services‘ (in German: Spieldienste) and click on ‘+ Add new Game‘ (in German: + Neues Spiel hinzufügen)


Then enter the details of your game. It’s recommended to use the same name that you used on your game.


Click on ‘Next‘ (in German: Weiter) and go to the tab ‘Associated Apps‘ (in German: Verknüpfte Apps) and select the platform you want to associate with the current game service.


I want to add an Android game, so I choose Android as platform.





  • You find your ID in the header below the name of your game (marked in the blue rectangle). This is your Google Play Game ID. If we use later this term then we refer to this ID.
  • In order to select your recently added game you must have uploaded an apk file before (note that it may take awhile till your game is shown here).

Copy your Google Play Game ID and change to your CocoonIO Account.

  CocoonIO Compiler

Then select your Project (if you have none, create one) and click on the tab ‘Plugins‘ and select ‘Cocoon‘, search for the Plugin ‘Google Play Games Social API‘ and click ‘Install‘.


The installer will create automatically a parameter called APP_ID. Insert here as value your Google Play Game ID.


Then save your settings.

Don't do that...

Do not use the CocoonGooglePlayGames & Cranberrygame’s CordovaGame plugin at the same time in one project. This will cause build errors.

Compile your game

Eventually you can compile your game.

  How to compile with CocoonIO


Add a Leaderboard

Add a new leaderboard

In order to do so, select the “Leaderboard” tab and then click on “Add new Leaderboard”.


Then give your leaderboard a name (can be anything) and choose the format for the score.



Watch out!

If you select a decimals create then 0, you must beware of how you have to submit the score then. You need to submit scores as integers, which are then being transformed according to the decimal places you’ve set up in the Google Play Developer Console. Thanks to JG_Development to let us know about this.

Then deactivate the tamper protection. Otherwise only your own score will be shown in the leaderboard.


When you feel ready, save it and copy the ID. This is the ID you need to use in your Construct 2 project for “Open Leaderboard“.


If you call “Open Leaderboard” and do not submit a ID, it will show all available leaderboards for your game. So if you use more than one, you can call this action blank and let the use choose which leaderboard he / she wants to see.

Add an Achievement

Add an Achievement

In order to add a new achievement, select the “Achievement” tab and click on “Add new achievement”. You have to add at least 5 achievements before you can publish your Play Service.


Enter all needed information and an icon (512 x 512 px, png) and click on save.


Then copy the ID and use it to “Submit an Achievement” in your Construct 2 project.


Don't forget...

Add the ‘Cocoon InApps’ plugin to your project (you must have installed the AtomicPlugins by ludei).

Create Products

Please login to your Google Play Dev. Console and select your game.

  Google Play Developer Console

Then select “InApp Products”. If this is your first visit of this tap you may need to connect your Merchant Account with your Developer Console. If you don’t know how to connect your merchant account with your developer console, please visit this link.

  Connect Merchant Account

If your account is connected, then click on ‘+ Add new Product’.


Managed Product

If an item is set as managed it only can be purchased once from the player. This is recommended for perks like “Remove Ads” or something like that. All managed products can be restored by using the “Restore” action from the CocoonInApp plugin.

If you want to allow multiple purchase of a managed product, you have to consume it after the purchase. This is needed if you want to offer in-game currencies like coins, gems or something like that.

Cocoon - Game Store Template (Construct 2)


An subscription isntead is a recurring purchase depending on the set time interval. You can use this kind of item for a “Premium” perk. Aslong the player pays the recurring fees he is a premium user, once he stops, he will loose the state of being premium (and all benefits of being a permium user).

Please note, up to now Subscriptions aren’t supported by the Google Play InApp plugin!

Confirm the dialog and enter all needed information about the perk, like prices and the description. Once you are done click on Save & Activate.

Insert the ID’s

In order to allow the purchase of the item you need to add its ID to your Construct 2 project. The best way to do this is to use global variables (or local). If you using our Cocoon Developer Template you will find 3 variables called:

  • Product1
  • Product2
  • Product3

Just add your ID there (Product 1 = removeads for instance).

You can download our free capx examples here.

  Cocoon Developer Template

There you will find a complete code example for the InApp Purchase Function.

Construct 2 Example Project

If you don’t know how to get started, feel free to download our free code example.

coming soon…

CocoonInApps – Plugin References


The triggers are self-explaining.


Here you find all needed information for the actions.

Fetch Products from Store (product_ID1, ... , product_IDx)

On the start of the Layout check if “Is Canvas+” && “Is store avaiable” are true, before you call “Fetch Products from Store”.



It’s not needed to fetch the products on each reload of the layout. To avoid this, I added a “isFirstStart” variable. This variable will be set to 0 (false) if “On fetch products completed” was triggered. So the products get fetched only on each “first” start of the game.

You must pass a comma separated list of your product_ID’s.


I’m using variables to store my ID’s. If you do not use variables (what’s not recommended) you can add it also like this.


This action will either trigger “On Products fetch completed” or “On Products fetch failed“.

Update Products List

This action will return the cached Products and will create the “product_list” which is needed to access the product description, title, price and so on. So call this action whenever you have successfully fetched your items from the store. An example is shown below.



It’s no matter in which order you fetch the products. The list always will be sorted ascending from a to z based on your product ID (not the name). So an example.

  • product_id1 = shatter_remove_ads
  • product_id2 = shatter_donate
  • product_id3 = shatter_coins_1000

So the list will be setup as shown below

  • Index-0: product_id3 (shatter_coins_1000)
  • Index-1: product_id2 (shatter_donate)
  • Index-2: product_id3 (shatter_remove_ads)

Then use the index (0, 1, …. x) in order to access the product details.

Check products list

If you want to be sure, you can log the list like this:


"Index " & loopindex & ": ID='" & CocoonInApps.ProductId(loopindex) & "' [with the title '" &CocoonInApps.ProductTitle(loopindex) & "' costs '" & CocoonInApps.ProductLocalizedPrice(loopindex) & "' and with the description '" & CocoonInApps.ProductDescription(loopindex) & "']"

The log will look like this then.



If you want to access the CocoonInApp expressions you have to call the “Update Products List” first! You find an overview off all plugin expressions below.

Purchase Product (Product ID(string))

Opens the purchase dialog for the passed product ID (string).

You either can do this by passing the ID directly (as variable or as “productid”).


or with the index of the product.


This depends on your function.

This action will either trigger “On purchase product completed” or “On purchase product failed”.

Consume Product (Product ID(string))

If you consume a purchased product, then it can be purchased again. This is relevant if you want to offer perks which can be purchased more than once (in game coins, power ups and so on). So whenever a purchase of such an item has completed, consume it.


Restore Purchases

This action will restore all purchases from the store and then call “On purchase complete” for the relevant products. In my eyes this is currently a bug. It actually should only call “On Restore purchases completed / failed“. And set the “Is product_id purchased” to true or false.

I notifed ludei about that. If there are any news, you will see it here.


Here you find all needed informations for the CocoonInApp Expressions.


This expression returns the currently cached products (the length of the products_list object) as integer.

 // products information
Exps.prototype.NumberOfProducts = function(ret)
{ ret.set_int(products_list.length); };

In order to access this value, call “Update Products List” first.


This expression returns the description as string of the product at the passed index (0-based integer) from the product_list.

Exps.prototype.ProductDescription = function(ret, index) {
index = Math.floor(index);
if (index < 0 || index >= products_list.length) {

In order to access this value, call “Update Products List” first.


This expression returns the product id as string of the product at the passed index (0-based integer) from the product_list.

Exps.prototype.ProductId = function(ret, index) {
index = Math.floor(index);
if (index < 0 || index >= products_list.length) {

In order to access this value, call “Update Products List” first.


This expression returns the local price & currency as string of the product at the passed index (0-based integer) from the product_list.

Exps.prototype.ProductLocalizedPrice = function(ret, index) {
index = Math.floor(index);
if (index < 0 || index >= products_list.length) {

In order to access this value, call “Update Products List” first.


This expression returns the default price & currency as string of the product at the passed index (0-based integer) from the product_list.

Exps.prototype.ProductPrice = function(ret, index) {
index = Math.floor(index);
if (index < 0 || index >= products_list.length) {

In order to access this value, call “Update Products List” first.


This expression returns the stock as integer of the product at the passed index (0-based integer) from the product_list.

Exps.prototype.ProductStock = function(ret, productId) {

In order to access this value, call “Update Products List” first.


This expression returns the title as string of the product at the passed index (0-based integer) from the product_list.

Exps.prototype.ProductTitle = function(ret, index) {
index = Math.floor(index);
if (index < 0 || index >= products_list.length) {

In order to access this value, call “Update Products List” first.


This expression returns the ID of the purchased product. But note, you only have access to this expression if it’s used with the triggere “On purchase … completed“.


Used code to access the expressions:

"Cocoon-InApp: Product(" & txtPurchaseProduct.ProductNumber & ") was successfully purchased! " & newline & "Details: ID="& CocoonInApps.PurchaseProductId & "[" & CocoonInApps.PurchaseDate &"] [" & CocoonInApps.PurchaseProductId & "] [" & CocoonInApps.PurchaseTransactionId & "]"

JavaScript Reference in the CocoonInApp plugin

Exps.prototype.PurchaseProductId = function(ret) {


This expression returns the TransactionID of the purchased product. But note, you only have access to this expression if it’s used with the triggere “On purchase … completed“.

JavaScript Reference in the CocoonInApp plugin

Exps.prototype.PurchaseTransactionId = function(ret) {


This expression returns the date when the product was purchased as string. But note, you only have access to this expression if it’s used with the triggere “On purchase … completed“.

JavaScript Reference in the CocoonInApp plugin

Exps.prototype.PurchaseDate = function(ret) {


This expression returns the quantity of  the purchased product as integer. But note, you only have access to this expression if it’s used with the triggere “On purchase … completed“.

JavaScript Reference in the CocoonInApp plugin

Exps.prototype.PurchaseQuantity = function(ret) {

Install the Plugin in the cloud compiler

If you use the CocoonInApp Plugin in your Construct 2 game, please make sure that you also install the corresponding plugin in the Cloud Compiler under Cocoon.io – Your Project – Plugins! It’s called “In-App Purchases for Google Play”, “In-App Purchases for Amazon” or “In-App Purchases for iOS App Store” depending on the used store later.


Don't forget...

Add the ‘Cocoon Facebook’ plugin to your project (you must have installed the AtomicPlugins by ludei).

In this part I’ll show you how to add and configure the CocoonFacebook plugin for construct 2. Firstly make sure that you have the latest plugin version installed. There was an update on the 15. January 2016. With this update the “Is user logged in” condition has been added by ludei.

Facebook Developer

In order to get your FACEBOOK_APP_ID and your FACEBOOK_CHANNEL you need to have a facebook developer account. Just visit the link below and sign in with your existing facebook account or greate a new one.


  Facebook Developers

Once you’re logged in to your developer account, click on the My Apps button in the header menu and select Add a new App.


Then you’ll get ask on which platform your app depends. Choose Android for an android game and iOS for an iOS game.


You can skip the Quick Start by clicking “Skip and create APP ID” in the upper right corner.


You can choose any name for your new app. The same applies to the namespace. Click on Create App-ID. Then you’ll redirected to your app propierties. Here you’ll find your APP_ID.

Copy this ID and insert it at your CocoonFacebook plugin field “Facebook APP ID“.


To proceed click on the Choose a Platform button, then select once again your platform. For this guide I select Android. Scroll then down till “Tell us about your Android project” and insert your bundle ID of your app and the bundle ID + MainActivity


Just to be sure...

The bundle ID is the the unique ID of your uploaded APK file where you have integrated the Facebook SDK. You can get your ID here.


Note! You must use exactly the same Bundle ID as the one you’ve set for your app!

Generate Hash Keys

Now we need to generate a debug or a release hash key. In order to do this, make sure that you have installed JAVA JDK (If not, download it by clicking the button below).

  Download Java JDK 8 (0.0 B)
11763 Downloads so far

Firstly you need to download the latest version of OpenSSL by clicking the download button below.

Then unzip it. We will need the path later. Mine is:


Open your CMD console and go to your Bin folder of your Java JDK installation. Mine is located at following path:

C:\Program Files\Java\jdk1.8.0_65\bin

Now run following code (make sure that you replace the placeholders)

Note, you need to choose your keystore file which you have used for cocoon.io. If you don’t have a keystore file, you’ll find a tutorial showing you how to create one here:

How to create a Keystore file for Android

That’s the key you have to unter (replace the placeholders with your details).

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | YOUR_OPENSSL_PATH\openssl sha1 -binary | YOUR_OPENSSL_PATH\openssl base64

On my end it looked like that:


Click enter if you are ready. If the process was successfully, you’ll get your Hash Key over here.


Copy this hash key into the field at the facebook developer page and then klick Next.


Note, at the moment your App is in testing mode, so it’s not live to all users, but for you it is. You can check this at the “Status & Review” tab.


Here you are also able to set your app live when you feel ready to release it.

In order to set your app public add some Icons and Banner images at the “App Details” tab and then go to the Status & Review tab and click on the toggle button (see image below, in the blue rectangle).


Confirm it and your app will be live.

CocoonIO – Install the Facebook Plugin

Go to your project and select “Plugins”. Then select the “Cocoon” tab and “Social” in the dropdown menu.


Then copy the APP_ID from the developer.facebook.com page and insert it here. Do the same with the APP_NAME. Please make sure that you insert following code snippet to your config.xml file when you are using the Facebook Plugin!

<preference name="android-minSdkVersion" value="15" />

You can learn more here.

  Docs - Facebook Plugin

At the end your config.xml file should look like this.


Build your C2 Project

Once you’ve completed all steps above go to your C2 project and import the “CocoonFacebook” plugin to it. Then select the plugin in the project bar and enter your APP_ID and your CHANNEL LINK.


Then code your function. You can download our free CocoonIO Developer Template to see how it works. When you feel ready export your game via Cordova and delete the config.xml file and the “…additional.xml” file (if existing). Don’t forget that! Otherwise you’ll overwrite the config.xml file from the cocoonio compiler!

Build your app, download and install it.


Invalid key hash

If you get an error with your key hash, just add the key from the error message to your app at developer.facebook.com.


Like shown here.



Free for further troubleshootings.


Don't forget...

Add the ‘Cocoon CanvasPlus’ plugin to your project (you must have installed the AtomicPlugins by ludei).

In order to use the actoins and events of the Canvas+ you must install and import the CocoonCanvasPlus Plugin for C2 by ludei first.

Exit App

The CanvasPlus plugin offers a way to close the app (but without a dialog. You can create an exit function like this.

The Browser Plugin

Please import the offical browser plugin from Construct 2 into your Project. Then create following code.


We also used an additional exit button for this example. So you can either call the exit by the “On Browser Back Button” or on the sprite “btnExit”.

You also find that code in our Cocoon Developer Template, which is available for free over here.

CocoonIO Developer Template

is Canvas+

This condition is true when the game runs on a cocoonio-built Android or iOS App. Add this condition whenever you are use actions and conditions provided by the Cocoon plugins. Otherwise you’ll get a JavaScript Error in the browser preview.

Dialogs and Inputs

The CanvasPlus plugin also offers a way to interact with the player by opening an inputfield or a dialog window. You can use the dialog window for an exit message for instance (see first tab).


If you feel ready to publish your game, just follow the steps below. We guide you through the complete process.


In order to hold it organized, I decided to make an extra page for this guide, so please find it here:

  How to publish your Android game to Google Play


In order to hold it organized, I decided to make an extra page for this guide, so please find it here:

  How to publish your iOS game to iTunes

Privacy Policy

Also apps do need a Privacy Policy, and it’s not enough to link the one used for your website. I’m using Iubenda in order to create my policies.

  Generate your Privacy Policy


  • Optimized for games and apps
  • Available in nearly all languages
  • Easy to use

You can find an example here.

Updated on June 14, 2017

Was this article helpful?

Related Articles


  1. hi nice tutorial here,
    i just want to know the possibilites of construct 2
    is it capable to use analytics plugin ?
    i nee to use facebook event api, and google analytics for measure install location

    Thank You

    1. Hi,

      You can add every feature to construct as Plugin / Behavior.
      I know that there is already a plugin for Google Analytics, but not for the Facebook Event API.
      If you know JavaScript, you can code a plugin on your own. If not, you can request it in the
      Scirra forum.
      But basically it’s possible with c2.

  2. The leaderboard doesn’t work. It tries to login but nothing happens. I tried everything. Can you please help?
    1. Have you setup your play service completely? You musst assign an apk file to your play service. Then ensure that your test apk has the same bundle ID then the associated one.

      If you need further help, please visit our forum here.

      1. Yes, I did! And it even starts to login but then it closes the login screen and nothing happens. I tried to export as Webview+, as Canvas+….everything. I am using CocoonGooglePlayGames plugin in C2.
  3. Does Coccon.io in app purchases also work for iOS as well as Google Play?
  4. Hi
    Facebook Plugin. What is that CHANNEL LINK. in cocoonPlugin in C2. Is that created application pages to facebook or what?
  5. Why those plugin installed in cocoon are so huge. They are bigger than my app. Its 100 mb, is it ok with that?
    1. Hi Martin,

      That‘s not normal. I did install all plugins by cocoon and my app has a download size of about 15 MB. Can you check it again?


      1. Thanks it’s true 😉
        Stil I have problem with this button share. Nothing happend when I click it ;-(
        Now i See info here “Add the ‘Cocoon CanvasPlus’ plugin to your project (you must have installed the AtomicPlugins by ludei).”
        Ok I have Cocoon CanvasPlus but I can’t find newest AtomicPlugins by ludei. Maybe this is cousing button problem. I can’t click it.

Add A Comment