Porting HMTL5 Game made with Phaser 2 to Android & iOS

[Warbler Gaming]

Hello fellas!

Having web games is amazing, but we all know monetisation and marketing is a lot easier with apps. What is currently the best way to port a web game into native apps? Is there any wrapper out there working well without having a big impact in performance?

The one I've seen is cocoon js, but I've not yet been able to make it work.

Many thanks in advance!

 

[Finwillwin]

Sorry no clue for HMTL or HTML.

[mattstyles]

Cordova is still (pretty much) the only way to do this using JS. The React-native project can also do this, without Cordova, puts it benefits are its tie-in with the React community, so isn't really applicable for your needs.

Cocoon and other projects like Phonegap are just wrappers around Cordova. I can't really comment on their usefulness as I've never found Cordova particularly difficult to set up myself, the docs are excellent and they have good getting started guides.

Cordova (and thus cocoon/phonegap/etc) work by creating a skeleton native app with a webview inside. They inject a number of things to allow better communication between the webview and the hardware without you as a web developer having to dig around in native code (i.e. you want access to native features that the web does not surface like persistent storage, menus, push notifications etc then Cordova plugins handle this for you and provide a web way to access it).

Cordova punts whatever html you want in to the web view and also adds a ready handler (I forget the exact handler, think it might be `deviceready`), so, if you had canvas implemented JS game (i.e. limited DOM) your html might look something like:

<canvas class='js-canvas'></canvas>
<script src='game.js'></script>
<script>
  document.addEventListener('ondeviceready', function start () {
    window.Go()
  })
</script>

This assumes that your `game.js` exposes a global `Go` function which starts everything going.

There are lots of other ways you can start you game going and they are mostly the same as the web with one key difference: the ondeviceready handler is crucial as that is when Cordova lets you know plugins and any other stuff is ready for your webview to start going. Normally this is moot in the web world, although its pretty akin to the domready event that some people still like to use.