Exporting your game through Construct 2 and Intel XDK
As mentioned in the beginning of this article, you cannot test out ads by simply previewing from Construct 2.
You need to actually publish a game/application to the Google Play store.
In order to do that, we will export our game from Construct 2 and use Intel XDK to "convert" it into an apk file (executable for Android platform). Out of Construct 2 we are still getting HTML5 files.
Once passed and "Built" from XDK we get the APK file which is made for Android.
Do export your game from Construct 2 as "Cordova" in the mobile category.
Open up Intel XDK (after having installed it on your computer and registered an account if required) and you can create a new project for this one.
Using Intel XDK
Intel XDK is still a Work In Progress, and its interface is bound to change.
That's why if you refer to the tutorial "How to export to Android with Crosswalk" by Ashley, the screenshots are currently out of date. Nonetheless, the idea behind the tool is still the same.
At the time of writing this tutorial, the XDK version was 2548 (indicated in the top right of the XDK window)
The project's property is on the left.
An XDK project has a root folder where it starts from and where the files for the various builds have to be (under another folder).
In other words, let's consider you have a main folder "export" that contains a folder "0.0.0.1" which is the Cordova exported files out of Construct 2. And next time you modify anything to your C2 project, you modify the Version number in the project's properties and export the new version to a "0.0.0.2" folder contained by the main "export" folder. And so on for each new version.
Be sure to remember about the version number, it will be important for any update you want to make to your apk and published game later on.
Also, an advice for you is to export your C2 files in a different/separated folder than the folder that is going to be used for the XKD Project (following). Separating folders will prevent issues of overwriting an XML file used by the XDK project and that is modified on each C2 export.
Creating a new Intel XDK project
When making a new project the left column allows you to "Import your HTML5 Code Base".
Click that link and in the field on the right "Import from" browse to the main folder that contains your exports.
Click the "Continue" button.
It is asking you for a project name. This is mainly for organization purpose within XDK.
Now the "Project Importer Result" dialog is being displayed.
Be sure to set the source directory or leave it blank (the folder where you will have your Cordova exported files).
This can be set later on.
Be sure to also set the option "Use Cordova plugins" to "Yes".
Click the "Continue" button.
Now you are being asked if you want to take the tutorial tour. Your choice.
Navigation within the project files and properties is done through the top tabs.
You will mostly need to click on the "Projects" tab to the left (access to the project's properties) and the "Build" tab on the right (building the APK).
Setting the Intel XDK project's properties
Click "Projects".
The left columns display all your XDK projects and their properties.
Be sure to click the current project (if you only have one, it should be selected by default).
On the right in the main page you have the project's properties themselves.
Notice the "Source directory" field which you can modify whenever you are making a new build and target to the folder where you have exported your Cordova files.
(In our example, it should point to a folder "0.0.0.1" under our main folder where you have exported your game)
Underneath, since we have created a project asking to use Cordova plugins, you should have a table named "CORDOVA HYBRID MOBILE APP SETTINGS"
The icons on the right allow you to determine what platforms you are aiming for (Android, Android-Crosswalk, iOS, Windows 8)
Clicking the icons will disable the platforms for this project.
You can chose to let them highlighted or not. All it will change is that in the "Build settings" and "Launch Icon and Splash Screens" underneath, you will have less tabs.
If you want, simply let the "Android-Crosswalk" icon light up.
Click "Plugin Management".
This expands the section and gives you access to more informations.
For AdMob to work in your application, we will need to add a Cordova plugin before building that
Click the " Add Plugins to this Project".
A dialog named "Cordova Plugin Explorer" appears.
Select "Featured Plugins" and then "AdMob Ad Services (old)" (with older versions of XDK, otherwise select "AdMob Ad Services (CLI5)" or "CLI4" depending on the CrossWalk version you are looking to use. Basically stick to CLI5/the latest version available).
Click "Add Plugin"
This will add Sang Ki Kwon's (known on our website as cranberrygames) Cordova plugin to your XDK project and will make it so that the AdMob Construct 2 plugin will be able to display advertisement in your games once built.
A confirmation dialog appears, click the "OK" button to move on.
Notice the plugin depends on the "Google Play Services for Android" plugin (it has added it automatically to your project) and the plugin also adds a couple of Android Permissions to your game, permissions required to have the AdMob plugin displaying the ads.
Now scroll down in the properties of the project and click "Build Settings".
If you have let all the icons light up, be sure to select the "Android-Crosswalk" tab.
Settings can be different from a platform to another and each value are kept in memory for each platforms.
Modifying the settings of the "Android" platform won't affect the settings of the "Android-Crosswalk".
Several fields are there, expecting for you to fill them.
The "App ID" is about the same as the "ID" project property in Construct2.
It is generally under the format "com.mycompany.myapp" using only letters no capital letters.
It is likely a good idea to make it unique, using the "com.mycompany" as a nice prefix.
If you don't have a company, use your own name as identifier there, or at least the name you are expecting to use in the Google Play Store.
Once set, this shouldn't be modified.
"App Name" here is the name of your game as it will appear in the APK.
By default you see it is the same as your XDK project name, but you can modify it.
"App description" is a description of your game/application.
"Author" is your name (or company's) as it will appear in the store page.
"App version" should be similar to the "Version" project property in Construct 2.
If you scroll down, you can see a scrollbox "Fullscreen" that will determine if your application should be exported as Full screen or not.
The downlist "Orientation" will determine as well the orientation in which to display your application (Default, Landscape (wider then higher), Portrait (higher than wider)).
Finally a last property you should be very wary about is "App Version Code".
By default on a new project it is 1.
This property is an integer. You will have to modify it for EVERY new build you are willing to do.
Even while testing, even if using older/already used Cordova exported code.
This is critical, each time you are willing to make a new build, don't forget to add 1 to this value.
Finally in the next pan you have the "Launch Icons and Splash Screens".
Again, make sure to select the appropriate tab (Android is not Crosswalk-Android)
The launch icons are the icons displayed in the "desktop" of your OS, the icon for the application. By default/when left empty, the Cordova icon is the one used.
Splash Screens are image that will be displayed before the loading layout/loader style of your Construct 2 project.
If left empty, only a black screen will appear.
Setting the orientation option there will let you decide the orientation of the loader/splashscreen itself.
You will likely want your loader to be the same orientation as your game, but it is up to you.
You would need to add images for each Icon and Splash. Dimensions required are indicated in the preview images themselves.
Be sure to set the orientation before starting to load up your icons.
The images will have to be part of your "Source directory" folder. Don't hesitate to make a set of icons and splashes and copy them from your main folder into the folders where you have exported your Cordova code.
If you want to use the SplashScreens images, and have them displaying before the loader, you will need to add a plugin to your XDK project.
So be sure to go back to the "Plugin management" tab as explained earlier and add, out of the "Core Plugins" the "SplashScreen" plugin to your project.
Having this plugin will display the appropriate Splash Screen image you may have set.
Build your APK
Now your project is ready to being built.
Click the "Build" tab on top of the window.
According to the blue icons you have left light up, you can see in the top line "CORDOVA HYBRID MOBILE APP PLATFORMS" one or more "Build" buttons.
Be sure to click on the "Crosswalk for Android" one.
This will upload files directly to the build server.
If you are doing an update, you may be asked if you want to use existing files or upload new ones.
If you are making an update, you will want your newly cordova exported files to be used, so ask to use those files instead.
Once the file uploaded, a new page displays with a big "Build App Now" button.
Click that button and wait for the process to be complete.
You'll then get a result page, allowing you to download a zip file containing the ARM and X86 versions of the built APK.
Note: If ever anything goes wrong, XDK will provide you with a changelog page and messages about what might have gone wrong in the process.
Be sure to go back and make sure you have set all the project settings accordingly and that you have added the Cordova plugin to the XDK project.
In need, check Intel XDK documentation for further help. You can also attempt to contact Intel's support.
You can download a zip file containing both APK version clearly named.
You can also set an email address to send a link to that will allow to download the APKs. It can be a nice way to send an email to the address your Android device is set to and download/install the APK directly on your test device.