Hello @stahlmanDesign, yes with pleasure! Let me know if the following helps at least a little?
I use the Ionic framework and rely on the command line interface (aka “ionic cli”) to create a blank starter project; I pick angular, even though it’s a bit bigger than the other options (react, vue - good reasons state below);
The built-in tools and some basic shell scripts allow me to automate most of the legwork:
- prepare the Android Studio + Xcode workspaces
- develop live on physical devices - safari & chrome devtools can debug remotely what happens on said physical devices; it’s out of the box, I had 0 trouble getting them to work
- generate app icon, splash screens based on single templates
- plugin import, installation (gradle, cocoa pods, etc.)
Why Ionic instead of plain typescript + webpack + cordova / capacitor?
My main reasons:
- Ionic is built by the same guys who make Capacitor, so it opens the door to all sorts of cool plugins (storage, device-themed modals & controls, etc.) and cloud services.
- Writing a game is one thing; making an app however also involves state management, platform awareness & co. With the solid foundation of Ionic/Angular, you can throw anything you want at it: from http service calls to firebase integration and of course ngrx (redux) in a consistent way.
- last but not least: choosing Angular means getting a pre-configured build pipeline. My angular.json allows building to 5 platforms, cherry picking what resources to ship (*)
- just got me a little trial & error to figure out how to disable the gesture detection engine of Ionic. Once bypassed, it’s a regular Phaser game that delegates its state management to an architecture meant for… state management, transition, storage, etc.
- I suggest reading "Ionic isn’t Cordova anymore" by Max Lynch. Clarifies who’s who from a core team member’s perspective.
My point here is to use Phaser “only” for what it does best (and for what it was built): gameplay programming at its best + handling resources, scene transition & co; The “business app” that runs in background handles the complexity of, to cite only a few:
- creating a store with in-app purchases (on various platforms);
- orchestrating scene transition and lifecycle management: did I die? Was my progress saved between scenes? What if I restart the app when I just got killed? etc. etc… angular/redux is perfect for that complexity.
(*) Examples of build pipelines (angular.json) with cherry picking & co:
- mobile: HQ audio, all 4 levels of pixel densities are shipped (sd, @2x, @3x, @4x)
- web: LQ audio, all levels of pixel densities
- kaios: LQ audio, replace index.html with specific index-kaios.html, specific ad integration libraries to add at compile time, SD sprites only.
Angular is a powerhouse that allows your workspace and CI/CD to scale. Moreover, the build optimization (AOT & co) reduce the package size to a ridiculous 2,3MB in the case of my demo, on Kaios (low def, LQ audio). It’s a bit less than 2 floppy disks, all inclusive.
Some Ionic / Capacitor cloud features that save me a lot of time (after a little trial and error to get familiar):
- Ionic + Capacitor opens the door to Appflow. It’s an amazing CI/CD service designed by the same team. In the free tier you get cloud builds of your app (ionic + phaser) and live update of the existing prod deployments… your users restart the app and magic, they get that last built you started 10 minutes ago
- the cloud also offers a set of premium features like building the native package (apk and ios/ipad signed releases) and can even upload to appstore/playstore.
- I don’t use the premium version yet as I only have a few players. I hope to get enough to justify cloud builds & co on a larger scale. Their toolchain is amazing I must say.
REM. the toolchain “Ionic / Angular / ngRx / rxjs / capacitor / firebase / etc.” has been my silver bullet for years so I must be honest and say I’m very biased.
I could try to turn this into a video tutorial if it sounds like a valuable thing to share. Let me know what you think! I never tried making those, could be an opportunity to do so