HUD Hacking v2.0

July 21, 2017

In recent weeks on Robyn HUD I’ve been working to get the game to a point where I can put it in front of people for play testing. It’s generally considered best to get feedback sooner rather than later. The tricky thing is getting a game to an advanced enough state that play testers can see past the rough edges to focus on the gameplay areas that are most important. One area where I knew there were enough rough edges to prevent that goal was in the hacking system of the game.

The Original Flavour

A shot from the original hacking prototype.

When I first developed the hacking system so I could play and test it myself I wasn’t too concerned with what it looked like. The hacking system, as shown above, is based around a series of tiles. Your little hack bots are represented by small triangles that can move over the white paths but are blocked by other tiles. The hack bots can pick up different attributes as they go along and some of those attributes allow them to move through tiles that would normally block them. The big problem with the prototype is that although I know what the different tiles mean the rough artwork doesn’t convey that meaning to others. For example, can you, faithful reader, tell what it means if a square is green versus maroon?

I knew that before I put a rough draft of Robyn HUD as a whole in front of people that I’d have to improve the look of the hacking system. I also knew how the hacking system worked mechanically and I knew the different types of tiles that were needed for it. What I didn’t know was how those tiles needed to look.

A Solid Appearance

One thing I absolutely had to address with the look of the prototype hacking system was its brightness. White paths make for a very bright screen, which leads into an interesting perception problem. In the overall Robyn HUD game you, the player, are helping to guide a thief through various locations to pull your heists. Most of these locations you enter at night when everyone has gone home. Consequently, the locations tend to be quite dark visually.

Now the thing is, when you have to hack something in game it doesn’t pause the rest of the action. You have to keep an eye (or video camera) on guards moving about that might catch the thief. The problem is, if you have a video camera showing a dark section of the location you’re in and you have a bright white hacking system on screen, then the glare from the bright white makes it hard to read the details of the dark location. I knew then that the final look of the hacking interface had to be much darker so that it wouldn’t cause glare that would drown out detail elsewhere in the game.

Grey and busy.

My first idea at refining the visual look of the hacking system was to take the tiles that I had in the prototype and start by darkening them. This gave me grey backgrounds that (a) worked much better in the context of the overall Robyn HUD game and (b) seemed to look a bit like metal to me.

Following from the metal idea, I then began reworking the tiles to have a caricatured industrial look. Traversable paths became a middle grey, impenetrable walls became solid looking metal slabs, and walls that could be bored through became…brown and yellow striping? I tried several minor variations on the various tiles, but I couldn’t find a look that properly cued the meanings of the tiles while feeling consistent across all the tiles.

A Blue Period

My next attempt took me away from the solid almost physical look. In addition to not being pleased with the individual tiles, I wasn’t completely sold on the grey background. The windows that the player interacts with in game are all dark grey as well to deal with the glare problems I mentioned earlier. I found that by making the predominant background colour of the hacking tile set grey that the maps blended in too well with the windows, making them look more like controls that could be interacted with rather than puzzles that needed to be solved.

At the same time, I wanted tiles that didn’t look like actual physical objects. I wanted something a little more abstract than that and something that felt a bit more like you were sending hack bots out across a network.

Cleaner but not quite there.

Out went the grey and the largely open areas of the earlier designs. In their place I brought in a dark blue background with narrower grey paths in it. This felt more in the right direction. The paths in particular made it much easier to tell at a glance where hack bots could go. It also made it easier to show “phantom paths”, that is paths made of dotted lines. I feel the phantom paths make it evident that a path can ultimately be formed there with the right tool but that initially those areas can’t be passed by normal hack bots.

Computer graphics typically deal with three colors: red, green, and blue. I had in fact used those colours in the first prototype. The idea being that certain obstacles can only be bypassed by hack bots that have been changed to certain colours.

With the background and paths changed, I then started working on the tool tiles. With those, I went down the path of using those red, green, and blue colours. However, I hit a snag. I very much wanted to use green and red to represent the start and end points respectively in the hack puzzles. But by putting red and green on specific tools it made it seem like the start and end points only applied to hack bots that had those colours. As well, I found that having a dark blue background didn’t have quite the visual distinction that it should from the blue tools.

Circuit Boards

Since red, green, and blue were causing me so many difficulties, I decided to “rebrand” the tool tiles and shifted them into a different colour system of cyan, magenta, and yellow. Suddenly, things seemed to pop. The tools stood out well from each other and from the start and end points. The one minor issue was that I felt both the cyan and the magenta were too close to the dark blue background.

Thinking about the look of old computer terminals, I tried putting a dark green background in instead of a blue background. That worked well as far as the tools were concerned, but now the paths themselves were a problem. The grey paths seemed to blend in a bit too much with the background and with any tools that didn’t have colours assigned to them. I shifted the paths themselves to be green and brightened them up a bit to where they stood out from background without causing glare on the rest of the screen. Finally, the look felt right.

The circuit board design.

There are a number of aspects with this design I really like.

• The tool tiles can be kept nice and simple and yet put their meaning across quite well.
• The CMYK colouring stands out well from the background and from other windows within the broader game while still feeling like part of the same aesthetic.
• The narrow paths and circular nodes feel more computer networky to me, which works well with the hacking idea.
• The predominantly green display feels a bit like an old, classic computer terminal.
• The combination of the green background, the nodes, and the paths also feels rather like a computer circuit board, like you were really getting into the internals of a computer.

Evolving Puzzles

One important side effect of the change in the hacking artwork was that it also changed how hacking puzzles need to be created. In the original prototype maps were much more open. If two path tiles existed side by side then the hack bots could cross from one to another as long as you could turn them in the appropriate direction.

The old version would allow horizontal movement here but not the new version.

By incorporating the narrow paths onto the tiles, it means that I can now put, for example, two vertical paths next to each other and the hack bots can’t directly move from one to the other. This allows for making more intricate puzzles while also allowing for those puzzles to be more compact because it’s no longer necessary to put an entire tile between two other tiles to make their paths separate.

On the flip side, it does mean that I have a lot more tiles to manage. Previously, there was one type of tile to represent a path. Now the paths might be dead ends, or straight through pieces, or elbows, or Ts, or crosses. All told there are now fifteen different path tiles instead of just one.

The Editor

The editor is just like the in game version.
Click to view larger.

With so many different types of tiles to manage the time was right to sit down and take a couple of days to build a map editor for the hacking puzzles. The editor is built with the exact same code base as the actual in game hacking system. This means that while a puzzle is being built it can be directly tested within the editor and will play exactly as it would play within Robyn HUD itself.

Conclusion

I’m quite pleased with the new look of the hacking system and the editor certainly makes building and testing the hacking puzzles much, much faster. Doubtless there will still be changes to the gameplay and quite possibly the look itself as I start to have people play test. However, I do feel like I can put the hacking system in front of people now and have them play it without me having to provide a lot of explanation.

Previous:   |   Next: