How to export and build your games with Intel XDK Crosswalk/Phonegap!

1

Stats

8,833 visits, 12,534 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 23 Jan, 2015. Last updated 19 Feb, 2019

Hi everyone! I thought this tutorial could be useful for everyone since I realised most people are having difficulties especially with "IOS" section which was same for me for a couple of months. You can find the PDF tutorial in the link below.

dropbox.com/s/i83f0yketwh4vic/Jumpy%20Shark%20Help%20File_EXPORT.pdf

All the phonegap plugins of @Cranberrygame are working with this method. So like Chartboost, Revmob, Vungle you name it, they all work. I don't show how to implement the plugins but once you export your game all the plugins are installed automatically once your import them inside Intel XDK.

This tutorial was written for the older version of Construct 2 so with the new version you will only select "Cordova" for both IOS and Android export.

The text part of the tutorial is as follows without the images. The first part is for Andoid and the Second part is for IOS so don't confuse.

Good Luck.

>>>>>>>>>IMPORTANT!!! Now before exporting for IOS inside XDK make sure you select 5.1.1 for Minimum IOS Targeting inside IOS build settings otherwise apple will reject the game during the upload process.<<<<<<<<<<<

-------------------------------------------------------------------------------------------------------------------

HOW TO EXPORT

After you have done all the necessary work Now we need to export our project.

First Create a Folder Inside your computer I usually Create My Game Projects In a Directory called

Crosswalk

e.g. E:/CROSSWALK/MYNEWGAME

Go To Construct 2

Go to File Export Project.

You will see A Window will open with different chocies. Here Select the Cordova under Mobile Section.

Click Next (make sure Android selected) and show the path of your new folder you just created:

E:/CROSSWALK/MYNEWGAME

Now the game is exported Inside the Folder.

Ok when you export the game it says open destination. This is where your game is exported with HTML files and your own SpriteSheets.

You can close this window.

Ok now Open Intel XDK (by now you should have created a username and password) you must be logged in to build the game.

Click The Project Text At The Far Top Left.

At The Bottom Select CreateNewProject And After That Click Import And Existing HTML5 Project.

Select the Folder You just Created and Give A Name for your project. You can simple give the samename as your folder like MYNEWGAME

After You Say Create You will See a Popup Window like the one at the bottom. Just Ignore It and Click Continue.

Now your project is created.

Here at The Top you will see different Menus.

From The Emulate You can test the game inside the Intel XDK in different Brand Mobile Phones And Tablets. E.g. Samsung, iPhones, iPads etc.

Ok back to where we were.

Click The Project Tab at the top and click Build Settings.

Inside Build Settings Click Android CrossWalk.

The most important thing you will need to consider is your APP ID here you will enter you APP ID and which will be the same APP ID at GooglePlay As well so give it a meaningful app id.

Like "com.superplatformer. yourname"

The App Name is Also Important this appear under the icon inside the mobilephone’s mainscreens’ when people downloads your apk and installs in their phones.

Also App Version is Important. If you would like to create a new build later on like an upgrade of your game you need to change the App Version Code to something like 0.0.2 and Also remember to change the App Version Code to something else.

Otherwise Googleplay won’t accept the uploaded file and it will give error.

Also depending on your game Adjsut The Orientation to Portrait or Landscape.

SPLASHSCREENS

Ok here comes the Slashscreens.

Go Down and Click the Plus button next to Launch Icons And Splash Screens. Here also select Android Crosswalk.

Ok for your game’s splashscreens and launchicons to appear when players loads your game you will need to upload your own images of you game in this part.

Make sure you do both Portrait and Landscape Versions.

Ok after you did everything right now comes the build process.

Go and Click "Build" Tab At The Top And Click Crosswalk Android under Cordova 3.X HYBRID MOBILE PLATFORMS.

This section is crucial so you must definetly build under this section otherwise the adnetworks plugins won’t work in your game.

After You Click Build the system will upload your files to the system and prepare it for the build.

Aftersome time you will see another window that says BUILD NOW. Click the Green Build Now Button.

After some time you will see that the build is successfull.

You will see this text inside this text.

This zip file containes two APKs: one for x86 devices and one for ARM devices.

Submit both APKs to Google Play

Make sure you unzip the build download and have both the x86 and ARM builds.

Then follow this guide for submitting multiple APKs to Google Play

So you will have to upload two files to GooglePlay. The one for ARM devices is the one for the new mobilephones and tablets so if you would like to test your built apk and you have an updated and new Android Phone simple open your email from your mobile phone download the apk and install it inside your phone.

IOS BUILD SETTINGS

Export the game again as Cordova same way you did for Android.

And again this time create another seperate folder for IOS build something like MYNEWGAME_IOS AND export the project inside that folder.

Open Intel XDK and click projects at top left then select START A NEW PROJECT Import and Existing Project.

Select the folder you just created then give a name to your project and Click Create.

Ignore the small Window that pops up and just click ok. You project is created.

Ok before we continue you will need to create a Bunle Id from your Apple Developer account like

com.mynewgameios.mynewgame

You can do that from the link below.

developer.apple.com/membercenter/index.action There click the Manage your certificates, App IDs, devices, and provisioning profiles.

Select APP Ids under Identifiers and from there create yourself a unique bundle id.

Then write the same bundle id inside the Intel XDK under the IOS build settings and also give your APP a name.

This will be the same name when the people download your game from the appstore so be really spesific when naming your game.

Write Down the App Description and give the Author name.

Adjust the Orientation Portrait or Landscape and you are done with this part.

Now create your launch icons and splashscreens at IOS section both for Portrait and Landscape.

After that you will need to create and upload your distribution certificate for Appstore.

You will do this once because the certificate will be uploaded to Intel’s site so even when you create a new game you won’t have to do this step.

To create your certificate Go to Build Tab and under Cordove Hybrid Mobile Platforms click the IOS build button and wait for a while unitl the Green Build button to appear.

Now don’t do anything yet and click the Edit button next to IOS Certificate.

Follow the steps below to obtain and upload your certificate to the Intel’s Build System.

html5dev-software.intel.com/amdocs/lib/Walkthrough_v1_UploadCSR-ObtainCert.pdf

After you did everything right you are still not ready to go. Close the build system.

Now we will create Provisioning files for our game.

You will create2 files for this:

1-Adhoc

2-Distribution

For this visit the Apple Developer site Again

developer.apple.com/account/ios/profile/profileList.action

And From there click the plus sign and first create and Adhoc Provisioning file.

Select the Certificate you just created and also select the bundle id you created before.

Download your Provisioning File and Save it under the same folder of your Project.

Do the above procedure again for the Distribution provisioning file.

Now Go to Intel XDK again and from Build settings upload the Provisioning files you just download to the build system.

So Adhoc File for Ad hoc Provisioning File part.

Distribution File for Production Provisioning file.

First test the game so for testing purposed adhoc should be selected in the drop down menu next to Provisioning file.

And also to test the game and the built game to work you need to register a test device. E.g. your iphone or iPad.

After you registered your test device Build the Game.

Go to Build Tab and under Cordove Hybrid Mobile Platforms click the IOS build button and wait for a while until the Green Build button to appear.

And also select upload the files again don’t select use existing or it won’t see the provisioning files.

When The Green button is on now click build and wait for the build to finish.

Html5 tools will send you an email with the file.

The file has an expansion of .ipa so after you download it all you need to do it. Right click and say open with itunes.

Make sure your device is connected to itunes and then drag and drop the game from your apps section into your device and install.

Test the game if it is workin Great!

Go to Intel XDK

Now we want to rebuild the game but this time we will use Distribution Provisioning File.

Go to Build Settings and from the drop down menu change ad hoc to production.

Rebuild the game same as above and again reupload the files don’t say use existing and build the game.

WARNING!! DURING THE ABOVE PROCEDURES DO NOT TRY TO REUPLOAD YOUR CERTIFICATE!! YOU DID IT ONCE AND IT IS DONE.

Just Click build button.

Download the .ipa file.

Now to upload to appstore you will need to have a MAC or find a MAC. Download the apploader from the link below.

itunesconnect.apple.com/apploader/ApplicationLoader_2.8.dmg

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Hello,My name is andi from Indonesia. im recently developing IOS app via construct 2 to phonegap. But the app is always force closed when i open it. It opens and show cordova logo and force close.

    I think that's because of the config.xml file. Do you have the config.xml file that's really works?

    Thanks