One patch ago when you pressed tab, this is what you saw in the game:
It sucks not having a scoreboard. Traditionally, a scoreboard gave you a good overview of who’s on the server, and how well they were doing. This basic template carried over from the days of Quake where it was important for you to see your ping, your win / loss ratio, and gave you a sense of how you were doing. It’s also a place to be noticed, especially if you are dominating the server.
The reason it took us so long to implement a legit scoreboard was because we generally like to measure twice, cut once. As soon as we pass the design off to Biohazard, he’ll crank it out into something game-playable, and it would really suck to have to go back and change a whole bunch of things. In this situation it’s better to deliver a solid, well thought out design first before we even touch implementation.
In designing a scoreboard for Blade Symphony I had many considerations.
- You need to see your ping, and other people’s ping. This was arguably the most important in an online fighting game.
- You should be able to see your place in the arena queue, in order to know if your turn for duel is coming up. And since we had three arenas per map…
- The scoreboard really needs to be split into three scoreboards.
- You should be able to see spectators. The use-case being that if you were to find your friend on the server, and he didn’t also show up, it would be really confusing for the both of you.
- It *could* act as a UI for selecting arenas, since we don’t currently have something that explicitly lets you see all arenas at once. If we split the scoreboard up per arena, we can actually do this, making the scoreboard act as a kind of lobby.
- It needs to be designed for 16:9 but also fit in 4:3 aspect ratio.
These conclusions were drawn from the various brainstorms and mockups the team threw together, which I’ll walk through.
My very first version of the layout looked something like this. Keep in mind this was simply a sketch to show what pieces of data needed to be displayed, and how it was to be laid out, not the actual look and feel of the final piece.
This was the super dead simple layout, it showed who was fighting in which arenas, their wins losses and ping, and highlighted you as a player (in this case Laguana), and dog-piled all the spectators at the bottom.
There were plenty of problems with this. For instance you wouldn’t be able to see who was queued in which arena, and poorly uses screen width.
Fedio pitched this idea for a layout that served as a lobby system which expands on this idea of splitting up arenas for a user interface. In this design you can select whether to spectate or join the arena, and see the queue for each arena. While this design wasn’t intended to serve as a scoreboard itself and acts as a lobby, the final scoreboard design draws heavily from this.
Termi pitched this one which was very similar to what you’d expect from a traditional scoreboard. You see the players participating in each arena and the relevant information tabulated. This design also brought up the discussion of showing server-wide info, such as map name, message of the day for server operators, map time left, and total player count.
Termi also pitched this design for a lobby to easily allow you to see who was fighting where, and how long the wait might be before you get to play again. Like Fedio’s design, it also adds a very clear “GO HERE” button, perhaps context sensitive to whether you want to queue or spectate that particular arena.
Twincannon pitched this one which I ended up deciding to borrow the layout from. I like how you can see a preview of the arena at the top to get an idea of what “Arena 1″ is. The use of space is also much better, since splitting the scoreboard up into columns like Fedio’s lobby mockup allowed us a lot more vertical space for adding players and player data.
The final mockup looks like this:
This design synthesizes the advantages of having a lobby screen without actually having a lobby screen. Here we can activate the user’s mouse when tab is held and allow the buttons at the top to be clickable. The top two players of each arena are shown in color since they are dueling and the text color uses their custom character color they picked from the customization screen.
In addition we narrowed down exactly what data we wanted to display, and in what order.
Rank seems really important, you want to know at a glance how good this opponent is, and wins/loss on a server isn’t necessarily going to do that.
We thought about how important wins-losses were in our game and in a server session they weren’t really. What we actually want is a ‘metric’ of determining how fun a player would be to play with, and this had to be peer-driven. What better time to copy Reddit’s upvote system? Each player is thus treated as a “thread” on reddit, and you can only upvote (or downvote) another player once. This system is still in the works and not ready to go yet, but I wanted to give this a mention to give you a better understanding of our thought process.
Finally, the win-loss ratio is displayed as a short hand in a single column and the ping on the far right.
I’ve also made the decision to place the data underneath each players’ name as a countermeasure for players possibly having insanely long names which could happen and screw up our scoreboard layout.
The spectators would be dogpiled at the end of each arena’s own scoreboard. One problem with this is that you wouldn’t be able to see your own ping if you were in spectator. I argued that this was fine so long as we provided another UI somewhere else that gave you such information, such as your own load-out and your ping. At least it would prevent the scoreboard HUD from being overly lengthy.
Finally, there were concerns about maps with greater than three arenas. Officially we’ll only support three, but it’s definitely possible for someone to build a map with four or more. In this scenario we would have to provide some kind of horizontal or vertical scrollbar for managing this.
Biohazard also did a killer job on the implementation. Originally I had only spec’d this for image thumbnails. He went ahead and added picture-in-picture live feeds of each arena. Hats off!!
I hope you enjoyed this article, if you want to play Blade Symphony find out more here.
