The many GUIs of Spacechem

I’ve been meaning to do a post about creating the graphics for the game Spacechem for quite some time now, but the time and energy it takes to generate coherent sentences has been quite rare as of late.  Also, I’m quite lazy.  However seeing as there’s a small resurgence of interest in the game since the recent “hat promotion” via Steam and TF2, I thought this would be an opportune time to finally talk about how Zach and I came to the GUI that we did.  The image above was the GUI of Spacechem as I first saw it.  Spacechem players will notice that for the most part, it is fully recognizable and it seems that very little changed between this and the final product.  As with most things however, that was not the case.

This was my first take at creating a new look for the GUI.  From the beginning Zach always stressed that he wanted verisimilitude.  He didn’t want players to feel like they were playing a game, but rather that they were actual reactor engineers working for spacechem.  He suggested I take a look at the forms that military engineers and artillery men use to use as inspiration, and this is what I came up with.  The marks on the sheet are what I imagined marker lines would look like when engineers would draw on them.

I forget the details, but the last image didn’t quite cut it, so I went off looking for inspiration somewhere else, this time from the famous Apple Lisa GUI.  My thought process was that this would help make the player feel like they were using some sort of computer console.  I think Zach particularly disliked this mockup, though again the reasons really escape me. Ultimately it wasn’t working out and I think we were both getting a little frustrated at this point.  Zach decided that the on-screen stuff, meaning the grid and input/output screen looked ok for now (ie as it looked in the original screen he sent me) and that maybe we should focus on the console first.

From the beginning the basic idea of this “reactor view” UI was that the player was looking at a console, or a computer screen that had buttons on the bottom that the player would manipulate.  This concept sketch fleshes out that idea and also explored some ways that the buttons on the console might look.  The setting of  Spacechem is in the same distant future imagined by science fiction writers in the middle of the 20th century.  I took my cue from them and the art deco designs they seemed to be inspired by.

This was the last mockup I made that utilized this art deco look.  Previous mockups were a little too gaudy  and Zach rightfully though that they didn’t look like they were designed for use in a scientific/engineering institute.  So I used airplane and space ship dashboards as my peg and combined it with with the art deco look to create a more “serious” looking console.  I think this was a pretty interesting look, but as I’ll relate later, this too was ultimately abandoned.

I remember Zach liking the last mockup but wanting to move on to the next thing, which was interfaces like windows and buttons for the main game.  I started by mocking up the windows you’d see on the title screen.  I forget where the inspiration for this came from, but Zach liked the first mockup (the one in blue on top) that used windows with the corners accented by little boxes so much that he decided…

…that they would look good in the “reactor view” as well!  At this point you can see that we’ve pretty much come full circle all the way back to the original screenshot that Zach sent me.  This is also very familiar to the final reactor view that Spacechem players either love/hate.  A lot of things happened prior to this.  We’d decided to make the “reactor view” the entire screen itself, and no longer use the analog of having a “console”.  Zach also felt that the original image he sent me was closer to what he wanted the screen to look like, which is why we went back to the almost uniform black screen seen here.  The hard, rectangular lines of this UI also mimicked the look of the reactor buildings, thereby giving the game a more unified look.  In this version of the UI you might notice that the greek symbols (alpha/beta/etc.) are outside the grid.  I think this helped reduce the clutter inside the grid area, but Zach felt it was more important that the grid be clearly labelled in order to avoid any confusion.

So there you have it, the creation of the UI that is the last thing countless players see before they start tearing their hair out in frustration while trying to solve Spacechem’s notoriously difficult puzzles!  It was interesting for me to go back and revisit some of the designs iterations that we went through.  Some elements of these GUIs will certainly make it into future games that I work on but the rest will be discarded as I cringe at how I hacked my way into making Spacechem’s UI.  Thanks for reading this far, and if you want to look at more of the concept work that went into Spacechem, please take a look at my portfolio!

Tags: ,

2 Comments to “The many GUIs of Spacechem”

  1. Pardon me if this isn’t the case, but you come across in this post as…well…slightly bitter. Rightly so, I might think! I guess this isn’t what you were going for in this post, but I’d be interested in seeing some sort of “what went wrong, what went right” commentary — if you’re interested in discussing that. The final product ended up looking like the original screenshot even after so many iterations; I’m wondering if there was just a failure to communicate? Was Zach only looking for subtle tweaks to his original design from the beginning? An insightful peek into SpaceChem’s design; hopefully your next project will be a little less frustrating.

  2. Reading it again, I can see how my wording might make it sound like I’m bitter, but I assure you that this is certainly not the case. I think that any artist that works on a creative endeavor will have frustrating moments and ideas that have to be discarded; especially if he’s working on someone else’s opus. It’s just part of the process. Even when I create illustrations on my own I’m learning that I can’t be too attached to a particular composition and need to be open to starting again from the ground up.

    As for communication, I think there were the usual downsides of any cross continental collaboration, but overall I don’t think that the communication was a problem. We were both looking at different ways to express the “reactor view”. Had we not gone through the prior iterations, Zach might not have realized that what he wanted was something closer to his original screenshot in the first place. I certainly didn’t feel misled in any way. 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: