Version française par ici !

JS13K  is a contest organized every year, in which the goal is to create a game in a month on a defined theme with a huge challenge of not being bigger than 13ko once it is zipped.

This year’s theme was « offline ».

As far as time isn’t the challenge, like in almost every other game jam, contesters had to work harder and show ingenuity in order to save space.

Before reading about how to game was made, you can start by playing it here :

http://js13kgames.com/entries/alone-in-darkness

Here is some gameplay on video and github repo for sources.

With this game, I ended 130 out of 274 other participants. I’m in the first part of the ranking, but still disappointed, for the hard work I did on finding some mechanics adapted to the theme. I aimed at least top 100, but will do better next year.

I think that the mechanics lacked of readability on the UX part (one of the members of the jury did not find the right spot to get some network signal). I don’t know if the other steps have been tested as far as I only had the feedback of one of the members of the jury yet.

Drafting

I took the lead this year by preparing a boilerplate to start quickly and to be able to give better optimization to the compiled code. It is derived from an Adfab gulp boilerplate to compile the sass, reduce the sources… with some added tasks to regroup them into a single file (with, for inline, the JS and CSS), zip the result, and note down its size to know how it goes so far.

Then i added a task to replace words to save the space that the class names and elements filled in the HTML/CSS/JS.

The contest started on august 13th, and one the 15th is a public holiday, we spent three days brainstorming on an original idea.

One of the ideas was to create a new kind of Flappy Bird, with a red line not to cross. Another was to be in a house, and have to disconnect defined devices.

But the idea that pleased us the most was to find some network signal with a phone, to send a message, with a survival horror inspiration.

To begin with, I wanted to get inspired by Epicstory, to get rid of the monsters, and we quickly decided that the phone had to be part of the HUD. It would be placed aside, not really into the game.

Features

To get into the details of what composes the game, we have :

• A phone (in CSS) that has several apps, with their icons is CSS too :
  • Health : to indicate the state of the sprint’s gauge
  • Torch : to light further
  • Camera : To flash, and enlighten briefly the map in order to detect the shadows
  • Notes : not to forget the objective
  • Settings : to remind us of the control keys
  • Music : To display a text reminding us that without network, there’s no music
  • Signal : 5 bars to find network signal
  • Keyboard : to send the message
  • Compass : to find the stage’s exit

• A character who can :
  • Move in 8 different directions
  • Sprint
  • Illuminate the map with more or less range using the torch or camera flash
• A one level map with different rooms and walls, and a collision (between the character and the walls) management tool
• Shadows following the character when they are illuminated

🕹The game is composed of 3 phases :

• Finding a spot where the network signal is good enough to send a message
• Copying a text to warn the world about our situation when the network signal is still active
• Finding the way out

And we do it again, until the entire message has been sent.

Logbook

Being a true fan of what is made with pure CSS, like A single div, and knowing that the images would take too much space for this kind of contest, I found a model of phone that was perfectly adapted.

The phone’s design, including the compass and the apps do not even represent 2ko of the game.

That was one of the things I wanted to make sure of : having the majority of the graphic assets to make sure to save more space for the code.

The character’s traveling movements management is very basic, with one more key to sprint.

Normally in platform games, the camera is place ahead of the character, to help us in the discovering of the environment. But with the idea of making a game based on a survival mode, with a crazy map, the character moves freely and the camera only follows him when he approaches the obstacles, in order to avoid players to anticipate them.

For the collisions’ mechanic, I used an algorithm that i created for a project that permitted to detect very precisely a collision with a determined color.

The idea is simple : we draw the map, then we extract the pixel’s list from the canvas where the character is. If this zone contains the determined color pixel(s) of a wall, a collision happens.

Unfortunately, I had some issues to manage, mostly when the character runs diagonally to a corner of a room, to avoid him from crossing the limit and create the collision.

I also added a moving of the lamp in the character’s direction, with a slight delay for more realism, that allows to move the lights, even when the characters stops.

For the map’s design, I started with two rectangles, more than enough to check the mechanics of moving, light, or collision.

The light management  in ray casting is mainly inspired from this algorithm : https://ncase.me/sight-and-light/.

I re-thought its behavior to handle a series of segments, and not segment by segment to lighten the calculations that became very space costly with the increasing number of polygons.

I did some optimizations not to handle the rooms that were too far away, but if the hallway was long enough, I had to leave a wide enough zone, not forgetting to spot the shadows by using the flashlight.

At the end, this algorithm could be optimized again, but the results brought by this one are good enough for this game.

The next priority was to add the first app to turn the torch on, and see further.

Before working on the « looking for network signal » step, I revised the map, to get one that would be nice to explore.

First, the goal was to make a procedural map, randomly built, but time decided for me : the map was to remain static.

To find the network signal, I thought of the compass app, but another colleague advised me to go with the signal bars that indicate signal’s strength. The design and the results worked better.

Then, I add a blinking effect to express rather the signal was strong or weak, for some of the testers did not get the signal mechanic, not visible enough.

The blinking did re-focus the players’ eyes to this mechanic, enhancing the understanding of the game.

The typing text point, meaning knowing if it was simple and reactive to type a text, was an easy feature to create, and an effective one.

A colleague working with me at Adfab advised me to create a display of the letters that disappear once they are typed. And once we type on the keyboard, we have a visual feedback on the phone’s keys of the HUD.

I kept the compass for the « finding the way out » step, after the sending of the message. The whole compass is pure CSS. Its’ angle is computed between player position and floor exit, plus a delta from CSS animation on needle.

I spent few hours designing the character, seen from above in order to replace the red spot. I even added the shoulders, that move more or less quickly rather he walks or sprints.

The shadows’ mechanic came later on, for it was not properly thought at the beginning:

• They could rather walk slowly and faster when the light was on, like being attracted by it
• Or walk fast, and being dazzled everytime the light was on next to them

Those two options let people think that the game was in a dim light to see where the shadows were, but I preferred it to be in complete darkness. Noticing the fact that following the contrast and brightness of the screens, a dim light is hard to manage.

After all, I did what needed to be done to make the shadows follow the character once they enter the light part of the screen, and leave him alone once they get out of it.

They move fast enough to get to the character when he walks, but they are out-distanced by the sprint.

One of the ideas of the game is that the character can activate his torch, but has to deactivate it quickly not to bother a shadow.

The shadow once detected stays visible with two points representing its eyes, so that the player can stay careful about the path he choses.

Once the player is detected, there’s still a one second delay before the shadow starts to move. It allows the character to go near a shadow without being killed immediately, and get some time to react.

The flashlight mechanic of the camera was thought at the very beginning. It had first to broaden the lighted zone, and stop / kill the shadows. I finally found the idea of only revealing their position. The player doesn’t have the option of killing them, but just to stay safe and survive.

Then the designing of the shadows followed. I had to give them a more readable appearance, and ghostly shape, to make people understand that they can go through the walls. Keeping the challenge of 13ko in mind, pathfinding would have been a hard mechanic to implement.

The last mechanic to create was the gauges’ one, in order to give some limits to the use of srpint, flashlight or camera. It took a few days to perfectly manage  the level design, and handle those features.

Despite the great ideas that my colleagues gave me at the end, I wanted to focus in delivering a game that has no bug. I still took some time to create a « to do list » to remind players of the objectives, that I designed into the « Notes » skin that we find on iPhones.

Every app icon is in CSS :

• 2 circles and a re-oriented square to create the heart
• A triangle and two rectangles in box shadow for the light
• Boxes with a circle in the middle for the camera
• a series of backgrounds gradients for the Notes
• Two x with a circle in the middle for the settings
• An ascii character for the music

As far as the game is played in darkness, it was hard to memorize the map. So in order to simulate other levels, i wanted to create a rotation of the map. To do this, I unfortunately had to review every calculation for the position of each room, the shadows in every one of them, so I gave up.

I added the « Settings » app to remind the player of the control keys, and one Music app, that was meant for activating and deactivating the music.

It quickly occurred that a survival horror game with an 8 bits music would have been weird, so this button turned out to be the trigger for a message reminding us that music isn’t available offline. It was coherent with the theme, and easily justified its absence into the game…

And, between you and me, music would have make the game go over 13k ! 😅