Ned Snow: A WebVR game under 13kB
Tags: webxr, aframe, games, js13k
Published: 2020-09-18 18:05:48

Hi there! This is the first of a series of articles about how I made Ned Snow, a stealth WebVR game about infiltrating a prison guarded by robots. I made Ned Snow in a month for the js13k competition, a game jam for web developers to make javascript games under 13kB.

Before continue with the article I strongly recommend you play the game here: http://js13kgames.com/entries/ned-snow because at the end of the article you will find some spoilers and Easter eggs.

## Game Design

In this article I won't dive into programming, instead I'll focus on design, arguably the most important part of game creation. I'll lay out what design decisions did I take and why, and how they affected the final result.

When I started to think ideas for the game, the first thing that came to mind was a shooter, but shooters are really common so I pushed that idea out of my mind and kept thinking... thinking about what VR brings into the table: immersion, scale, the ability to perform physical actions like grabbing, throwing, crouching, leaning, etc. In the end I had two ideas, a cards game like Yu-Gi-Oh, or a stealth game inspired by a fragment of the game INSIDE (image below). I actually played the game again just to reach that part and capture the feeling of it.

![Inspiration](https://dev-to-uploads.s3.amazonaws.com/i/mnqdp6q763q19toi8xx5.jpg)

When the theme was announced as "404 Not Found". I went with the stealth idea, I enjoyed the aspect of crouching and hiding, sticking out your head to assess the terrain and go back to hide.

There were many factors that determined design aspects of the game apart from the limited size. 

### The game had to work on PCs and phones

VR headsets are not cheap, specially in South America, they are a luxury, not a necessity. Besides I wanted to share the game with my friends, but none of them own a VR device.

The web is universal, and platform agnostic, it makes sense that web games share those same attributes. I didn't want people to lose the opportunity to play just because they didn't have a headset. It was important to define this from the beginning because as you will see, supporting a new platform requires a good amount of work.

### Designing Movement

Movement in VR can easily produce motion sickness, because you see yourself moving through space but in real life you are standing in one spot. Of course I didn't want anybody to feel sick because of my game, so I settled with a teleport movement. Teleport came with its own issue, if you teleport immediately it will be really confusing, that's why I added a small blink just like in [Half Life Alyx](https://www.youtube.com/watch?v=TX58AbJq-xo)

![Blink teleport](https://dev-to-uploads.s3.amazonaws.com/i/94pu0qn9po4u0a6ny5go.gif)

But the movement chapter doesn't end here, because I had to actually design two movement systems! One for VR and another for PCs.

Properly supporting a platform requires supporting its input methods, for VR is a controller, for mobile is gyroscope and screen touches, and for desktop is mouse and keyboard. So I implemented a WASD standard movement and SPACE to crouch, as I wanted to make crouch a primary action in the game. This led me to write my own collision system so players couldn't pass through walls. In the end supporting different platforms helped me discover more bugs and made the game better.

### Aesthetics
Ned Snow is a dark game where you move in the shadows. 13kB makes you really creative about how to manage game assets, I decide to create everything from code, so I went for a low poly style (easy to describe in a few lines of code). The robot is made of three shapes and the level are boxes joined into one geometry.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c19o19g4abjkha0er8nh.png)

Textures (along with audio) were one of these things that instantly improve the game once I added them. All textures were created using the Canvas API.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tig0a0yen75s2fhzq6t2.png)

### Audio
Same as 3D models and textures, audio had to be created through code, there are [some small libraries](https://js13kgames.github.io/resources/) I could use, but most of them produce 8 bit sounds, and retro didn't really fit the theme of Ned Snow. I joined forces with my good friend [Sergio](https://github.com/SergioDiaz90) who helped me synthesize the sound of a Piano, we created a basic sequencer inspired by [TinyMusic](https://github.com/kevincennis/TinyMusic) and Sergio took care of creating a tense background music which made a huge difference reinforcing the experience. He created 3 melodies and every level the game picks up randomly one of them, changes are you didn't even notice. Good design is the one that you don't notice.

### Story
I love storytelling, to capture someone in a world and let him discover slowly where he is, what happened before and why is he doing what he is doing. I chose to expose information through terminals in big screens across the map, because that way it feels like the it is part of the world, I didn't want floating UIs that could break immersion and didn't fit the theme.

![In world UI](https://dev-to-uploads.s3.amazonaws.com/i/qigf5vmomh2ugdkn4ot1.png)

I also added some Easter eggs related to the theme:
- The prison has the name of Facility 502. **502** is the response code for Bad Gateway, meaning you are in a bad place.
- **409** is the code for Conflict, in the game people are imprisoned  for violating law 409, a law that punished those who protest and speak up. 
- Coil members had access to the diary of subject **406**. The diary notes talked about ways in which technology was abused, misused and ultimately led to a dystopia. 406 is the code for Non Acceptable. 
- Ned Snow is actually an anagram for [Snowden](https://www.amazon.com/Permanent-Record-Edward-Snowden/dp/1250237238).

### Web monetization

Finally I also wanted to try the web monetization API, after all the work I put in here it would feel good to earn some money. When monetizing a game is really important to avoid the pay to win strategy, because is the faster way to kill a game. Instead, [Coil](https://coil.com/about) members had access to more content, through pages from the diary of subject 406. I was inspired by the Portal 2 comic which doesn't affect the game in any way, but gives you a story to enjoy. And at the end of the game Coil members had a different ending were they did not only liberated Ned Snow but also all other prisoners of Facility 502.

For those of you who are not Coil members, I know you want to read the rest of the story, so as a reward for sticking to the end here is the transcript:

```
Notes from the diary of subject 406. 1/3
TRANSITION TO TECHNOCRACY.
After it was evident that humans were unreliable
when holding power we tried to move slowly towards
a technocracy.

It seemed like a good idea, an unbiased AI
aiding the government to take decisions.
But machines suffered from the same sins 
of their creators. Soon we had a tech-tyranny.
```

```
Notes from the diary of subject 406. 2/3
INTERFACING OUR BRAINS WITH MACHINES
It was like a miracle. We were able to cure alzheimer
and other brain problems.
We should have stopped there. But we opened our minds
And when law 409 went to action, even our thoughts
made us criminals.
```

```
Notes from the diary of subject 406. 3/3
"If you want a picture of the future, imagine 
a boot stamping on a human face, forever.
The moral to be drawn from this dangerous nightmare
situation is a simple one: 
Don't let it happen. It depends on you."

-George Orwell about his book 1984.
```

Thanks for reading. I will post another article diving into programming and more technical stuff. So [follow me](https://twitter.com/Juankz_) if you want.