What we need to get our HTML5 game on iPad

by Matt Hackett, 2011 Mar 17
How to Make a Video Game All By Yourself
Onslaught! Arena on iPad

One of our attractions to HTML5 is its portability. Our game Onslaught! Arena began as a browser-based app but has since moved into native land by embedding a WebKit Web View into our OSX app.

Given how easy it was to get our game onto the Mac App Store, the next obvious question is, "What about iPad?" We've been exploring it and are sad to report that we've hit a brick wall of sorts.

HTML5 Audio is a disaster on iPad; only one sound file can play at a time, in addition to latency and other issues. Not to pick on iPad or Apple -- HTML5 Audio sucks all around. The good news is that it was pretty easy to hack in a fix on iPad and make audio work beautifully.

The trick to getting responsive audio on iPad via HTML5 was to create a bridge from JavaScript to Objective-C. I'll post a more detailed tutorial in the future (here's our RSS feed to get updates), but it looks something like this:

```objc - (BOOL) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *requestString = [[request URL] absoluteString]; NSArray *components = [requestString componentsSeparatedByString:@"://"]; if (([components count] > 1) && [(NSString *)[components objectAtIndex:0] isEqualToString:@"jsbridge"]) { if ([(NSString *)[components objectAtIndex:1] isEqualToString:@"battle_music"]) { // Play battle music here } return NO; } // Let any other request through return YES; } ```

Then in your JavaScript you'd send a request to "jsbridge://battle_music";. The device detects this request, parses it, plays an audio file and cancels the request.

Onslaught! Arena on iPad

So there's a workaround; audio is not the bottleneck. The problem with getting our game onto iOS is speed. As you can see in some of these screenshots of our game running in the iPad simulator, the frames per second (FPS) is severely lacking.

Movies play at 24 FPS, TV plays at about 30 FPS. Modern video games probably run at 60 FPS or more. While taking screenshots of Onslaught! Arena, I did notice it can run as high as 59 FPS, but it's bursty and doesn't last. Most of the screenshots are more depressing, showing the game running at about 7 FPS, which is completely unplayable for an arcade game like ours. Plus, as you can see I've removed the extra pixel drawing of the arena itself: the screen is just plain black and it's still unacceptably slow.

This speed problem is the only thing keeping us from having a playable game on any iOS device. So Apple, Google, all of you WebKit supporters and browser makers: please make things run faster. Lotta love for ya, we just want more speed!

Follow author @richtaur

LDG © 2022 • BlogTerms of ServiceVideo Policy • v2.1.2