[TUTORIAL] Upload your iOS game to App Store using intel XDK

  • I am making this tutorial since I promised myself to make one if I manage to get my very first iOS game to the App Store so here it is. I don't see many tutorials for iOS Developers on the C2 Forum nor website. There are only a few of them compared to the other platforms and they are quite outdated.

    Now, in order for you to upload your app to the App Store you need to pass the "Apple Review Board", let's assume that the "Apple Review Board" is the final boss. The waiting time for review is about 1-2 weeks so make sure you filled up all of your information right & get your game fully tested and only submit it to the Apple Review Board once you are 101% sure that it's eligible for the App Store.

    ***PLEASE NOTE***

    I will not respond to any technical related questions such as "Why is my screen black?". I will only respond to the iOS related question such as "Why can't I get the Game Center running?" "Why isn't the IAP working?" and I assume you already have all the basic knowledge about apple terms & agreement, etc.

    Important part of each steps are BOLDED and Underlined

    So let's skip the chitty chatty and get on with it.

    Below is the CHECKLIST for the items that you need to have to get your iOS game to the App Store :

    1) C2 Personal or Business License

    2) Latest IntelXDK

    3) IntelXDK Account

    4) A Mac OS (Only needed if you want to upload it to the App Store, I would suggest borrowing it from a friend unless you're willing to spend some cash to get a new/used one)

    5) iOS Developer Account ($99/year)

    6) Your game Splash Screen & Icons in different sizes

    7) Your "DREAM GAME" exported in Cordova using Construct 2

    Make sure you have all of those items stated above

    Step One : Exporting your Game and Importing It to Intel XDK

    Get your game exported in Cordova options, make sure you untick the "Minify Script"

    Then choose the folder you want to export the game to and click Next

    In the Cordova Options page choose the options that you want and click "Export"

    Then wait....

    Once it's finished open up intel XDK

    Log in

    Then click on the arrow thats pointing downwards on the top left hand side right next to "XDK Projects"

    Click on "New Project"

    Click on "Import your HTML5 Code Base"

    Then Import your game folder that you exported in Construct 2 using Cordova options

    Once done, enter your Project Name which can be anything, then click "Create"

    You want to choose Yes for both the options of "Use Cordova Plugins?" & "Game Project?"

    As for the Game Engine choose "Basic Canvas Game" and the version number has to be ONLY SINGLE DIGIT in between the decimals for example "X.X.X" it can't be "XX.X.X" or "X.XX.X" or "X.X.XX"

    Once you're done with this, click on "Continue" and if everything is right Intel XDK should create the project for you.

    Step Two : Configuring Your Game Build, Launch Icons & Splash Screens

    Alright, so now you got your game project created in IntelXDK

    Click on the top left hand side again, this time the "XDK Projects" button

    Then there should be your "Project Info" and "Cordova Hybrid Mobile App Settings"

    Ignore the "Project Info"

    Click the 4 buttons with the Android, Android-Crosswalk and Windows Logo (MAKE SURE THEY'RE GRAY & LEAVE the IOS LOGO BLUE)

    If you have additional plugins for your game that you want to import using IntelXDK then click on the "Plugins" section, otherwise

    Click the "Build Settings"

    Enter your App ID if you don't have one go to "Step Three"

    Enter your App Name, Description, Author, App Version

    Leave the Domain List empty unless you need to fill it up

    Leave the Cordova CLI version 4.1.2

    Tick the full screen if you want your game in Full-Screen and the status bar hidden

    Orientation "Landscape or Portrait"

    iOS Target Version "7.0 or 8"

    Exit on Suspend (This means, if you tick this option and on your iOS Device if you press the home button, the game will close and will not run on the background)

    Provisioning Profile "ADHoc" or "Production" (We'll discuss this in Step Three)

    If you got all of this figured out then go to "Launch Icons & Splash Screens"

    Yes you have to upload all the different sizes and splash screens for the icon

    My suggestion is go to http://www.simpleimageresizer.com/upload#.VX-2dPmqqko

    Resize your image there and choose the dimensions you want.

    It's very simple and easy and doing this, resizing all the size shouldn't take you more than 10 minutes

    Step Three :

    Creating your App ID, Certificate & Provisioning Profile

    Now that you've filled up the build settings there are still some field in it that is left blank and those are the "App ID" & Provisioning Profiles.

    App ID

    This is the first thing that you want to create

    So login to your Apple Developer account here https://developer.apple.com/membercenter/index.action

    Once you've done so go to Certificates, Identifiers & Profiles page. https://developer.apple.com/account/overview.action

    Click on "Identifiers" under iOS Applications NOT Mac Apps

    Here, you want to create your App ID for the App Store to identify your game (hence the name, Identifier)

    Click on the "+" button to add and configure your new App ID.

    "Your App ID Description" - I would usually put the name of your game for example "C2Tutorial"

    "App ID Suffix" click on "Explicit App ID" - For example "com.myname.mygamename"

    "App Services" - Choose the options you want for this. Usually I only tick, "Game Center" & "In-App Purchases"

    Once you've got all of this figured out then click "Next" and it will take you to the page where you want to double check the information of your App ID, if you are satisfied with it, just click Submit.

    So now you've got your App ID which is the "Explicit App ID"

    Go back to your IntelXDK > Build Settings > Under "App ID" copy paste your App ID that you just created "com.myname.mygamename"

    There you go, one down two to go

    Signing Your App Certificate

    Your app needs a certificate and it has to be signed, this might sound confusing to you, but it's not, it's actually really simple

    Go back to your Apple Dev Center and click on "Certificates" https://developer.apple.com/account/ios/certificate/certificateList.action

    Then you wanna click the "+" button

    Tick the "App Store and Ad Hoc" under "Production"

    Click Next and then it should take you to the page where it asks you to create a CSR File from your Mac, sounds complicated isn't it? Nah, no worries you just have to generate the CSR File that IntelXDK will generate for you and you just have to download it to your PC.

    Go back to your Intel XDK, click on the "Build" Tab at the top of Intel XDK (Not Build Settings)

    There are 4 options under "Cordova Mobile App Platforms"

    Of course you want to ignore the other 3

    Click the "Build" on the iOS

    You wanna click on the "Download" button under "iOS Certs"

    Then your PC will download the CSR File that IntelXDK provided for your app.

    Save the CSR File to whichever folder you want it

    Now go back to your browser, the page where you left off the "Certificates"

    You should be at the page where it says "Upload CSR file.

    Select .certSigningRequest file saved on your Mac."

    Now click on "Choose File..."

    And choose the .CSR file that IntelXDK provided for you.

    Then you wanna click "Generate"

    After this your App Certificate will be created

    Download this App Certificate

    Then go back to your Intel XDK

    Then go the section where it says "Upload Certificate" which is located under "iOS Certs"

    Now click on the "Browse" button and find the App Certificate for your app that you downloaded earlier

    That's about it for your App Certificate, now you wanna go back to the "Build Settings" for your App and we'll configure the "Provisioning Profiles" for your App in the next step

    Provisioning Profiles

    Now there are two types of Provisioning Profiles.

    Production is for the App Store which is what we're gonna be creating and Ad Hoc is for testing.

    I can tell you why I'd choose the Production (App Store) provision profile rather than the Ad Hoc ones, but then again, it'll waste your time because you'll have to listen to my own personal reasons about it.

    So let's just cut to the chase and get your App submitted to the Apple Review Board

    So go back to your "Apple Dev Center" and click on "Provisioning Profiles"

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

    Then click on the "+" button to add the Provisioning Profiles for your App

    Once there you wanna click on "App Store" for under "Production" then click "Next"

    Choose your App ID - This have to match with the App ID for your App. The App ID that you just created just now (If this doesn't match, you can't even test your App and run it on your iOS device)

    Click "Next"

    Select Certificates , again, this also have to match with the certificate that you uploaded to the IntelXDK, if it doesn't Intel XDK will fail compiling the game for you. In other words, your game build will fail.

    Click "Next"

    Choose your Profile name - I would normally put "My Game Name and the version"

    Then click on Download

    Copy the Provisioning Profile to your game folder that you exported with Construct 2

    Now go back to your Intel XDK in the Build Settings

    Under Provisioning Profiles choose the "Production" instead of AD Hoc

    then click on the "provisioning production" filed and upload the provision profile that you copied to your C2 Game Folder

    Now go back to the "Build" Tab

    Build the iOS project again

    It's gonna ask you to "Use Existing" or "Upload Project"

    You wanna click on "Upload Project" since your build settings is different

    Then you want to click on "Build App Now"

    Let's wait for a moment while Intel XDK builds your app

    If your build succeed you can then proceed to the next step, otherwise...

    Go to "Emulate" tab and see if your game would run on the preview device that IntelXDK provided for you

    Now the next step is for "Testing" your app which doesn't require Mac, however if you already know how to do so and the purpose of you reading this tutorial is only to upload your app to the app store then go to the

    Final Step

    and skip

    Step Four

    Step Four : Installing your App to your iOS Device for testing

    Very simple and short really,

    First download the Build from IntelXDK

    Download iTunes and Install it

    Plugin your iOS device to your PC

    then go to iTunes and sync your App from iTunes to your plugged iOS device

    Now you can run your App on your iOS Device for testing

    Simple as 1,2,3

    Final Step : Uploading your App to the App Store & Configuring your App Metadata

    The final step, uploading your App to the App Store, well you need a Mac for this, as the entire process below has to be done with your Mac.

    Uploading Your App to Your iTunes Connect

    Go to your Mac

    Download your game .IPA file that you compiled with Intel XDK to your Mac ( Intel XDK should sent you a link to download your game build to your email that you registered with Intel XDK, open up that email inbox and download it from there )

    Save the .IPA File in a specified folder (I usually save it into my Mac Desktop)

    Then, go to iTunes Connect (In your Mac) https://itunesconnect.apple.com/

    Log in with your Apple Developer Account and click "My Apps"

    Then you wanna add a new iOS App which is located at the top left of the page under "iTunes Connect"

    Fill in the fields "App Name, Version, SKU ID, Primary Language"

    The Bundle ID has to be the bundle ID that you created previously

    Once you have all of this filled in, click "Create" and it should take you to the page where you have to fill in all of these information. Seems like there is a lot to do, go through them, they're not hard to understand it should take you about 15-30 mins to fill up all of these informations, if you have any questions about these, just drop me a PM or reply below.

    Once you have all of the information filled up

    Go to "Versions" Tab, scroll down til you see this "Submit your builds using Xcode 5.1.1 or later, or Application Loader 3.0 or later."

    Click "Application Loader 3.0" and install it in your Mac

    Once it's installed, open it up

    Log in with your Apple Developer Account

    Then click "Import Your App" and you wanna click on the .IPA file that IntelXDK compiled for you

    Verify your app information here.

    Click Next til you see App Loader is uploading your app to your iTunes Connect.

    This should take 5-20 minutes depending on the speed of your internet and the size of the game, it varies.

    My suggestion is, while you wait for this to upload go back to your iTunes Connect, take a look at the Informations that you have to fill in.

    I'll give you a little bit more detail about the fields that are required to be filled in.

    Screenshots

    Minimum of 1 screenshot, but I would suggest uploading all 5 of them just so that you can attract people to download your game. If you want people to download your game, my advice is, the FIRST SCREENSHOT has to attract their attention.

    You might be wondering what the resolutions are for these, well, worry no more.

    Here's the link to it.

    https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Appendices/Properties.html#//apple_ref/doc/uid/TP40011225-CH26-SW2

    Name (Your Application Name)

    Description (If the description is not related to your App, it will be rejected. For instance, I got my app rejected the first time, because I wrote "Paypal payment feature will be added" in the description box.

    Keywords (The words for people to search your app)

    Support URL (If you're too lazy to create a website, I would suggest creating a facebook page or twitter account for your game)

    App Icon (Has to be 1024x1024 pixels, JPG or PNG format only & must have no transparencies)

    Version (The Version to be displayed in the App Store, I am not sure if this has to match with the version of your binary build, but I always put the same version like the binary build)

    Build

    If application loader finished uploading your binary you should be able to see the "+" button right next to the word like this picture below

    Click on it then choose the build that you want to submit to the app store.

    Once you are done with the metadata information of your app and you are sure that you want that build for submission, click "Save" and then "Submit for Review"

    That's all to it. Other than these, if you have any questions related about the submission of your C2 Project to the App Store let me know below or drop me a PM.

    Good luck for your game and I'm hoping it will be a huge success to you.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I need this! Thanks for sharing!

  • I have to do this in a few days. Thank you!

  • GamerGon sandronize You are welcome, if you have any more questions, feel free to reply me here. Good luck with your game.

  • ondraayyy when I sync my app through itune to my ipad, the game icon on my ipad is grey, can not open, every time I click it it shows Installing..., do you have any idea?

  • ondraayyy when I sync my app through itune to my ipad, the game icon on my ipad is grey, can not open, every time I click it it shows Installing..., do you have any idea?

    Can you provide me a screenshot of it?

  • thanks, it shows loading, no idea

  • laoniustudio Did you upload all of the icon image in the Intel XDK Build settings?

  • ondraayyy yes, all the icon images and splash screen image have been added to Build setting, I do not know why it can not show

  • Terrific post. This will be pivotal in my decision whether to purchase C2 or not. Curious they shy away from this topic as much as they do. Thanks again!

  • laoniustudio there must be something you're doing wrong. Do you have teamviewer??

  • ondraayyy sorry, I do not have team viewer, now I have solve the install problem, in the build setting I add ad hoc provisioning file, and choose the drop down menu(provisioning profile) to ad hoc, now the game installed and icon shows well, but when I log in the game, after show the splash screen for a sec, it auto quit the game, can not log in the game, do you have any idea?

  • laoniustudio If you are using AD Hoc Provisioning Profile, correct me if I'm wrong, but I believe you are suppose to add your device UDID to the certificate before you start testing it on the iPhone.

  • ondraayyy I have add the device UDID, still the same, when you test your app, this problem never happened?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)