2014/07/14, 14:09 by checker

This post is a bit of an experiment. I want to show you some mockups of the new game setup user interface (UI), but I also want to try to figure out a bit of the UI I’m stuck on, and I figure explaining it clearly here in this post might either help me figure it out, or somebody like you will have a good idea and post it in the comments. It’s a win either way!

First, let’s look at the old (which is to say, current) game setup UI flow. When you’re in a match with another player, and want to start a new game, you have to choose a bunch of stuff, at least if you’re going to be the Spy. This giant image shows all the steps. If you’d like, you can open this image in another window if you want to see it at the same time as you read this text by clicking this handy link.

Going through these steps, the first two are easy: you pick to be the Spy and you pick the level. At this point, the game knows which game types and missions are available, because those vary by map.

Now the flow splits. If you are picking Any or Known game types, then you have to pick the “selected” missions for your game. For something like Any 3 of 5, this means you’re picking the 5 missions that will be selected for the Spy and known by the Sniper. If you choose Known 4, then you pick the 4 missions. It turns out, Known N is just a special case of Any M of N, where M equals N. This is important later. Once you pick the missions for Any or Known, you review them (which is an artifact of the current flow…remember, I’m not defending this, it’s just what we’ve got right now), and then you’re on to Casting.

Rewind back up, and if you choose Pick M of N, then you pick the N selected missions, but you also have to pick the M “picked” missions. These are the missions that you are going to try to accomplish, but the Sniper doesn’t know which M of the N you’re picking. I always think of picking as kind of like when Babe Ruth called his shot, except you’re doing it in secret as the Spy. Maybe you’re writing it on an envelope to be opened after the game. I’m not going to get into it much here, but Pick is much less popular than Any as a game type, which will be important below.

Finally, Casting is the same for all game types, and in the current implementation you scroll through the characters for each cast member you want to select. First you pick the Spy, then the Ambassador, then the Double Agent, etc. After you’ve cast the game, you wait for the Sniper to accept and then you’re playing.

Designing a New Flow

As you can see by the size of that image, that’s a lot of screens, and a lot of clicking. For the longest time there wasn’t even a back button, so if you messed up you had to do it all over again! Each screen is also confusing, because it doesn’t have any surrounding context, and sometimes very similar menus will pop up but with slightly different text, and you’ll often hear newbies who stream their first games of SpyParty say things like, “Didn’t I just pick this?” When casting the party, the title changes, and the portraits on the side fill in, but the screen looks almost identical, so people don’t think clicking even does anything if they don’t notice the subtle title changes.

It’s always been my intention to put almost all of the game setup on a single screen, and since the goal for this summer is to get the 10 new art characters playable in a new art map, John suggested making the UI better as well. I agreed it was time.

I want to be clear: the images below are early mockups, and have a lot of problems, and will change, so please don’t consider them final. But, they’re enough to show the direction I’m going, and to elucidate some of the issues I’ll need to overcome, and since I’m all about open development, here we go…

As I said above, you have to pick the level first before the game can know what options are available to you. This presents a small problem, because we really want to get the characters in front of players as early as possible, since they’re the stars of the show. As you can see in the top image of the current flow, I even added a “menu party” with silhouetted characters to try to get some personality into the ugly old art version of the menus. Even that helps a lot, so we’d like to get the characters on screen immediately.

As we were talking about the new UI, John and I came up with the idea that the casting screen should obviously be a single screen, but instead of a grid like a fighting game, we should have the characters in a kind of “group shot” pose, like we’ve shown when we’ve released each batch of new art characters.

And, of course, they should be animated, and even respond to you when you select them. More on that below.

But as I said, the level selection has to come first, and although the new art levels are pretty, they’re not as cool as the characters, so how to solve this? The first thing I mocked up was to have them in the group shot, but in the background, desaturated, with the level select in front. I need to eventually support 20 characters, so I took the 10 and duplicated and flipped them just to get the density right.

I think this is a bit busy and the layout is bad, but I think a variation of this will work, probably with the level image a bit smaller so there’s more space for the characters. I’ll have to see if it’s too cluttered and distracting once they’re rendered in-game and animating. If I have time, what I’d like to do is have the map start out as an image, but if you stay on the image for a few seconds, it blends to a 3D render of the map that moves around on an attract loop. I want to be very careful about stuff like this that can impact menu performance, because I want the elite players to not have to sit through any additional time. You really don’t care about animations on your 10000th time through a menu.

After you’ve picked your level, I’m going to get all the rest of game setup (except casting) on a single screen. This is where my problem comes in, but I’ll talk about that below. For now, you can check out this image, and imagine that the “Any”, the “3”, and the “5” are dropdowns or something, and you choose the selected missions by clicking on them. I’m going to have the game type the community considers balanced set up by default on this screen (Any 2 of 3 on Balcony, Any 5 of 7 on Veranda, etc.), so it should be much faster than the current flow if you want the current meta.

Finally, and this should be insanely cool, you get to the casting screen. All of the cast is randomly selected when you get to this screen, so if you want all random choices, you just hit next and you’re done. If you want to manually cast the party, then you just click around on the characters. Much like the Spore creatures did when you stuck an arm on them, the characters will react to you selecting and deselecting them. I haven’t figured out exactly how to handle this yet in a way that works well for both mouse and controller, but elite players usually only use the randomizer to avoid bias, so whatever I do won’t slow them down any.

I will spend some real time making sure casting the characters is nice and smooth, not only because newbies love to manually cast the party, but also because the big game design changes I’m going to make this fall to give specific characters specific characteristics (called the “dossiers design”, more on that later) will mean manual casting starts to get important at elite levels as well. Also, I’d like to leave open the possibility of a pick/ban draft phase during casting, where the Spy and Sniper can pick or ban certain characters from the party before the game starts, and I’d like all of that to fit on this single screen. I think it’s doable.

The Pick Problem

Let me reiterate: there are a ton of issues with these mockups. They’re overly busy and cluttered and there’s no unifying motif so it looks hodgepodge, but they’re a start, and they’re way better than the current flow.

However, I’m not worried about those issues, they’re hopefully easily solvable via iteration. I am worried about the issue of how to support Pick, though.

If you notice above, the middle mockup is just showing Any, but it could easily be the same for Known. Pick, however, requires another phase of mission selection, where you narrow your selected missions to you picked missions. I’m not sure how best to support this with the single screen. It seems like I have three options:

Have another listbox that comes up to the side. Have a tri-state selector for missions. Kill Pick.

All these options suck.

Option 1 is like the old flow, but just smashed into the screen. Imagine duplicating the Select Missions box on that screen, so when you’re in Pick mode, you get a filtered list of the selected missions in the new box, and you pick a subset of them. This means designing this page so it optionally has another major UI element, which probably means both views will be worse than they need to be. I could have different layouts depending on whether you choose Pick or Any/Known, but now the UI is moving around in response to another UI element, and that’s just terrible. If I have the pick box up all the time but it’s greyed out, then that’s wasting a ton of space, especially since Pick is almost never played right now.

Option 2 is also terrible. By “tri-state” I mean a checkbox or equivalent which has three states, for unselected, selected, and picked. Tri-state UI is pretty non-intuitive and ugly to start with, and there’s an additional issue here where the order they cycle is important. Imagine I use a tri-state checkbox with an X through it, an open box, and the check mark as the three states. Well, if you’re in Any or Known, you just want to cycle between checked and unchecked or it would look weird, so that means unchecked is the visual state for unselected. But then if you’re in Pick mode, it’d be weird to have the open checkbox mean unselected, but the X mean selected but not picked. At least, I think it would be? Maybe I could draw the X so it looks okay, meaning it looks like selected but turned off or something. There are very few standards here, which is always a problem for new UI controls—you really don’t want to innovate in user interface controls—and makes it so the player has to think about it. Also, if I’m using checkboxes, that means I shouldn’t use the highlight for selection that’s in the mockup, and should use checkboxes all the time for consistency, but that’s ugly and unnecessary most of the time due to the current unpopularity of Pick. I could use highlight, lowlight, and strikethrough as the three states, but then that’s even more confusing because strikethrough would mean selected but not picked?

If this was a AAA game, a producer would pick Option 3 before I’d even finished explaining the issue, let alone written a blog post about it. If Pick is unpopular and almost never played, why am I spending all this energy trying to solve this outlier case? Well, I like Pick, and it’s my video game. I think Pick provides some interesting decisions for the Spy at the start of the game. I agree with fans of Any that the ability for the Spy to take advantage of opportunities is great, and it is less meta-gameable than Pick, and I agree that Any should be the main competition mode, but the meta-gaming around Pick is interesting and it’s a nice way to handicap less than an entire mission (Pick M of N is slightly harder for the Spy than Any M of N, but not as hard as Any M+1 of N). So, I’d rather not remove Pick if I can help it.

So, what’s the right solution to this dilemma? Do my job for me in the comments.

Update: I’m prototyping this in the game right now, here’s an early version of the “pantheon” of characters for casting: