Mobile Web Games In HTML5 – Hit and Miss

I have spent the first three days of this week working on a couple HTML5 games that will eventually make it into our book on the Canvas and will also probably show up here in some form or another (and maybe even in the various App Stores). I chose to make two relatively simple games, each targeting different functionality.

The first game I created was a simple BullSh*t Bingo app. It is a 5×5 grid that let’s the user play a game of bingo with buzz words that might be said in a boring meeting. There are quite a few of these out there (5 in the iTunes app store) and we even had one up ages ago (written in .net, so I have to re-code it to show it here again).  The functionality I wanted to test was to draw everything using a single Canvas and target the Mobile Safari browser. The app has the user click on the 25 buttons, each representing a word or phrase. The buttons  change state, and play a sound embedded with the HTML5 Audio tag when clicked. After a little trial and error with sound file types (mp3 works best in Mobile Safari), I was able to get application working pretty well. I targeted a 600×600 browser window and it worked pretty well in Safari on the desk top.

I uploaded the files to our web server and I was able to get the app to show up in Mobile Safari and even play sound! The problem was that the Mobile Safari browser has a strange DPI setting (very high) so my app looked tiny and none of the buttons and words could be read very well. I was able to find a couple meta-tags that force the screen into a “no scale” mode and this seemed to do the trick nicely. I had to scroll the page up/down/right and left to see all 25 squares, but I was satisfied with my first test.

Next I started a new project in Xcode  to create a PhoneGap application out of the game. This takes a little trial and error, but within about 15 minutes I had it up and running on the simulator. I noticed that on the real (or simulated) device, running as a native application, the landscape mode would not automatically become invoked. I played around with he “-info.plist” file for my PhoneGap project and was able to set it to be in Landscape mode only. I then had to resize all of the buttons and write some new text parsing functions so  I could get all 25 buttons on the screen without scrolling.

Once this was complete, I plugged in my iPod touch, and then went  through the long and complicated steps to register my Apple account, device, and computer into the Apple Borg. Once assimilation was complete, I was able to test the app directly on the device and it worked perfectly!

Encouraged, I broke out a much more processor intensive HTML5 app, Geo Blaster Basic. This app is an Asteroids variant that has a lot going on and many screen updates. After fashioning some very crude buttons to the bottom of the app (to replace the keyboard controls),  I created an Xcode PhoneGap project and tested it in the simulator. It worked pretty well. I then tested it on the device and was sad to see it move at a sluggish pace. The little device just didn’t have enough power to force Javascript to run at a fast speed and update the Canvas 30-40 times a second.  The buttons also didn’t work well at all, and the “click” event didn’t fire off nearly as much as needed for an action game.

The game is not optimized though, as every graphic is re-drawn each frame using paths (a little like drawing vectors on every frame with code in Flash). Also, I didn’t pre-calculate the vector movement math or use object pooling. While it looks like the various desktop browser implementations of the canvas can handle some pretty unoptimized code, the mobile versions still cannot.

From this little testing it looks like relatively simple HTML5 games (word, puzzle, etc) will work fine on Mobile Safari and even as native applications, but games that require constant screen updates will need a lot of optimization before they even come close to performing at an acceptable rate.

My next goal will be to optimize the GeoBlasterBasic game with bitmap graphics instead of paths drawn every frame. This will be akin to creating a BitmapData pre-rendered tile sheet in AS3.  We’ll see if this improves the performance.  As soon as I have something worth showing I will put it up here on the site.

(8bitjeff is Jeff D. Fulton)

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply

Your email address will not be published. Required fields are marked *