A look behind the scenes at the creation of this year's Fallen London advent calendar from developer Sam! We hope you enjoyed your gifts. Follow Sam Partridge on twitter.

DECK THE HALLS

Hi everyone! Sam the Dev here, the newest Failbetter acquisition.

This December, we rolled out the Fallen London advent calendar, our all-carolling, ultra-festive interactive page to celebrate Christmas in Fallen London. (If you've managed to miss it until now, there will be a few windows open after Christmas, but they close after five days! - Ed)

I’ve been reading what you’ve all been saying (and discovering) about the calendar, and I’m personally humbled by the enthusiasm and joy it’s brought throughout the Neath!

The idea originally came from Alexis:

Normally we do codes propagated via social media. What if this year we did a web page devoted to an advent calendar with little doors, behind each a piece of art, a text teaser and a code?

We’re always keen on rewarding players and bringing a little wonder. I’ve got a background in JavaScript, HTML and being generally overly excited for Christmas, so took the lead on it.

First thing I made was a basic test case for how it would look:

(Featuring Bonus Javert.)

This was very basic but it laid down the foundations for what was and wasn’t possible.

The original concept would have had players clicking to zoom in on windows – this was unfortunately dropped due to usability issues and time constraints. (Janne Aukia’s zoomooz Jquery plug-in is a great example of what we were looking to do; have a play with it and feel your brain melt as it does pure zooming magic.)

I also wanted to animate falling Neath-'snow' flakes, but this sadly wasn’t possible as it wasn’t just slowing down browsers, but encasing them in concrete before pushing them off the edge of piers. The not-quite-snow still made its appearance but in a more static, stable form.

With those boundaries in place, we settled on how it looks today. Here it is on the 15th of December:

Every day at noon GMT the door of the day became available to open, behind which an image sat. Anyone could click this to find a snippet of narrative, then sign in and receive an in-game gift. This means anyone could visit the advent calendar, even if they’re not signed into the game, and all were welcome to it.

Doors for previous days opened automatically, and all gifts were available for five days before they expired. Doors of expired days were also grayed out on the calendar. Unlike a real calendar, you couldn't cheat and open the doors before the actual day.

Finally, the calendar is full of secrets... Have an explore and see what you can find!

BEARING GIFTS WE TRAVEL AFAR

The full stack of the Advent Calendar looks like this:

Each door is a Database row, containing height, width, position and other vital information. We grab these doors and parse them server side.
Future door locations are mapped out but nothing else is added.
Today’s door is a special ‘Openable’ door
Previous doors are ‘Opened’ doors and doors previous to five days are ‘Expired’ doors.

We pass these new collections of doors down to the Client side browser, where a beasty JavaScript function turns them into objects, then renders them on the page.

And hey presto! We have our doors. Clicking on an unopened door applies a CSS class, telling the door to transition to an open position; all opened doors are created with the class intact. Code reusability for the win.

Next, we added some cosmetics:

Glowing lights – They work on a revolving css opacity transform basis. Used a random start to make them fall out of synch. Watch them for long enough and they become very hypnotic.
Snow – Each week of advent will increase the amount of falling so-called snow over the city. This is worked out by the days coming in and revealing/hiding background images. A neat fade in animation ensures it’s not too sudden.

SWEET SINGING IN THE CHOIR

Technical talk over. So far, you’d be forgiven for thinking this one was a one man Festive Silver Band; The Advent Calendar was very much the creation of several lovely individuals:

Our analyst Adam created the access code gifts for all our players, with Alexis, Chris and content intern Petter Vilburg.

Ben interned with us and proved himself a real all-rounder. He plotted each of the doors over the background image, making sure they’d be generated correctly on your screen. Check out Ben’s website and portfolio.

Paul, our co-founder, Artist and Chief Wine Muller put together all in-game icona used, and created a special background image just for the calendar. His work was grand and his patience with my endless requests was even grander.

Hannah, our Communications Director, shouted from the rooftop about the advent calendar and was a champion of it from the start; a huge thanks to her.

Finally Stephen! Stephen is a member of the community who emailed in noted vital bugs that allowed for a number of fixes. Thanks for his, and all of your feedback!

In retrospect, despite having to make a big number of changes in the first week and the project ending up much, much larger than originally attempted, it went wonderfully. The set-up is secure, reusable but most of all fun!

If you have any questions, queries or problems about the advent calendar send them to support@failbettergames.com – I’ll be happy to answer (in the new year!). In the meantime, a Merry Christmas to all, and to all a goodnight…