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.
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
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
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.