Storybook As A Game Development Tool (With Demo)

#storybook #typescript #gamedev #programming

Storybook has become a quintessential tool in the prototyping, development and testing of my browser game.

Not the reading type? Here is the link to the Storybook. I'd suggest reading at least the Introduction story first: SYNTHAX Storybook (Chrome or Edge required)

Games and Storybook? What?

Storybook is a tool that helps web developers build components, pages and experiences in isolation (see storybook.js.org). And it's hella good at it.

Recently I have un-shelved the only side project I have - a 3D browser game called SYNTHAX - and slowly started working on it again. Having been neck deep in Storybook the past few months professionally I realised that, with some luck and tinkering and a lil' bit of hacking , it would be the quintessential tool for game development.

3 weeks ago on a Friday night I decided to give it a try. Today, I wish I've done it sooner.

Features

It's very easy and convenient to work on any part of the game in isolation - Meshes, Particles, Animations, UI, Interactive elements, you name it.

It's also very helpful to be able to prototype, build & test whole maps and rooms in isolation

The ability to change settings and also environment options on the fly at any time

Controllable player character can be spawned in any story (except UI only stories)

Screenshot testing of all stories thanks to Chromatic

The Playable Demo

Like what you're seeing? Well, you can try it too! Here is the link to the Storybook: SYNTHAX Storybook (Chrome or Edge required)

The first story is the Introduction that gives more info on the how and whys.

There are a bunch of stories and even a playable mini-game called Target Practice, give it a try and let me know your highest score!

Enemies start with secondary weapon
After 10 kills they switch to primary weapon
After 20 kills they get 50% more health
After 30 kills a second enemy spawns with a chainsaw

Good luck!

Make sure to join the discord server to stay in touch! SYNTHAX Discord Server

Thanks for reading and have fun!

A little backstory, feel free to skip this.

In 2018 I started a little side project, with no goal, no vision and no expectations - I just knew I wanted to make something resembling a game, using the tools I am very familiar with - TypeScript, Node, React and the web browser. After a few hours of research I downloaded the BabylonJS engine and started tinkering. Days and weeks have passed and something started to shape. That something took a form of a 3rd person view (but from the top) battle royale, then went through a multiplayer arena shooter phase, now I want it to be a single player with rouge-like elements. It's called SYNTHAX and it's my most favourite thing to work on, even if it's so damn challenging.