Latest Tweet

Be The Thief

Posted by Alex on March 20, 2013

In one of our newest projects, the Thief of Thieves Experience (http://www.ie10bethethief.com), we were asked by Microsoft to use the new features of Internet Explorer 10 to build a native-app like experience based on the Skybound comic series, Thief of Thieves.

Overview

The overall experience we built leads the player through a few different stages. First they can create their own alias profile, complete with dossier and character creation area where they can choose a face and facial features, as well as draw directly on the image. After they have created their character they can work on their thievery skills by playing a few mini games based on safe-cracking, pick-pocketing and bomb arming. The culmination of all of this is a much larger game called The Heist. In this game the user has to sneak into a medical complex, turn off surveillance cameras, disable laser motion detectors, distract and hide from guards, and use all of the skills acquired in the training mini games.

Experience First, Technology Second

He's going to get you, Barbara!

Storytelling is a huge part of many highly interactive online experiences, and it certainly is here. So when it comes down to it the technology doesn’t matter if it doesn’t help us connect with the user. Advanced touchscreen capabilities in IE10 let us do things like have a safe dial that requires a few fingers to turn and giving them the tactile feedback of rotational momentum when they let go. We were able to simulate a pickpocketing experience by having the user test their dexterity and drag a hand through a maze and surprise them with a loud noise and comic punch in the face if they fail. Another game has the user connecting colored wires to arm a bomb and showing an explosion and hospital room scene if they fail. The goal of the technology in an experience like this is for it to become invisible. You want the experience to just work in a way that feels natural, and we pulled out all the stops to make sure that happened.

Experimenting with SVG

Since this experience is based on a comic book we wanted as much as possible to keep that art style and have it feel like it came right out of the comic. The best way to do that and keep the integrity of the art was to use vector art, utilizing the SVG format that’s supported in modern browsers. We gained a lot by using SVG. It allows the site to visually scale without losing any image fidelity, as well as automatically work on high pixel density displays, where the art gets even clearer. The other great thing about using SVG in a highly interactive context is that we can move and manipulate each individual shape on its own (again, with no loss in image quality). With SVG, click areas aren’t relegated to square hit areas, we can assign shapes to have only their fills or strokes clickable, as well as making the whole area clickable.

Some Security Pitfalls

There were some interesting areas of security that we had to think through on this particular project. One of the great things about working with SVG is that you can manipulate the imagery with nothing more than Javascript or modifying the markup itself. One of the security vulnerabilities to SVG becomes the fact that valid markup can also include potentially harmful code. The fact that in this project you can create a face built completely with SVG and then save it and share it with the world meant that we needed to go through all of the markup on the server side and scrub it clean to make sure that nothing harmful had been injected. It’s one thing to check form input for injection attacks, but scrubbing the SVG required a much more custom approach to make sure that the imagery remains unchanged after checking for, and removing anything that shouldn’t be allowed.

This project was a very cool opportunity to use the latest and greatest features the web has to offer, and helps show that we’re getting closer and closer to experiences on the web feeling just like, or even better than, a native application.

For a much deeper technical look at how we built the Thief of Thieves Experience, check out the Behind the Heist page here.