In a game like Push Me Pull You where a play session is made up of lots of short rounds, you tend to spend a fair bit of time in menus. It might sound tedious, but I think time spent not playing is actually a really important part of the rhythm of round based games. On menu screens you get to have a break, reflect on what you’ve been doing, and talk about what you want do next.
So with PMPY we didn’t want our menus’ design to be an afterthought. We saw them as part of the game itself, and wanted it to feel that way. It took us a while to work out what that actually meant for us. We knew we wanted our menus to feel special, but beyond that our goals were pretty vague.
We wanted to show our characters. The most important thing in our game are the people, and we wanted to show them as much as possible. During development we had a lot of fun drawing them and talked a lot about what they might do in different situations. Any attempt to show them raised a lot of interesting questions (what sort of things do they carry around? Could they use a ladder?) and then menus seemed like a good place to explore these ideas.
The long bodies seemed like a good way to tie things together. We wanted to find a way to represent the progression through the menu screens physically, using the our characters’ long bodies. A big inspiration here was Mini Metro’s train track menus. In that game, each path through the menu is shown as a train line, and choices are represented as stations along the way. I really like the way that this fits in with the look and theme of the game, and also serves to give each screen context and help navigation.
We felt like our characters’ big bodies could do something similar, and make a winding path that physically drew the menu’s progression.
UI World!
So putting these together, we decided to lay our menus out on one big plane, using our characters’ bodies as the links between them. Each scene would have lots of bodies going off screen, and when it was time to go to the next menu, the camera would follow one off to the next scene where their partner would be waiting.
An early draft of our main menu screen. Each body joins up with a corresponding submenu.
As a consequence, this meant most of our menu screens would exist in a single contiguous space. Internally we started calling this space “UI World”.
Restrictions
This idea meant that right off the bat, each scene had some important requirements. At the very least, each scene required:
- A way to show the menu in question
- At least one character for each connected scene to allow for the transitions
So before we could even start work on the scenes, we needed to work out what the menu in question would look like, and what connections it would have. To work this out we used a menu flowchart we had made, that showed all the connections.
This flowchart of game states helped us work out what was needed from each UI World scene.
So looking at this chart we could work out that the main menu needed to a way to show it’s three options, and at least three characters whose bodies would form the three transitions.
Not getting too specific
Originally our menu people (internally called ‘UI friends’) were all bespoke, so we first assumed we would just draw a specific character for each one. But in practice this felt really weird. When the UI friends looked the same every time but the player characters were always different, the UI friends started to feel like they were more important.
We liked the idea of this burly coach with a mustache, but they were special in a way that made them seem like the game’s main character, which we definitely didn’t want.
Once we realised this we changed our plans and started using our customisable arthead for all our UI friends (except one), and had the game generate random faces for all them each time you play.
Joining up the scenes
Once we had a rough idea what each of our UI scenes were going to look like, we tried laying them out spatially, to see if the bodies lined up okay.
For our first pass we just stitched our drafts together in a big photoshop file.
UI World was starting to take shape!
Body width
It was around this point that we realised the UI friends were different sizes in each scene, which created a bit of a problem. We had intended on drawing the bodies as fixed width, and weren’t keen on having them taper in, because that’s not how they look in game.
This body is too narrow for the person with the clipboard, but too wide for the one holding the ‘options’ card. In the final game, the scene with the clipboard was made smaller, and the camera zooms in until it looks full size.
Our solution was to scale each scene so that the bodies were the same size, and then to have the camera zoom level change during a transition, counteracting that scaling. This meant the bodies could go from wide to narrow, but would always look fixed with at any given time.
Bodies and cameras
For each transition, we had to create two splines. A body that joins the two friends together, and a path that the camera travels along to get from one scene to the other. Before we started we thought it might be easier to use use a single spline for both the body and the camera, but found that following the body too closely made the camera feel really unnatural, so we made them separately.
The camera paths are shown in red.
Once we had the body and camera path, we could start to get a feel of what these transitions felt like in game, and began a long process of tweaking the distance, duration, body and camera path of each transition.
In general we made things faster and simpler over time, as we tried to preserve the novelty of UI World while making it more usable and less in your face. Longer transitions were funny the first time, but the joke wore thin pretty quickly. So in the final game, all the transitions are pretty quick, except the transition to the How To Play screen, which we safely assume that players will only look at a couple times.
Shaping the bodies
Shaping the bodies provided some unique challenges, because UI World doesn’t really have a floor. In the Play Menu for example, the easel is presumably sitting on the ground, and the dog appears to be laying on the ground, but in the transition to Variants the camera moves further down and suddenly the dog’s body looks more like it is hanging. Keeping these spaces vague let us get away with a lot.
In the local scene, marked by the red frame, the dog looks like it’s laying on the ground. During a transition things look more ambiguous, but it never looks wrong.
Avoiding overlaps
Another challenge was making sure that bodies went their separate ways with enough clearance that they wouldn’t be visible from other transitions. Early on we thought it might be fun for you to see other bodies as you wooshed by (or even have them overlap), but in practice there was too little context for these other bodies to be recognisable. If you saw another body without seeing it’s head first, it just looked like a line. This is the reason why the Play - How To Play body rises so sharply. It has to get out of the way of the Play - Variants camera path.
Music
One of the best parts of UI World, and the last to go in, was our very ambitious dynamic music system. To take our concept one step further, we decided it would be pretty good if every scene in UI World had it’s own music track so that we could crossfade between them as the camera moved along.
I can’t remember if we originally proposed this to our composer, Dan Golding, as a joke or if we were serious from the get go. But Dan immediately ran with the idea, and ended up recording dozens of unique tracks that we could crossfade between (with six of them ending up in UI World specifically).
We aren’t the first people to use a system like this, but we might be among the first to make one with so much variety solely for a game’s menu.
From the moment we first put it in the game, this music system felt really good. The movement of the camera made it feel very natural for the music to crossfade as you approached a new scene, and it made UI World feel much bigger as a consequence. All the credit here goes to Dan, who went above and beyond to find the best way to make all this work musically. Thanks to him, UI World feels like one consistent piece, but each screen feels like it’s own song. I’m really keen to get the complete story of Push Me Pull You’s music down on paper somewhere, but without Dan’s help I’ll have to leave it there for now.
And finally…
The final layout of UI World.
-Nico