Design discussion of the “Join battle” screen

I’m still waiting on feedback from beta testers. That means I currently don’t have much to do during my commute to and from work. I can’t do sound or music work while on the bus, which means I need design or code things to do! So I’m turning my attention to a screen that I’ve wanted to change for a long time.

I’m revisiting the “join battle” screen. It’s gone through many iterations since the original game in Processing. I’ve looked for ways to allow players to select their character while also keeping the screen easy to read and use. Looking at the old iterations and remembering what didn’t work might reveal clues towards a better design for the screen. Here goes!

Processing 2

Funnily enough, this first iteration was pretty close to what I currently have. This was at a time when there was nothing to do besides going ahead and playing the game, so the title screen was also the “join battle” screen. That’s why the game title and mode are in big at the top. Players couldn’t select their character, and I tried to fix that problem many different ways in the following iterations.

Processing 5


Here, players could press left and right to show a different character in their row. While player 1 had character 1 selected, the other players couldn’t select the same one. However, it was difficult for players to understand the top row as “this is the row for player 1”, and so on.

Processing 7


In this iteration, players could press left and right to change their character, and then press the main button to confirm their character as well as join battle. It was pretty text-heavy, though, since players could carry victories over within the game session, and level selection was also done in the same screen. Too much text, which also ended up making the screen visually unbalanced. Changing characters didn’t look interesting. Furthermore, characters selected by other characters were simply skipped over, but in the background. The last issue was that players couldn’t see all the character options at one go!

Processing 8


This one was my first real attempt to make character selection visually interesting. Similar to the second one above, a player couldn’t put their cursor over a character already occupied by another player. I think the usability was OK, but it’s hard to remember from back then – it was maybe 3 years ago! Part of the issue might have been how similar the characters all looked. Now that I have 4 easily distinguishable characters, maybe this is the one to revisit.

Processing 10


This was a return to the first iteration, with some adjustments. I now had an outlined version of the characters, to indicate the difference between a player who had decided to join battle versus one who had not. Previously, the character was always visible, and either standing still (not in battle) or running (joined battle). Still pretty text-heavy, with the headline at the top hinting to a design concept that I had for all screens back then.

Processing 14


A refinement of the previous iteration, with much less text. I had moved away from hard-coded controls, so no more text referring to D-pads, (1) or X buttons. This had much better distribution of space throughout the screen. The only thing I don’t like about it is the heaviness of the text at the bottom.



And this is what is currently in the game. After going through the previous iterations of this screen, I like this one much better, actually. The balance is exactly what I want: the characters are in the vertical center of the screen, and there isn’t much text. The “Press start to continue” appears after at least 2 players have joined – again, the principle of minimizing the amount of text when first arriving at the screen.


There were a lot of thoughts going through my head during each of these iterations. I was developing the core of the game, while also focusing on the UI to make all of the screens understandable, as well as trying to create and/or maintain unity in terms of screen design. It’s good to have some time to look back on and reassess all of it. Everything considered, the current “join battle” screen isn’t bad at all in terms of visual design.

The only negative to it is that players can’t choose their character. And that’s what I really want to allow. Allowing players to choose their character, even though it’s only an aesthetic choice, is more valuable than the faster “time to battle” that comes from not having that choice. Besides, giving players some time to talk and consider their choices isn’t time wasted, in my mind.

I have reached a decision. I’ll implement a screen like in Processing 8, where players can move their cursor and select a character. Since there are only 4 characters, they will be mapped to the 4 directions.

I’ll post a screenshot when I can – it’s been super busy at home, with my wife working on her thesis and us preparing an apartment move!

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s