Three Updates: New User Interface!

This is the second in a series of three posts about The “Should Have Been Three Updates” Update, which, as you can probably tell from the name, was really too big for a single update. The first post is about the new fancy version of the Veranda level. This post is about the new user interface we’re moving towards. The final post will be about the five new characters.

I don’t really have hard data on this point, but I think people may make more fun of how ugly the original SpyParty User Interface is than the original in-game character and level graphics!

beforeafter

You can drag the handle in this image to compare the versions!

We’ve been working on a redesign of the UI—well, okay, a design of the UI because the original one wasn’t really designed so much as accumulated—for a while now, and it’s finally starting to find its way into the game you can download and play.

The goal behind the new UI is to make SpyParty look like an actual professionally made video game that’s pleasant to look at and for which you might want to pay money. I mean, of course the UI should be easy to use for new players, not get in the way of elite players, and still provide a lot of customization options for exploring the space of the game design, but let’s not discount the importance of just simply not being butt-ugly.

Here’s a small gallery of images from the new UI:

I originally revealed the in-progress new UI back in June, 2016, in a stream on the SpyParty twitch channel (and I archived it on the YouTube channel and embedded the video below), but the first time anybody besides me could actually get their hands on it was at PAX 2016. Because we use console controllers at PAX,1 I had to not only get all the UI implemented, but all the focus handling and controller navigation stuff had to work as well.

PAX went off pretty well, finding us lots of bugs and awkward things about the new UI’s usability, and we were able to iterate a bit before finally releasing the first version of it into the wild at the end of October, 2016.

Once the build was in beta players’s hands, they found many more issues. PAX is a good testing ground for whether something works at all, since you get a lot of slightly-random quick testing, but if you want to find out if a feature works well, especially for advanced play, people need to spend quality time with it and use it in anger.

One For The Price of Two

When I first started planning to implement the new UI, I looked around at a lot of libraries and products but I ultimately decided to implement it completely from scratch in C++ directly into the SpyParty codebase. I looked at doing it in HTML with many different technologies, I looked at doing it in Flash,2 I looked at custom solutions—I looked at just about everything. In the end, given the level of control, customization, flexibility, and performance I wanted, it made sense for me to just type it in.

Most of this typing was pretty straightforward, and from the beginning I tried to integrate all the fades and animation and sound effects into the controls so it was at least somewhat “real” and I didn’t have to go back and change major things. We did pretty thorough mockups, but of course, until people actually try to use things it’s really hard to know what works and what doesn’t, especially with something as finicky as user interfaces.

The game setup flow is one of the more complicated areas of the game, and I wanted to add a lot more flexibility and customization options in the future, so it was only going to get worse. I’ve actually blogged at length about some of the design challenges in previous iterations of the game setup flow, but those all felt temporary and I really wanted to nail it this time.

Because SpyParty is a competitive multiplayer game, the UI has to do double-duty: it has to be accessible to new players who just bought the game, and it has to be efficient for experienced players who are starting their two-thousandth game. Designing UI is hard enough for either one of those players, but trying to please both of those people at the same time is really hard, and the game setup screen is where these two types of players will be spending a lot of their non-in-game UI time.

So, we punted.

Or, at least we tried to punt. I figured a lot of the time people would just want to get into a game quickly, and having a randomly picked level with a balanced game type would be good enough. We codified this into the idea of QuickPlays, which are descriptions of maps and mission loadouts that are balanced according to the current meta, and then we made a QuickPlay setup screen that would just pick from these with only a few options. Then we also made an Advanced screen that had all the knobs on it, letting players fully customize each game. Here are the two screens we came up with:

QuickPlay Game Setup Screen

Advanced Game Setup Screen

The Advanced screen had this amazing level selection control I wrote based on a control from the Call of Duty Black Ops 3 Specialists selection. You can check it out in this TotalBiscuit YouTube video. I improved upon it greatly3 by making it silky smooth with no pops and nice ease curves everywhere, and, well, I was very proud of it and I don’t even want to know how long I spent working on it…

My precious…

Things started to fall apart when it became clear people wanted to be able to choose their level on the QuickPlay screen; the screen was just a hair too simple without that. I tried to figure out how to put some level selection in there, and did a bunch of mockups, some of which you can see here:

By this point, the QuickPlay screen was rapidly turning into the Advanced screen, and it was obvious it would be better if I could just figure out how to merge them completely.

There were three big features on the Advanced screen that needed to be merged:

  • the level selector
  • the mission and game settings panel
  • the cast selection widget

As they always say, you have to be willing to kill your babies, and the level selector was definitely my UI baby, but it needed to die. The full-bleed image with overlays on the QuickPlay screen was clearly superior design to the boxed and segmented layout of the Advanced screen, and I could not figure out how to do a full-bleed version of the level selector that wasn’t terrible, so I had to kill it. It had some other problems, like O(n) selection time, which is annoying even with acceleration, so the new widget for selecting the level at which we finally arrived has small icons you just click on and it changes directly to them. Still, I’ll always have a place in my heart for the funky slidey wacky level selector.

The mission and game settings panel could drop right into the QuickPlay screen with tabs behind the mission choices, so that was no big deal. The one subtle thing with this panel was I didn’t want beginners to even know the settings were there (you can now control all sorts of things that can mess up the balance of a game, like number of guests, which missions are prohibited, duration of the game, and more soon), so I extended the QuickPlay format the include groups, which is cool because now players can make their own for things like the SpyParty Competitive League allowed-map set, and then also “locked” groups, so the Beginner QuickPlay Group is locked and the missions or game settings simply aren’t editable and there is no tab for settings at all.

Finally, the cast selection widget—which allowed you to choose whether you were changing the Spy or the Double Agent or any of the other cast—was not pulling its weight, and having the current cast be modal felt bad anyway, and didn’t scale well to casting roles with multiple members, like the newly enabled ability to control exactly which Civilians were guests at the party. To fix this, I switched to a kind of Super Smash Bros drag-the-role-around UI, so I could just kill the widget completely, which feels much better and looks cleaner.

Here’s the finished4 version of the new merged game setup screen that will hopefully please all the people all the time:

I’m just sure this is the final UI and is perfect…

That thing at the top is called the “level icon selector” and it slides down when you’re near it or over the level information on the side:

It is juicy, but not as juicy as the old one…*sniff*

Miscellaneous Stuff

One thing you might have noticed in the gallery of new UI images at the top of this post is the Dossier screens. Right now, this is where the “practice preview” stuff went, where you can look at the mission tells from various angles and get information about the different Action Tests. This will be a big part of the deeper game eventually, including some crazy ideas partly inspired by Papers, Please.

Dossiers! Lots of placeholder stuff for now!

Another somewhat interesting anecdote about how important real testing is: during development of the new UI, I setup and sometimes played hundreds of fake games against myself to test for usability and bugs, but it wasn’t until the UI was released that I actually played a real match (against steph for her 5k birthday and 1 year anniversary!) and I immediately missed something that should have been obvious in retrospect.

Before this update, when a game would finish by either a shot or timeout or the Spy completing missions, the replay for the game would immediately load. It was anti-climactic, but the replay screen includes lots of interesting information, as you can see:

The replays screen isn’t going to get a new UI treatment for a while.

We aren’t going to redesign this screen for a while, and we wanted a cleaner and more dramatic results screen so there was a clear end to the game, so we designed this:

I should query the total number of civilians shot again…

It’s nice and clean and has some animation, and adds the overall score from the match. However, it is missing the highlights and lowlights, which are usually the first thing I’d look at! As a Spy, you want to know if you were highlit or lowlit to know how much suspicion you had on you, and as a Sniper you want to know whether you had the Spy as a suspect even if you shot the wrong person or they won via mission completion. With this new results screen you have to hit the Watch Replay button to find this out. So, I’ll be adding “lights” to this screen soon, and I think that’ll be the knee of the curve for game results information.

Finally, here’s the original new UI reveal video, which has lots of information on the development and shows some early mockups too:


  1. Keyboards and mice are more popular for PC players, but they’re a disaster at tradeshows, needing more space and being less reliable. []
  2. Which would have been handy since John prototyped it in Flash. []
  3. in my opinion []
  4. hah. []

Three Updates: New Art Veranda!

This is the first in a series of three posts about The “Should Have Been Three Updates” Update, which, as you can probably tell from the name, was really too big for a single update. This post is about the new fancy version of the Veranda level. The next post will be about the new user interface we’re moving towards. The final post will be about the five new characters.

We have updated the Veranda level to the new art style! Check out the difference with the fancy draggy slidery image comparer:

beforeafter

You can drag the handle in this image to compare the versions!

Until relatively recently,1 we had the beta-tester-beloved classic “old art maps” (Balcony, Ballroom, Courtyard 1 & 2, Gallery, Panopticon, and Veranda), and the totally separate fancy “new art maps” (Modern & Double Modern, High-rise, and Pub) done in the new environment art style. The old art maps were all tuned and balanced for competitive play, and—equally important—people were used to them, but the new art maps hadn’t been battle-tested to the same extent, and players were still figuring out how the new art characters and maps worked for competitive play.

Of course, everybody knew the old art’s days were numbered, since SpyParty is going to eventually look like a real professional quality video game™, and that meant we’d have to start doing new art versions of all the existing old art maps. We finally bit the bullet and converted the original level, Ballroom, and that worked out pretty well…it played pretty similarly to the old art version, and after a bit of tuning it was accepted into the competitive pantheon.

Well, now we’ve gone and done Veranda.

It didn’t go quite as smoothly as Ballroom.

First off, the Veranda level itself is a lot more complicated than Ballroom. When making maps for SpyParty, we’ve been trying to explore the level design space, meaning we think about the various characteristics that make up how a level plays, so obvious things like the level’s shape, but also sight lines, how much occlusion there is and what kind of occlusion it is, and more. Ballroom was basically a box with windows on two sides. Some things were easier to see from some angles, of course, but you could basically see the entire map from any Sniper position. It primarily had “dynamic occlusion” from characters walking around at the party.

For Veranda, I wanted to make a big level where the Sniper couldn’t see the whole playable area at the same time due to the intrinsic shape of the map.

A hastily created map of Veranda’s layout.

As you can see, the green and red bookshelves are on one side, and the blue bookshelf is on the other side, with the center protrusion blocking the view from either side. Veranda has gone through some iteration since it was introduced way back in 2011, but the core “static occlusion” concept it was exploring stayed the same.

We’ll come back to whether it was a successful exploration of this design concept a little later in this post, but one thing we’ve learned is that converting old art maps to new art is made more challenging because we have to work within the often-poorly-thought-out layout that I initially threw down for prototyping, where I was not thinking about whether this was a building that could exist in the real world, I was just trying to make an interesting video game level. Sadly, that’s not enough when the fidelity of the art is cranked up. In other words, we want to keep the finely tuned gameplay the same as the original map—or at least try to hit it as close as possible—so we want to keep all the shapes in the level the same, but that means we have to work with my original proportions, even if they didn’t make much architectural sense.

I definitely had sipping Mint Juleps on a Southern Colonial mansion veranda in mind when doing the original version, but my scales were all over the place, and that center occlusion area makes basically no sense in a real building, so we had to improvise.

First, we always look for reference images. We relatively quickly found a bunch of amazing Southern Colonial buildings with verandas, but The Governor’s House Inn in Charleston stood out as particularly inspiring, plus we accidentally discovered by a misclick that you can walk around and even into the building on Google Maps!

The Governor’s House Inn in Charleston

Then we tried to figure out how to get the shapes right, not to mention explain why there would be bookcases on an outdoor veranda. Books and Atlantic hurricanes don’t mix very well.

We decided to take a cue from the Governor’s House Inn, which has a remodeled section on the right, and we enclosed the left side into a sunroom library, and then had the right side of the level be actually inside the second floor on a landing, and the veranda keeps wrapping around the house but is blocked off for guests (and is lit accordingly).

The new art Veranda layout.

Here’s another fancy slider so you can see the view on the right side of the level…

before after

You can drag the handle in this image to compare the versions!

One kind of funny minor issue we had was the front window, near where the security guard stood, allowed the Sniper to see one of the interior statues, so we had to move the clock a bit forward.

I may have referred to this as “clock blocking”. Maybe.

Another issue with the earlier tests of the new Veranda was I had the Sniper camera too high, which we didn’t notice during development or in the chaos of testing a PAX, but once the level was released and people started playing it in earnest it became clear the Sniper had a commanding view of the party and too much of an advantage. As krazycaley said in the forums, “This is IMMENSELY important for filthy campers2 – it is FAR easier to guard statues on New Veranda than it was on Old Veranda.”

Sweet(er) Spot

Those problems and a few other minor issues were easily fixable, and beta testers report the level is working now, but there is a bigger problem that is not easily fixable and so is going to have to wait: the core design question the level is exploring is not being explored very well because there’s a “sweet spot” where the Sniper doesn’t have to move very much to see everything. And the new art version made it worse.

If you sit near the front-left of the level, you can see enough of the three bookshelves to catch Spies doing microfilm animations, and even though you can’t see the statues on the far right, you can trivially see anybody who goes there and so can check on the statue situation without moving too much.

To compound the problem, we changed the field-of-view of the Sniper camera between the Courtyard 1 and Courtyard 2 levels before we started doing new art levels, to make it look a bit less distorted and give the Sniper a better feeling of being outside and looking through a telephoto lens of some sort. This flattened the depth, which ends up magnifying stuff in the distance in a sense. This made looking at the bookshelves and the statues from the Veranda sweet spot even easier! You can see the difference in this comparison I made with the old art to make it easier to focus on the field-of-view difference:

before after

FOV Comparison.
You can drag the handle in this image to compare the versions!

To fix this I think we’re going to have to modify the level and put the blue bookshelf deeper inside the house, probably around the corner, thereby requiring the Sniper to move to check it.

As if that wasn’t enough Sniper buffs, there was a “wallhax” exploit in the old art Veranda which allowed the Spy to put their camera into the wall and the whole level would turn translucent, giving the Spy much better situational awareness of important things like whether a Double Agent is in a conversation, where the Ambassador is standing, and the like.

Not pretty. Useful, but not pretty.

I am not going to turn this on for the new art, just on principle. I want the new art to feel solid and even once we have a better graphical treatment for how walls go to translucent when the camera interpenetrates them, we’re not going to let the entire map go translucent like this.

To fix this one, I think I’m going to introduce a way for the Spy to pull out and see the entire level from the top as a 2D map with icons, kind of like the image farther up this post. This is all preliminary, but this could be an interesting Spy buff that allows us to put other information on the map view. We’ll let this simmers on the back burner in the old design pot for a while.

So, that’s the story of the new Veranda! If you’re in the beta, just load up the game and hit Play and the update will download and you can check it out. If you’re not in the beta yet and would like to be, head over to the order form and sign up!


  1. Well, “recently” relative to the absurdly long development of SpyParty. []
  2. krazycaley is of course the king of the filthy campers. []

Need Booth Helpers for Day of the Devs in SF, Saturday, Nov 5!

Hey, sorry for the late notice, but it looks like we’re going to be a bit shorthanded at Day of the Devs this Saturday, November 5th, and we could use some help!

dotd15logo

If you like SpyParty and are available from 1pm-10pm on Saturday in San Francisco (or a significant subset of that time block), please mail me at support at spyparty dot com and let me know a little about yourself. You’d be teaching people how to play the game, but it doesn’t matter if you’ve played before since we’ll teach you how to teach people. Obviously, if you have played SpyParty before that would be best, but it’s not crucial.

If you’re a booth helper you’ll get the immense satisfaction of introducing people to a video game, camaraderie, a free sore throat from talking too much, all the throat lozenges you can eat, a food truck dinner, and you’ll get a cool codecard with your choice of character, which also contains a free copy of the game (which you can gift to somebody if you already own it)!

So, shoot me a mail if you’re interested, thanks!

Teaser image for The “Should Have Been Three Updates” Update!

This build has taken forever and gotten about 3x too large, but here we go! Out next Thursday, October 27th!

teaser4

 

Playing All My League Makeup Matches Today in a Single Block!

I’m playing a bunch of SpyParty today, starting at 2:30pm US Pacific time and going until around 5:30pm, which means I start in 3 hours from me typing these words! I will livestream these games, internet-willing, at http://twitch.tv/spyparty.

I’ve posted about the SpyParty Competitive League before; it’s a really amazing ongoing competition organized and run by krazycaley with help from other community members.

Well, I’m in the Silver Division, and due to life and work craziness recently, I have a lot of makeup games to play, and through a miracle of scheduling, we are going to make them all up today in a single 3 hour block of SpyParty.

Here’s the schedule, which we probably won’t hit exactly, but is hopefully about right:

Time (US PDT) Opponent (makeup week)
2:30-3:30 lthummus (wks. 3 & 6)
3:30-4:00 fearfulferret (wk. 7)
4:00-4:30 sgnurf (wk. 8)
4:30-5:00 iceman (wk. 9)
5:00-5:30 elvisnake (wk. 10)

So, come watch the fate of Silver Division turn on a single stream. I should be warmed up by the end, maybe?