Misfits

For the past few weeks I’ve been hidden away, typing furiously to create part of the “Misfits Online Experience”, which you can, er, experience, by visiting E4 and clicking the “Play” button. It’s to promote a new comedy drama (“ASBOs with superpowers”) starting shortly.

This mini-site/game was developed with Six To Start and they’ve written more about the rest of the Experience’s social media escapades. The game creates a way to explore the world of the show, get to know the characters and the locations, and reveal video, audio, and ways into the characters’ Twitter feeds, Facebook pages, etc.

There’s a zoomy, scrolly, explore-y scene and, if you find everything hidden within it, a more lively clicky, shooty, score-y pointy game with a bonus video if you do well enough. Every week a new scene and game will appear.

It’s been a challenging project but, eventually, very satisfying technically. I’ve been responsible for all of the coding, with a PHP back-end (that doesn’t need to do a great deal) and an enormous amount of JavaScript at the front. I’ve learned a lot.

The zoomy, scrolly scenes are created using OpenLayers, the open source mapping engine. It’s extremely flexible and powerful, although that means it can be a struggle to work out how to achieve the thing you want to achieve that no one else has achieved before. Time allowing, I’ll write up some of the things that took me a while to piece together.

We’ve also added the ability to log in through Facebook Connect, which not only lets you tell everyone you know what you scored, but also allows you to save your progress and retrieve it next time you visit. Which is very nice. Although making sense of the unorganised morass that is Facebook’s developer documentation, and keeping up with the shifting sands of their platform, is not the most pleasant of web development experiences.