Crypt

A Hollywood-hacking simulation game.

What is Crypt?

Crypt is a project in Game Design, Visual Design and Web Development. In collaboration with Robert Vinluan and Peter Kim as an independent study. The project began as an homage to one of my favorite games, Uplink by Introversion Software, redesigned for the modern player.

Crypt
The final version of Crypt.

In Uplink, you are a hacker making your way to the top by hacking increasingly complex targets in a ridiculous Hollywood-style fashion. It’s a classic game—unique, nostalgic, replayable, and deeply outdated. Crypt was our attempt to both revamp the visuals and UX of the original game, and to turn in into a full-fledged online mass-multiplayer game.

Uplink
Uplink, in which you hack into the International Academic Database, because that’s a thing.

Goals

The original game had out-dated visual design and frustrating interactions that were ill-suited for casual players. We intended to craft a sharp, contemporary visual design, create new, delightful interactions and interesting multiplayer gameplay. This turned out to be more work than we anticipated (which was a lesson in itself), so we narrowed our scope mid-project and set to complete a playable prototype of Crypt’s first mission.

Research

Our first step was replaying the original critically. We mapped out UX failures and wins and figured out what made the game fun.

Uplink
An excerpt from our notes on Uplink’s gameplay.

We then searched for was already out there. Many developers, enamored with Uplink, had created their own versions of the game. We went through every game we could find (about 8 in total) and took notes on what was and wasn’t working.

Uplink-inspired games
Many, many Uplink-inspired games.

Ideation & Game Design

We started our process with a brainstorm that would last a month and fill half of the living room with post-its. Slowly, but surely, the game became more concrete. We scoped out what we wanted Crypt to be and began drawing up potential user flows. We also began thinking about how to structure our system, both in terms of code and in terms of ours players’ mental models.

User Flows
A sketch of our system architecture and the universal user flow.

Our initial ideas for Crypt’s multiplayer aspect were especially ambitious, and an interesting excercise in game design. We wanted the player to always feel a sense of paranoia and impending doom. One of the ways we wanted to accomplish this was through what we called “Indirect Multiplayer.” The idea was that the player would interact with many other characters throughout the game, mainly by hacking them. Most of these would be NPCs (non-player characters). Some would be real people that but player would have no way of knowing. Since this was a hacking game, there would be a way of backtracing the initial hack and setting up traps for other players. These turned out to be rather novel concepts, especially the Indirect Multiplayer, and I’ve yet to see them in another game.

About a month went by and we had built a solid, thought out structure for an incredible game. Once we narrowed the scope of the project, we focused on the first mission, which would adhere to the user flows and models we’d been developing. The first mission would consist of these steps:

  1. Accept mission.
  2. Connect to server.
  3. Crack password.
  4. Steal file.
  5. Submit file for payment.
Crypt wireframes
Initial wireframes for the first couple of missions.
Wireframes for password cracking
Wireframes for logging into servers and cracking passwords. The idea was to have tabs in your browser that would turn into red progress bars as you were being traced.

Visual Design

When it was released in 2001, Uplink’s aesthetic was in line with the contemporary future interfaces. Today, rather than seeming futuristic or technological, it is a relic of the past. One of our main objectives was to make Crypt feel contemporary, on the bleeding edge, and visual design played a large part in that.

The theme of hollywood hacking embraces the ridiculous nature of cliche designs. I wanted the interface to breed paranoia and make you feel like a hacker. I went with a dark carbon pattern. The icons would be neon colors, evoking a sort of Blade Runner distopian future.

the launch bar
The launch bar.

My visual design process is iterative. I also don’t limit myself to making all the UX decisions beforehand. Visual design often informs UX, so if suddenly a button makes more sense somewhere else, I’ll move it there.

A time lapse of different iterations of the visual design.

Development

We had originally intended to build Crypt with backbone as a first step towards turning it into a full-fledged multiplayer game. In the end, we only had time to create a static first mission.

I worked on action bar, window styles and management, map UI and file systems, Peter worked on backbone and the password cracker, and Rob worked on the missions.

JQuery UI

JQuery UI, back in 2012, was an irritating library to work with. We chose it because it added draggable, resizable and stackable functionality that we needed. Coding this from scratch would have meant spending the entire semester fixing bugs with our code, so we settled for spending the entire semester fixing bugs with JQuery UI.

Once I managed to rangle it into submission, I built the windows as objects. In this system, adding new windows would be incredibly easy. It’s always important to think ahead in projects you abandon. Premature optimization is the root of all evil.

Long story short, I built the windows so that they could be moved around, stacked (there was a bug with the z-indexing that took ages to fix), and resized. This meant that every window’s contents would have to be designed to be fluid.

Raphael JS

We started out with a raster map, but when we decided that every window should be resizable—another premature optimization for when we’d have players who’d want to customize their interfaces—we had to code a map that was more dynamic.

This was my first time working with svg. I had a lot of Processing experience, so the learning curve wasn’ too difficult, but nonetheless it was not what I was used to dealing with in the context of web development. Once I got the hang of it, the map itself was relatively easy. Since the map was fluid, though, I had to set the node coordinates as percentages rather than numbers. This was fine for the nodes, but paths, for some reason, would not accept percentages.

You may have noticed from the rest of this portfolio that, for better or for worse, I almost never take the easy route. So obviously instead of accepting a perfectly fine MVP, I created a js function that would find the absolute X and Y positions of each node based on the current map size every time you clicked on one. This is the result.

When we were done, we were still under the impression that we would come back to this and create a full-fledged game. Here is a screencast I put together over 2 years ago, in which I make promises I won’t keep.

User Testing

At this point, the demo of the first mission was fully playable. Considering this was our first prototype, I wanted to test a few of our assumptions. I put together 10 simple user tests.

Users were picked out of the game’s target audience, in a spectrum between moderately technical and highly technical users.

I told them that Crypt was a hacking game, and gave them their task:

  1. Accept a mission.
  2. Complete the mission.

Everything else was up to them, including figuring out how to accept a mission.

Top issues

The test didn’t include nearly enough players to result in any conclusive lessons, but we did notice a few big issues that had eluded us previously. One of the main issues was that most players would not read even the tiny amount of text we had on the missions window. So, right away, I made this portfolio.

I put together a full report on the user tests, including insights and possible solutions. Click for the full report in stunning PDF format.

Play The Game

Check it out at joelcalifa.com/crypt

Why not try it out for yourself? The following game is playable.