Blocky's Quest (demo)

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 :slight_smile: Runs on tablets and phones. A KaiOs version is about to be released on the KaiStore too :slight_smile:

3 Likes

Good luck with it! I’ll test it now

1 Like

Hey thanks!

I’m stuck here

Can’t shoot anything

2 Likes

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 :slight_smile:
  • 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 :wink:

1 Like

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 :slight_smile:

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 :slight_smile:

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 :slight_smile: