Add Multi-platform Build Support

[Majirefy]

I create this issue just for keep track of the progress of multi-platform support: for Desktop(via Electron) and for Mobile(via Cordova).

There are some starter project.

For Electron:
Eletron

For Cordova:
Cordova

Thank you for your awesome work! Your project makes game-making have more fun instead of losing myself in "setup a development environment for a long time then give up".

👍

[rroylance]

TODO For Electron;

• Electron Build and Test (https://github.com/electron/electron)
  • npm run electron:dev or npm run electron:dist
• Electron App Packaging (https://github.com/electron-userland/electron-packager)
  • npm run electron:pack:dev or npm run electron:pack:dist, refer to README for details on providing other options to the build.

TODO for Cordova;

• Cordova Build and Test
• Cordova App Packaging

[michelcve]

I see this item is quite old already. I too would be interested in the addition of Cordova. Any chance we could see this happen soon?

[rroylance]

See it happen? For sure. Soon? Not likely, unfortunately.

I just don't have the time to devote to something that large and unfamiliar.

I really need to do some cleanup and think of how to add it all properly and allow all of it to be easily stripped out for those who don't care, as well.

Maybe I can take a look during my Christmas break when I'm off work for a couple weeks.

Sorry it's been so long, I started this project when I had some free time and that quickly disappeared.

[michelcve]

I can relate to that, free time is precious and scarce ;-) Nevertheless, thank you for your efforts!

[michelcve]

Just for your information: It seems like cordova forces a specific directory structure, and doesn't allow you to change that.

Cordova simply doesn't offer any configuration options for the paths. The Cordova CLI has very specific, very rigid expectations, and doesn't offer to let us modify those expectations via an .rc file or something. It probably could, if someone wanted to prioritize that feature. But as of 5.x, it doesn't.

Source: https://stackoverflow.com/questions/32305344/change-project-directory-structure-in-cordova

[rroylance]

Ya, that's one of the reasons this wasn't done when electron was added. My thinking is I'll be changing things to make electron and Cordova an opt-in thing; where you get the original template and run a command to convert it to a Cordova project or something. Or maybe even just a seperate repo that is specific for the Cordova version; but I'd really like to keep the whole project in one repo, if it can be done nicely.

[michelcve]

I just made a plain cordova project, using cordova create testApp com.blah.testApp testApp.

I then threw away the contents of the www directory, and put a dev build from your framework in it. Then altered the index.html just a little to include an import to cordova.js (<script src="cordova.js"></script> in section).

A quick cordova platform add android and cordova build android resulted in an apk file (couldn't test it on my phone, but no build errors).

So there is not much to be done to get a basic build going.

Perhaps a simple config json, combined with a few (gulp?) build options would make it possible to generate a cordova subdirectory in the project, where all the cordova build stuff could be done.

Alternately, since it might feel a bit dirty, you could just add a cordova.md describing how to do a cordova build this way for users interested in making a cordova build themselves.

[michelcve]

I've spend the weekend playing around a bit, and added a first rudimentary version with cordova support, without changing your current workflow.

Android build works, and I got it running in the Android emulator. Except for the filters/shaders that is, since I used API23, which apparently doesn't support WebGL. Thus, filters/shaders in Phaser cannot work.

But it should work with newer API/android versions, as I verified that the code was loaded properly.

It needs some more polishing, and I'm not really sure if it's the way to go. But if you want to take a look at it, you'll find it here:

https://github.com/michelcve/phaser-npm-webpack-typescript-starter-project/tree/cordova-test

Note: I couldn't get the emulator for android 8.0.0 working, so I tested with API23 (android 4.0 I believe).

To force it using API 23, first you have to create the cordova environment (npm cordova:setup).

Then you have to manually modify the cordova/config.xml once you created it, and add the following to the <platform name='android'> section:

<preference name="android-minSdkVersion" value="23" />

Then remove the android framework if you created it, (npm cordova:android:remove), and recreate it (npm cordova:android:add):

[rroylance]

@michelcve That's looking great, I can't wait to take a closer look over the holidays. Thanks!

[michelcve]

Small update (haven't had much time lately):

I've just tested it on a Samsung Galaxy S6 Edge, unfortunately the shader's dont work.

The fonts with shaders aren't visible, unless I remove the filters/shaders.

As far as the logs go, there is only one error: A reoccuring index out of range error for a vertexAttribPointer, which seems related to this issue here: phaserjs/phaser-ce#194. I tried to patch is using the suggested fix, and the error messages indeed went away, but unfortunately the problem persisted.

So, basically, I don't really have a clue at this point as to why the shaders don't work.

The good news is that everything else seemed to be working fine. I had background music, the google font was working, and the phaser sounds went off on each tab... Guess that counts for something ;-)

[rroylance]

@michelcve Great start, if basically the only thing not working are shaders, that's not too bad at all. Thanks for your continued effort :)