Chesslike is a game built on the web first with with browser technology: HTML5, CSS3, and Javascript on the client side, with PHP and MySQL on the server. This was done mainly because, as the sole developer on the game, these are the technologies I'm most familiar with. Several HTML5 wrapping softwares exist which claim to be extremely simple to use in order to get my game from the web to the app stores. This article will focus on my experience with Ludei CocoonJS and Adobe PhoneGap.
First, let's discuss how the game is built a little bit to get a better understanding of other circumstances down the line. When most people say HTML5, they're talking about the Canvas tag introduced in the HTML5 spec. Chesslike does not use the canvas. It is however, using the HTML5 doctype and taking advantage of several CSS3 rules which, in my opinion, is part of the HTML5 experience. This allows me to use responsive web patterns to handle many screen sizes. The game doesn't require frames of animation, and the gameplay is all turn-based.
From the outside...
Adobe PhoneGap and Ludei CocoonJS offer a lot of the same features that really attracted me. They both offer a JS plugin library to access the device-specific hardware options, and some extras like tracking, IAP utilities, etc. I'm not really interested in most of that stuff, as I'm just trying to keep this as simple as possible and just get my game from the web to the app stores. If anything, I'll just get the android back button to handle in the menus. I can revisit other polishy things later. The other thing that really attracted me was that they both claimed to be "Cloud Compiled". I should be able to upload my game files, wait a short time, and get back native app files, which I can install, or upload to the store. While uploading to the stores require some accounts, and fiddling with keystores/certificates, the cloud compiling mostly works as promised.
OK so first step is to upload my files. Both wrappers ask for the files to be zipped with the index.html in the root. SImple enough, the only thing I had to modify in my codebase was to make the Ajax calls hit my server with a full path. Phonegap also gives the option to include a config.xml at the root of the directory to help with settings and plugins. PhoneGap will take both types of apps(Canvas and Non-Canvas) just the same, but CocoonJS takes in your files and asks you to specify if you want to render using the "CavnasVIew+", "WebView+", or "System WebView". For me, I want to use WebView+, I think. But iOS won't do WebView+, so it falls back to System WebView when you select the plus. PhoneGap outputs to iOS, Android, and WInPhone 8. CocoonJS outputs to iOS, Android, Kindle, OUYA, Pokki, and Tizen. I'm currently focused on getting iOS, Android, and WInPhone. If Kindle comes easily with Android, I'm all for doing that one as well.
Output Time, let's see the results...
First, PhoneGap. I can't get an output of the iOS app without setting up the certificate, and provisioning file, then uploading it to them. So after doing that, I have an APK for Android, and an XAP for WinPhone, and an IPA for iOS. The Android and WinPhone builds also need credentials, but they are able to compile and output debug versions of the apps for testing.
Next, CocoonJS. I choose iOS, Android, and Kindle to start, and select the WebView+. A few minutes later, I have an email with download links to 3 zip files. One contains an App.xcodeproj file for iOS, one had a signed debug APK, and an unsigned release APK for Android, and the third had the same as Android but for Kindle.
Both of the Android files worked simply enough. I can install the signed debug apps by checking the developer settings on the phone about installing 3rd party apps. I couldn't install the unsigned release version because I need to sign and align it with my Android developer license key in order to make it installable, and therefore uploadable to the store. For iOS, I was able to use an internet-install system to install the IPA on my iPad, and open the xcodeproj project and install it by registering my device in xtools. Ludei's site has handy guides that walked me through all of this. I assume these files are already signed with my credentials and should be uploadable to the App Store, though I'm 100% positive on that yet.
So How did they work?
Pretty much everything in both versions of the apps on both platforms, worked just as it did in the browsers on those devices. The responsive HTML and CSS was working just fine inside the wrappers. Even changing orientation the game resizes accordingly, no problems. I did encounter a couple of small issues that I thought were exclusive to the wrapped app versions, but after inspecting later in the browser, it is also present there. I didn't find any issues in the app at the this testing stage that weren't in the browser itself. That's good for me so I can keep testing in the browser to fix these issues without having to rebuild the apps each time. Overall I wasn't really seeing any difference between the CocoonJS and PhoneGap wrappers either. PhoneGap seems to handle my CSS transitions a little bit better, but it doesn't handle the quickly changing background images as well as CocoonJS's WebView+. The iOS fallback in CocoonJS is about the same as PhoneGap though.
The Winner?
The differences were mostly negligible to me, but there was one thing that really stood out to me, and has decided the winner for the Chesslike project. Pinch-Zoom. PhoneGap simple doesn't have it. At all. Not on iOS or Android. Both platforms claim that the meta viewport tag should handle the ability of the user to use zooming on the app, but I cannot get it to work in PhoneGap. CocoonJS, it worked just as it does in the browsers on those devices. It was nothing extra to worry about at all. It seems like something small and simple, but all in all, both wrapping technologies performed satisfactory for me, except for the that. Since CocoonJS does not output to the Windows Phone, I may still use PhoneGap to output there, but perhaps there are some other wrappers out there as well. I haven't looked that much as I don't really know anyone who has a WIndows Phone for me to test it on.
Thanks for reading. Play Chesslike now at Chesslike.net Coming to app stores soon!
