Dears,
Porud to share this demo via the appstores today!
Here is a quick video preview of the game.
The lion is designed after my little boy’s favorite plush friend. He’s proud to have helped with testing, drawing and imagining a story. The good lion is to stop some looming evil in the pyramid of the Lion Mummy, Blocky-Thotep.
The demo adds a “beta tests” / “sandbox” section that contains my testbeds. It allows trying out the other characters and ennemies 
Runs on tablets and phones. A KaiOs version is about to be released on the KaiStore too
3 Likes
Good luck with it! I’ll test it now
1 Like
There is a switch to your left; it cannot be reached by the lion. You must throw a rock at the switch to operate the lift; Please check the video below; Let me know if you think it’s too tricky for a tutorial?
Can you describe how you prepared your Phaser game for app stores? For example, are you using Electron or Cordova? If you could describe the process I think a lot of people would be interested.
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.
- Great for some hardware features (example: native orientation locking via javascript binding apis, camera if you need to scan qr codes, plugins for facebook/twitter/google sso, etc.)
- 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.
- etc.
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 
2 Likes
Wow that is an amazing reply.
These publishing tools change so it’s always interesting to see what people are using now. I have recently looked at Ionic but I didn’t know the details. It sounds great.
I also like your approach to keep some of the logic out of Phaser so each tool can focus on what it does best. It’s sort of like microservices instead of a monolith. The only thing I would try to do differently is to use React instead of Angular, due to familiarity.
I would watch a video tutorial. I think it would be popular and inspiring for Phaser users.
EDIT: I just saw this related Phaser tutorial Phaser - News - OpenForge Ionic Video: Building Mobile Games with Ionic Framework and Phaser JS.
1 Like
Hey thanks!
Ok, I’m not as familiar with React but I suppose it’s as equally good; especially with Redux in the loop. A trcik that helped me was hiding the root node of the app (angular one) in the DOM (visible: false) to avoid trapping some touch events. Could help as well if a touch library is in use with your React stack (like hammer.js).
Please keep me posted when you’ve gotten started!
I’ll free up some time to try and make a video. Great opportunity to try this
2 Likes
This game is great! The style is amazing too, everything really flows. Nice job!! My one small thing that took me a little getting used to was the control pad being on the right instead of the left but that’s probably just me
1 Like
Hey thanks @Phailser !
that’s a very good remark. As I read your post I notice that the physical gamepad on my desk is… like you describe… d-pad on the left and color buttons on the right.
I’ll add an option to “flip controller”. Keep you posted
