• Register
Post tutorial Report RSS Upload html5 game to the AppStore

We worked in an initially html5 simple game, with Construct 2, it came out pretty nice so we wanted to upload it to the AppStore... but the performance was far from good.

Posted by on - Basic Client Side Coding

So, Damian (artist & game designer) came with a prototype for a platformer with a christmas theme, and it was cool. He use to work with Construct 2 for prototyping, and after some work we decided to just upload the game to some portals (Kongregate, Newgrounds) as an html5 game.

When he finished the game, I wanted to try it as an app, and it was more difficult than I thought, Scirra is full of tutorials, forum threads, but it seems that are all outdated, or are really difficult, not to follow but to actually implement. I've read about Cordova, Intel XDK, Cocoon... For example, take this Intel XDK tutorial: is like "Close, Open, Export, Delete, Copy, Open Again...", why??... after seeing that I discarded XDK. I didn't even tried because I would upload the game to AppStore if the process was simple enough. Then Cocoon... and nope. You must upload your project as a .zip, they process it (?) and you receive the .ipa, and also they have a "Pricing" option, is not a deal breaker but I didn't wanted a pay service. And finally, Cordova, I used before but it was slow for games, so I had no many hope on this.

So, I started. First creating the Cordova project, of course you must have Cordova installed:

cordova create projectFolder com.your_domain.yourgame ProjectName

Once you have done this you can get into the folder:

cd projectFolder

You'll see some folders and the "www" one, is in that folder where you should copy your Construct 2 exported project. When you copied all the required files (don't forget the "media" folder of your C2 project!), you can add iOS as a platform, so inside your projectFolder use cordova to add iOS:

cordova platform add ios --save

And now, you'll see that a new folder was added... of course, the iOS folder (/platforms/ios). After adding the platform, you should add a plugin called "cordova-plugin-media"

cordova plugin add cordova-plugin-media

When the project is ready, build it:

cordova build ios

In the iOS folder folder, you'll see the Xcode project, great! You have the app ready... nope. Try running it on an iOS device, you'll notice a huge performance lost.

By that time, we were looking to discard the iOS uploading, or taking out all particles, and elements that can be a problem for performance. Until I've read that cordova uses a default webview (without WebGl). Since iOS 8.0, Apple introduced a web view with webgl support, so I've started to looking for ways to use that webview for this project (WKWebView), and of course the great humanity already had a solution. A cordova plugin:

cordova plugin add cordova-plugin-wkwebview-engine
cordova build ios

And now go and run your project again... BAM! Great performance!

Now, there is one more thing... you should add another plugin, because the need for every app to support ipv6:

cordova plugin add cordova-plugin-http
cordova build ios

Yes, build the lib again.

Maybe many of you knew about this, but honestly I had a hard time trying to figure it out searching at Scirra forums, only when I knew about WKWebView I found some threads about it. So I wanted to do this little tutorial, because is a very simple and functional solution to upload html5 games to the AppStore.

Let me know if this helped you. Thanks for reading!


Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: