Storybook As A Game Development Tool (With Demo)
Tags: storybook, typescript, gamedev, programming
Published: 2022-08-15 14:13:53

## 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](https://develop--62f6421c021f127287edd8fb.chromatic.com/) (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.

![Simple mesh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpujhi7vypuaj7pgjxrb.gif)

![Player running animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynen6m4gps8jjidzqedc.gif)

![Testing door functionality](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5u5m1avnk09p2qm62imm.gif)

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

![Fully build map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5ap7wy3yuxj3krg2psd.gif)

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

![Toggling walls, floors and wire-framing on / off](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iapn232j38fwlnkuj4d0.gif)

![Changing video settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nqc28nwrcwbwsmnn1ii.gif)

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

![Controllable character added to scene](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7z8go3op3gd82iy1i9ml.gif)

- Screenshot testing of all stories thanks to Chromatic

![Chromatic screenshot test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yj89upnv406zwsy4tir.png)

### The Playable Demo
 
Like what you're seeing? Well, you can try it too! Here is the link to the Storybook: [SYNTHAX Storybook](https://develop--62f6421c021f127287edd8fb.chromatic.com/) (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!

![Target practice mini game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7eu1p1udis12dlmyaxv.gif)

- 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](https://discord.gg/gR6MEtFaWW) 

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.