Spirit Hunter - Retrospective

Aleksey Litvinov — Sun, 06 Oct 2024 16:39:29 +0000

Hello! This year I participated in js13k games game jam for the second time and I’d like to share my experience and learnings.

This year, my entry was Spirit Hunter.

Competition

Is happening every year. In nutshell you need to create a browser game, which source code fits into 13kb archive and does not rely on external sources. Moreover, each year has a special theme and your game needs to match it somehow.

As you may see, apart from making a game, the competition also challenges your technical skills with a size limit.

Preparation

Learning from the last year I realised that having robust pipeline to test archive size with a type checker is crucial for development and decided to prepare one. There are many boilerplates available (https://js13kgames.com/resources#boilerplates), so you do not need to create one yourself. However, I wanted to have flowtype support, so created one for myself.

If you follow the same path, you may want to check roadroller for additional compression and ect-bin for zipping build artefacts.

Technical Design

Early this year, I did game development with Love2D engine (relies on Lua language) and was inspired by its approach, so decided to make something similar myself for the competition.

I implemented game loop pattern on top of the canvas with throttling to have 60 fps rendering and created helpers for drawing primitives and images. For interaction I created two hooks: update (for data management) and render (for display). This way I managed to get a very tiny engine saving space for the game.
Note: if you want to go this way, keep in mind that rendering and positioning text might be challenging, so you may want to pivot towards simple approaches.

For the game itself, to handle the logic I decided to try State Machine and State Stack patterns. Those are very helpful for the screen management (for example, each screen — particular state) and can be used more granular. For example, I used state machines to handle character animation, interaction and player control. My fear was that it will consume a lot of space, however, on practice it itself showed very well.

Graphics & Gameplay

Initially, I wanted to make a Vampire Survivors and Legend of Zelda variation, but in ghostbusters settings with exorcism. While I was thinking on a gameplay and characters, I realised that I’ll need suitable assets to make the right impression. I’m not artist myself, so I ended up checking https://kenney.nl and https://itch.io/game-assets/free for something suitable. Unfortunately, this step was a blocker for me and I spend couple of days on resolving my internal conflict. In the end, I decided to pick something looking suitable and adjust my expectations.

As a learning, I’d say it is better to start working with something ready rather than spend time on resolving high expectations, since the time for the jam is limited.

Sounds & Music

Last year I failed to add sound and music to my game, so decided to pick one suggested libraries from the resources. I ended up with jsfxr for sound generation and zzfxm for the music. First one has a UI to generate custom sounds and second one — was helpful to provide some examples. Unfortunately, this step took roughly 6kb from my game, which is huge!

Investigation showed, that jsfxr commits 5kb. Moreover, it is not tree-shakable and comes with a sound generator, which is not necessary for the final game. Doing some optimization helped to save 1.8kb. However, later I realised that jsfxr is not necessary at all, since there is a similar sound generator available for zzfx (which is a part of zzfxm).

Conclusion, go for zzfxm and use https://killedbyapixel.github.io/ZzFX/ to generate sounds.

Final Touches

When I was adopting my game for mobile, I decided to make public version on GitHub pages (so it will be easier to test). This step helped me to uncover some issues with asset paths in the final archive.

Another interesting observation was about .DS_Store file. One was located in a public folder with other assets and vitejs was packing it, consuming extra 0.2kb.

Summary

My final version was about 12.7kb. Here is an approximate breakdown:

3.9kb graphical assets
2.1kb engine
0.9kb zzfxm
0.5kb state machine / stack
0.4kb entity base class

The rest 4.9kb for the game logic.

Final Words

The competition was fun and big thanks to Andrzej Mazur, to the team and judges for organising it!

DEV Community: Aleksey Litvinov