I made an iPhone game with PhoneGap and I'll never do it again
Spoiler alert: I ended up creating Super Flipside as a PhoneGap app and it doesn't suck, but I'm still never going to do it again.
30 FPS with only a few entities on screen is an immediate no-go. I looked at a few PhoneGap alternatives like Ejecta to no avail -- they did improve performance a bit but still did not yield the silky smooth 60 FPS I was looking for. Then I tried once last thing:
Super Flipside's current performance
It was unplayable on my iPad 2. I didn't test on any other older devices, but I had a feeling their performance would be similarly terrible. I would rather people with old phones not even have the option to play than download it and be disappointed, so I limited Super Flipside to be available on 64-bit devices only. This was a little bit of a bummer but most iPhone users have upgraded past the 5c at this point anyway so it seemed like an okay tradeoff.
I did make some performance optimizations before I launched; many of them involved caching pre-rendered entities. For example, ImpactJS uses bitmap fonts for text. Each individual character drawn on screen is a separate draw call -- this is very slow. Since text is generally static content (although entire strings may be scaled, rotated, etc), I built some functionality in to cache entire strings once they've been rendered once. This particular optimization had an enormous effect. It cut the time it takes to render a frame of the level select screen nearly in half! I applied this technique to all kinds of "static" entities throughout the game and it yielded a noticeable improvement on the 5s.
However, the real take-away here is: if I had built the game natively, I don't think I would have had to worry about this kind of stuff at all. Super Flipside is a very visually simple 2D game. I know lower end Apple devices should be capable of running it perfectly; after all, they can run much higher end 3D games without a hitch. As far as I can tell, however, there's no way to harness the GPU when you go the PhoneGap route. While Super Flipside turned out alright, this is obviously a huge reason to just go native.
Speaking of audio, there's some alleged iOS behavior where audio won't play in a webview until the user interacts with it by tapping something. Sounds bad, right? There are ways to work around it but the terrifying part is: I couldn't trigger this limitation at all. Everything just worked like you would expect it to, contrary to what the Apple docs or anyone on StackOverflow said. So, I just kind of rolled with it, but this was very unnerving.
I hit quite a few quirks like these during development. The overall feeling I got here is that, when you develop webview-based apps, you are considered a second-class citizen. Using a webview to develop a full-fledged native game is kind of a hack, and I think Apple probably doesn't care if they break your app. Case in point: the iOS 10 beta introduced some new behavior where WebKit ignores the user-scalable viewport meta property. This "feature" is supposed to be for accessibility reasons; anyone should be able to pinch to zoom any web page. That's fine and all, but this would completely and totally break most webview-based apps. However, I again was unable to reproduce this behavior at all in Super Flipside. Maybe it's the way I'm handling touch events or something, but I just couldn't get it to break in the way it was supposed to. And again, I rolled with it, but felt very unsettled.
I'm never going to develop a webview app again. Not having to learn a new language was great, but it wasn't worth the performance hit and quirks I encountered along the way. The fact that I should be able to easily port this to Android and other platforms is nice too, but I'm sure those platforms are going to have their own quirks and performance problems. If you're thinking about developing a game like this, just do yourself a favor and go native instead. You won't regret it.
Lesson learned, I guess.
Download Super Flipside for free
Thanks for reading this post! Despite my complaints here, I am very happy with how Super Flipside turned out. It's a twitch action game in which you control two players at once, almost like a pacifist-mode bullet hell game. It's very difficult and meant to appeal to players who love trying a hard level again and again until they finally reach their "zen" zone and win. Sound cool to you? Why not download it for free from the App Store right now? Give it a shot and let me know if it runs alright on your device!