Design Iteration: Navigation with a fixed camera and character

“How can a player move in the world?”

We generally think of Sudd City Adventures as part point and click game and part interactive fiction, however from a camera perspective it has a lot more to do with a visual novel. This mostly comes from the fact that we’re assumed to be from the point of view of our player character, as opposed to a third person animated avatar like in old LucasArts games where players basically moved their character into a hallway to signal a room change.

Iteration 1: Drop down menu selecting adjacent rooms

Since we didn’t want to do many animations, we couldn’t show your avatar walking between rooms, so our first attempt for came from some dating sims. There was a drop down menu in each room that only showed the rooms that logically connected to that room. We knew what each room connected to because we had designed a blueprint based on real house with some minor modifications based on some puzzle ideas we had.

The first nav bar

This approach caused a lot of problems because player’s couldn’t associate which door went with which exist visually. So trying to build a mental map of the space and logically how the house was structured was impossible.

Iteration 2: Arrow buttons to click on on screen

We spent time also thinking about how cursors change in point and click adventure games to show affordances of what players could and could not do. We couldn’t do the exact same hover cursor as some hidden object adventure games because we were still unsure of what platform we were going to go with, and wanted to keep our HUD consistent between PC and Mobile early on to be easy to switch between. As a result rather than the arrows showing up only on hover they appear all the time, having the added benefit of not needing to pixel hunt everywhere on screen too.

Static, labeled arrows by doors

One problem with this is that it’s intrusive visually. But the main issue was player then also didn’t try to build a mental model of the house. Instead they would see a labelled arrow and assume that was all they could do. During playtests when asked “Do you know how to get from the Gym to the Bathroom?” they wouldn’t be able to form a short path because players only looks at the immediate options so could not think two rooms away.

We received multiple suggestions from playtesters to go back to a drop down list format, except to include every room. This had problems of breaking logical puzzles, after all some rooms are locked for a reason and players need to be able to see who is there and why for gameplay reasons. Since we had built a more realistic houses we thought there must be more things we could try to get players to understand without resorting to players just navigating a menu, which wouldn’t feel like players feel as if they were navigating in the real world and possibly be less immersed in the game.

Iteration 2.5: Static map in pause menu

At the same time we put more emphasis on players being able to look at a map in the pause menu… this worked with some players and was completely ignored by others. It was probably the same as who checked maps in real life. Since this didn’t work for all players we knew we had more work to do.

a pause map that could be brought up at any time
Iteration 3: Level Design Changes

After a few months of work more of the story was starting to falling into place so we were able to isolate specific room transitions players found confusing. It’s very rewarding when you can think that going from Room A to B is weird, rather than just that the whole thing is bad. These level design changes included removing all but the final area from the second story and finding a place for them downstairs.

This also meant making sure our initial tutorial was confined to only two rooms to keep players focused on learning the basics of the game before quickly letting them loose everywhere in our world.

Iteration 4: Art Changes

We removed places on the map that were labelled but that players couldn’t actually go. Originally some of the team wanted the house to feel big, and since at the start of the project we made a whole blueprint it kind of made sense to show everything. We also narratively wanted to tease more rooms for future games. Ultimately however playtesters thought the rooms on the map that they couldn’t go to looked like a bug, so we just had to make them unlabeled.

Another pure visual change that helped players make connections from one room to another from one point was keeping doors open to give a visual cue into the next room. The room transitions that people felt the most obvious were rooms they could see inside without reading the arrow label. This meant that on doors that swing we should visually cheat and have the doors always push in ( even from both directions ) to allow players to see a bit of the next room from the room they’re currently in.

Iteration 5: “loading screen” map

This was a sudden eureka moment in design that basically solved player confusion about this problem completely. We realized that some of our most confusing room movements were when a player entered a room and their new camera angle effectively rotated them a huge amount ( a variations of violating the 180 degree rule. ) So it would make sense to them if they entered room B from room A since they were still facing a similar direction, but if they entered room B from room C they’d be disorientated as the room B might be in front of them instead of behind them from their new perspective. In 3D games we could pick a few camera points and render the scene out from a few angles but we didn’t have the luxury as a 2D hand drawn game.

We figured we could just abstractly show people they were transitioning from one position to another on the map, which wouldn’t require a walk cycle and would just be a simple programmatic interpolation between fixed points. This was a great reuse of art we already had.

Animated location transitions

This solution was also good at reinforcing that players had a map they could look at, and also prime them for future places they’d be going later in the game.

After this was implemented most new playtesters were able to answer questions about “how do you get from the gym to the bathroom?” and spent less time unintentionally walking in circles.