Post 5: Configuring Intel XDK and building your app files

In this post I’ll be talking about how to configure your games in Intel XDK and build the files you'll need to upload to Google Play and iTunes Connect. We’ll need the licenses we generated in Post 4 so make sure you read that before you start this tutorial. Lets start by configuring our game properly in Intel XDK.

Intel XDK

Configuring your game in Intel XDK was greatly simplified when Scirra released v.233 which allowed users to export their app using the new ‘Use new Intel XDK project format’ export option. All your plugins can now be added under ‘Plugin Management’ int the ‘Projects’ tab in Intel XDK (previous versions used to require adding or adjusting plugins manually via the intelxdk.config.additions.xml file).

Plugin Management

In later blog posts, I plan to describe how to add Facebook compatibility, self-maintained highscore tables and IAP. For some of these, you will need to add additional plugins via the but for now you can leave this section alone.

Build Settings

The first thing we need to do here is to turn off any platforms we don’t need. Personally I only publish to iOS and Android so I usually turn off the Windows 8 option.

Next we’ll go through the actual build settings. Lets start with Android. Most of the Android build settings are fairly intuitive but a few of them require some further explanation:

Optimize with Crosswalk: Leave this button ticked for optimal performance on Android.

App ID: This is the 'reverse domain name string' we created in Post 4. It should match the ‘ID‘ field in the ‘Project Properties’ tab in Construct 2.

App version: You will need to increment this by 1 every time you upload your app to Google play and/or iTunesConnect. Best practice guidelines for app versioning on Android can be found here.

Cordova CLI version: Leave this as 6.2.0 unless you know what you are doing.

Developer Certificate: Click the dropdown box, select 'Create new Develop Certificate' and fill in the form. The Android keystore is used every time you build your apps so make sure you remember your passphrase.

App version code: Similar to ‘App version’ except this is just a single number. Start at 1 and increment every time your upload a new version of your game to Google Play.

Minimum and Target Android Version: I usually leave as 16 and 23 respectively. You can change this if you want however some of the things I show you in my blog posts may not work for different versions of Android.

Install Location: Leave as ‘Auto’.

Signed: This should be ticked.

Crosswalk Runtime: Tick 'Embedded' and select '19'.

Add Permissions: Leave blank for now.

This is what the Android Build Settings for SSA looks like:

Alright lets move on to iOS.

Most of the settings for iOS are the exact same however there are a few that deserve a short explanation:

Developer Certificate: Select the same certificate you used for Android (the one we generated earlier in this post).

iOS Target Version: For some reason this defaults to '8' on my computer. It needs to be changed to 8.0 (feel free to experiment with lower iOS versions if you want although some features may not work perfectly if you do)

Provisioning Profile: Select 'production'

Production Provisioning File: Clicking this dropdown menu will create a folder named 'package-assets' in the root folder of your project (the folder you selected when you exported your game).

When you hit close Intel XDK will open a window prompting you to select a file in this folder. At the moment this folder will be empty. Hit 'Cancel' then navigate your way to this folder. Remember the Provisioning Profile file we created in the last post? You'll need to place a copy of this file into this folder:

Go back to Intel XDK and hit the Production Provisioning File button again. Select the provisioning profile file we just placed in your package-assets folder.

CF Bundle Version: Same as 'App version code' for Android. Start at 1 and increment by 1 every time you export your app.

Below is a screenshot of the iOS Build Settings for SSA:

 

Launch Icons and Splash Screens

Launch icons are what users see on the "desktop" of their mobile device. Splash screens are shown briefly after a user opens the app. These both make your app look a lot more professional. I recommend putting some time into making these look as good as possible.

 

Building your app

Move to the 'Build' tab in Intel XDK

This is where you will build the files that need to be uploaded to Google Play and iTunes Connect. This process is fairly easy and only has 2 steps. First you need to unlock both iOS and Android using the Developer Certificate you created earlier. Click the little red lock icon under iOS:

Here you've got 2 options: Unlock a single build or unlock builds for 48 hours. I always go with the 48 hour option. Enter the password you created earlier and hit 'Unlock'

You should see the red lock icon under iOS change to an unlocked icon. Repeat the same process for Android. Your Android developer certificate has an additional option which needs to be ticked which is 'Use this key password for the keystore password'

Now that both iOS and Android are unlocked you can select both platforms and hit 'Start Builds'

Perfect! The building process will take 2-10min depending on the size of your app so this is the perfect time to go make yourself a cup of tea.

**NOTE START**

As I was building this game, I got a build error! Luckily Intel XDK allows you to view the 'summary build log' and a detailed log which looked like this:

Turns out I had accidentally capitalized the 'ssa' in my App ID in Apple Dev. Lesson learned!

**NOTE END**

If you do everything correctly, you should see this screen:

Great Success! We'll find out what to do with these build files in the next tutorial.