As I’ve discussed before, PhoneGap isn’t really the best option for running a Phaser game, but it is a very easy option. If you’ve created a resource intensive game then using something like CocoonJS will probably yield better results but if the game is reasonably simple it should be fine running on PhoneGap (especially if you’re making use of this plugin).
When iOS8 was announced we learned that the WKWebView with it’s NitroJS engine would be available to replace the standard UIWebView that PhoneGap applications run through. This would mean an approximate 400% increase in JavaScript performance.
It’s been a long time since iOS8 has been released though and PhoneGap is still yet to implement WKWebView by default (although it has been planned). There have been plugins created to enable the use of WKWebView in PhoneGap applications but I’ve never found one that seemed to work nicely with Phaser games, until now.
Ludei (the creators of CocoonJS) have released a PhoneGap plugin called Webview+ for iOS (an Android version is also available). This will enable you to use WKWebView within your PhoneGap application. Since the recent PhoneGap Build updates, PhoneGap Build users can also use this plugin since it is available on plugins.cordova.io.
Enabling WebGL on PhoneGap
All you have to do to enable the iOS version of this plugin is to include the following line in your config.xml file:
<gap:plugin name="com.ludei.ios.webview.plus" source="plugins.cordova.io" />and your Phaser game will run through the improved WKWebView instead of the standard UIWebView. Benefits of this include:
- Better CSS3 support
- Faster JavaScript through the Nitro JS virtual machine
- Support for IndexedDB
- Crypto API
- Navigation Timing API
Perhaps the most important thing though is that it enables support for WebGL. A Phaser game can run using Canvas or WebGL (WebGL being the better option where available). In a standard PhoneGap application through the UIWebView you must set your game to use Canvas otherwise it will not work. Once you have this plugin installed you can switch over to WebGL, simply change your initialisation code to the following
game = new Phaser.Game(
window.innerWidth * window.devicePixelRatio,
window.innerHeight * window.devicePixelRatio,
Phaser.AUTO,
'gameArea'
);and Phaser should automatically detect that WebGL support is available. This alone should increase the performance of your game significantly.
Hopefully before too long WKWebView will be supported by default in PhoneGap (and PhoneGap Build) applications so we wont need to worry about including a plugin to do it. Until then though, this is a very simple solution and it should be included in any game that you create with Phaser on PhoneGap.
Are you using PhoneGap to deploy Phaser games? Let us know what you experience as been like in the comments.