The js13kGames A-Frame game jam
It has been a while since I participated in an online game jam. A game jam is a competition to create a video game under given constrains in a limited time. I enjoyed those before. In my opinion they are the best when they last one or two weeks. That makes them easy to commit to and you can stay on track with most announcements.
When I read about the js13kGames Virtual Reality (VR) jam I was sold on first sight. I learned about this game jam on the Mozilla Hacks blog. The deadline was on 2017-09-13 11:00 UTC. With the given theme “lost” every participant was supposed to code a game using the web framework A-Frame. It allows for easy creation of Virtual Reality scenes and animations. The library is based on THREE.js, so it is using WebGl, which makes it run quite fast even on mobile devices. As further conditions every game for this game jam was not allowed to include any big, external libraries other than A-Frame and had to be no more than 13 kilobytes in gzipped size.
Day 1 & 2
I joined on the last week of this contest. After 10 minutes I came up with the idea of a goose being lost in a city, trying to find south. The player would take of and try to identify buildings and streets. As a fun gimmick the player would have access to a map which would have been to the gooses feet. While constantly flying the players would fly into the direction they are facing. So whenever the players would look down at the map, their goose would fly towards the ground, eventually plumbing to its death. The goal was it to fly south for 10 seconds or so.
I discussed my idea with Victoria and a coworker. Both were excited about the proposed game. I looked into ways of avoid a lucky win by randomly trying directions. Players were supposed to orient themselves using a map. The game would have been about being lost with access to a map. The map would have been a basic line drawing of all buildings and streets. It would not give away the building’s varying heights. Different crossings and dimensions would have been the clues to look out for in a monotonous surrounding.
Day 3 & 4
After the first days of figuring out ho to make it a game and not a watchable story good ideas were starting to come together:
- Players get an introduction. (alias “You are a goose!”)
- Players have to find a park for food.
- Players have to orient themselves and find south using the map.
- Players find a teleporting cloud in the south.
- Players fly along the night sky.
- In the morning, players land close to a tropical beach.
- Players see “WAKE UP” written on the horizon and the game fades to the intro scene in a different city.
All of a sudden, my idea became complicated and involved a lot of testing which is time-consuming in 3D environments. While enjoying my weekend outside I decided to work on those ideas in the order they would happen. I prioritised to avoid refactoring unfinished parts.
Day 5 - The last day of the game jam
On the last night I knew what I wanted the cloud level and the beach level to look like. The cloud level would be a blue sky with distant city lights underneath. The clouds would be dark but illuminated by big moon which would be there for orientation and to attract the players. To make it a game the players would have o fly through rings. It would have been a well understood game mechanic. The beach level would just be there for the looks and to come to a conclusion of this little VR adventure.
I quickly noticed that I imagined those last two level as graphic demos. They should show off what I could fit into 13 kilobytes. I considered them being optional and to add some length to the game.
An hour before I had to submit my game I took a look at the form to make sure I did not forget anything. It asked for some links and two screenshots. Back coding, I ran into some technical difficulties with transparency in A-Frame. You could only see other objects through the transparent clouds that had been created before the cloud had been inserted into the scene. Since the clouds would be inserted one after another you would find transparent clouds that did not allow you to see any other cloud. I tried to fix it while I should have worked on the broken transition between the city level and the cloud level. The beach level would not be included.
The conclusion
In the last ten minutes there was no map and no south. Players would search for the park without any hints, land and were stuck because of an error. I was not able to fix this in time and even submitted 13 seconds late as I got the security code of the submitting page wrong the first time. I was a bit let down by the fact that my game was broken. I even forgot to replace the local aframe library with the public one - as required by the game jam rules. However, I learned a lot about A-Frame and how far I was willing to go for this game jam. It was a short and fun experience, both in terms of technology and my own priorities. Thanks to js13kGames, Mozilla and all the sponsors for this awesome jam!
By now the cloud level is in a playable state, but lacking rings to fly through. To check it out, you do not need a VR headset. Just click on the link below and move the camera with your mouse (dragging).
- Fly South on js13kGames (breaks when landing in the park)
- Fly South on GitLab (includes bug fixes)