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

Get help using Construct 2

Post » Thu Jun 18, 2015 1:15 pm

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 :lol:


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 :lol:

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

Image
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"
Image
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.

Image


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.
https://itunes.apple.com/us/app/id1004254105

We bet anyone a hundred dollars if they can reach the bone on the other side of the screen! (Only on the Impossible Mode)
B
10
S
2
Posts: 122
Reputation: 1,004

Post » Tue Jul 14, 2015 2:55 pm

I need this! Thanks for sharing!
B
6
S
1
Posts: 55
Reputation: 545

Post » Tue Jul 14, 2015 6:12 pm

I have to do this in a few days. Thank you!
Lead developer at Octeto Studios
Visit our portfolio at: http://www.octetostudios.com/ :)
Facebook || Twitter || Youtube
B
37
S
7
G
5
Posts: 217
Reputation: 5,614

Post » Tue Jul 14, 2015 7:22 pm

@gamergon @sandronize You are welcome, if you have any more questions, feel free to reply me here. Good luck with your game.
https://itunes.apple.com/us/app/id1004254105

We bet anyone a hundred dollars if they can reach the bone on the other side of the screen! (Only on the Impossible Mode)
B
10
S
2
Posts: 122
Reputation: 1,004

Post » Thu Jul 30, 2015 7:40 am

@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?
B
11
S
3
Posts: 172
Reputation: 1,178

Post » Thu Jul 30, 2015 8:18 am

laoniustudio wrote:@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?
https://itunes.apple.com/us/app/id1004254105

We bet anyone a hundred dollars if they can reach the bone on the other side of the screen! (Only on the Impossible Mode)
B
10
S
2
Posts: 122
Reputation: 1,004

Post » Thu Jul 30, 2015 9:06 am

Image

thanks, it shows loading, no idea
B
11
S
3
Posts: 172
Reputation: 1,178

Post » Thu Jul 30, 2015 9:06 am

B
11
S
3
Posts: 172
Reputation: 1,178

Post » Thu Jul 30, 2015 10:47 am

@laoniustudio Did you upload all of the icon image in the Intel XDK Build settings?
https://itunes.apple.com/us/app/id1004254105

We bet anyone a hundred dollars if they can reach the bone on the other side of the screen! (Only on the Impossible Mode)
B
10
S
2
Posts: 122
Reputation: 1,004

Post » Thu Jul 30, 2015 11:05 am

@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
B
11
S
3
Posts: 172
Reputation: 1,178

Next

Return to How do I....?

Who is online

Users browsing this forum: Armench, Artcadev, blackhornet, farsen, mariusvm, PROxMTswatTR and 14 guests