GameOff Wrap-up

Rather than crunch  through the last couple of hours of the 2021 GameOff 'Bug' Jam  and probably introduce Breaking Bugs (how did I not think of that as a name) I am writing a dev update as a form of retrospective over the month and to outline my  plans for the game.

First off, thanks to everyone who play tested the game and all in the GameOff Discord server for the support and inspiration!

So was it worth doing?  What did I get out of it?  What worked and what didn't?  Let's see.

<fair-warning>

Much of the following will only be of interest to web developers!

</fair-warning>

Cloud Based Dev Environment

I'm pretty sure I would not have been able to complete the Jam without the possibility to jump online @Glitch and code on which ever device I had to hand - usually my sons Chromebook that I'm using right now.  

Much of this dev time was snuck in while on duty as "Dad's Taxi Service" parked up during  my kids GAA, soccer or basketball training (as I type this) or during the LateLateShow - no, not that one -  which is about 8 hours long I think - Irish readers will know. 

When I did have access to my main dev machine, syncing with VS Code via GitHub was trivial thanks to both VSCode and Glitch's excellent git integration.

Something I think that goes really well with cloud based development is the next item.

Standards Based, Buildless Development

Working with vanilla Web Standards (HTML5, JavaScript, CSS) using the native platform primitives such as ES modules with no compile step was a real joy on this project.  All time was dedicated to feature development and none to framework integration or environment setup. 

The physics library, Matter.js (more on that later), is the only  dependency and code updates were super fast with automatic page refresh  in the cloud IDE or VSCode LiveServer.

Of course this approach is not a silver bullet and may not scale to larger apps and teams but for smaller apps (game is ~1MB) it might be worth a try.  

For such cases my recommendation would be to start simple and vanilla and only bring in tools and frameworks as needed when you have a better handle on the problems you need them to solve.

If the tooling starts to get too heavy, one way to tackle the complexity and still maintain cloud development flexibility could be portable dev containers that can execute in the cloud IDE or locally.  This is a space that seems to be rapidly evolving and one I will be watching closely for more complex projects that require a build step.

Technology Learnings

As mentioned in the previous section, Web Standards was the chosen technology stack.  This was mainly based on using  HTML5 Canvas for graphical visualization and the Web Audio API for procedural audio generation as well as playback of pre-generated SFX also designed in-browser at Leshy Labs. 

Using canvas based graphics exclusively meant building a small bespoke GUI framework on top of the low level canvas API.  This is generally not recommended as we have higher level primitives in the web stack (HTML, CSS) and we should always try to obey the rule of least power but I wanted to keep everything on the canvas for ease and consistency of view scaling and for the in-game recording feature - more about that here.

The only non-platform dependency, Matter.js was also an absolute pleasure to use with an intuitive API that was really easy to pick up for a first time user.  I ended up using quite a few features of the library as well as using its basic render loop for the main game loop. 

Here I found a limitation though as I needed to change how the canvas background was drawn but did not have a hook into that part of the render cycle.  As the library code was quite  accessible I was able to trivially fork matter and put in the needed hook as a render lifecycle event that I submitted back as a contribution.

One more issue I hit with Matter.js was that it unfortunately doesn't provide a native ESM version (that I could find) so would not have worked out of the box with my dev setup. 

As a quick workaround I used SkyPack CDN which optimizes NPM packages for ease of use in-browser.  The resulting code was also human readable so I was able to include a copy in my project with my custom patch.

Skill Power-ups

Game dev is a technically challenging space both from a technology perspective as well as a design perspective.  Working on the game gave me a chance to work on both these skillsets.  As I have covered lots of the tech aspects in the previous sections I'll focus on the design aspects here. 

Graphics design was largely out-sourced to the public domain - see the project README for credits.  Any minor tweaks or format conversions were done online at Pixlr.

Both the audio  and interaction design presented some interesting challenges.  

I am fairly happy with what I managed to achieve with the generated and designed SFX in the time frame.  In particular I like the LadyBug language generation.  Its a basic mechanism but I think it adds a nice little extra character to the bug.

I would like to include music in the game but that would require a pretty significant level-up I expect for me to produce something decent.  

On the interaction design side there were multiple challenges in the GUI and HUD design as well as the gameplay interaction design and difficulty tuning that had me tweaking the controls and settings right up to the end of the jam.  Again, I'm fairly satisfied with the result even if there is likely large room for improvement if I decide to keep developing the game. 

A key part here was user testing and feedback, in particular watching my family play the game without giving any instructions or guidance was invaluable to discover what was working and what needed to be changed.

Thanks also to anyone from the discord group who gave feedback.  One comment there in particular about the bubbles physics really set the scene for the final gameplay experence.

Next Steps

Future development of the game depends on community response and performance in the GameOff competition.  If it is well received I will try to do the following:

• Big refactor - code is beer-fueled, game-Jam-crunch quality right now - it ain't pretty.
• Moar features - additional power ups and an end-sequence already started in the existing code that didn't get finished on time for the jam.
  
• Make it a PWA so it can be installed like a native app with access to full screen APIs, landscape orientation lock and other such native app niceties.
• Submit it to the popular app stores.  I will most likely use the excellent PWABuilder from Microsoft for this. 

Apart from the game itself, the recorder technology seems to be fairly novel and could be worth factoring out as a standalone Web Component.  Currently toying with <can-corder> for a tag name.  Let me know if you are interested!

If you somehow made it this far, thanks for reading - if I had more time I would have written a shorter post!