Deep Dive: Visual Communication

collage.jpg
Good visual design communicates and explains gameplay.  A game's rules and constraints often lead to the most effective and elegant solutions!  It also provides a positive feedback loop between look and play, with each feeding into and off one another.  Very Very Valet had several such scenarios!
First up: car design.  You might not have noticed from the trailers - but every car in Very Very Valet is a convertible.  Though it may seem like an innocuous decision, it actually solved several problems!
In the prototype for Very Very Valet, we started with really simple models.  The characters were just pills with hats (so you could tell which direction they were facing), and normal cars (You know, ones with roofs).  It became immediately obvious that getting in and out of cars was in need of clarity.  Which car am I in?  Are other players in the car?  Who’s driving?  Are there customers in this one?  That’s a lot to communicate in a very small space!
The simplest solution was to remove the roofs.  That’s it!  A big positive is that we get to keep our super expressive characters on screen.  And discovered we could use them to communicate subtle state, like having valets look backwards when in reverse.  And realized that when a car DOES have a roof, it means it can’t be entered.  Though primarily a gameplay solution, it also provided the game with a unique car design.  Win win!
Next: a big challenge in Very Very Valet is the loooooooong gap between parking a car and returning it.  Seeing a line of customers waiting to be picked up is visually pretty clear - but a scattering of cars to be returned is much less obvious.  This meant utilizing every method to get a player’s attention!
visuals_car_returns.2021-04-19 23_03_30.gif
When a car is ready for return, we show:
  • A UI meter with the time remaining
  • A customer/car number (above the customer and on the car’s flag)
  • Matching zone colors (car is outlined in this color)
  • A state change particles (the white dots over a car)
The biggest visual challenge was ensuring a car’s number was always visible, regardless of the car’s angle.  We briefly tried adding decals to the cars, but required having multiple numbers on each side of the car, and even then the numbers were often upside down or backwards.  That led to using flags - since they can be rotated freely to always face the camera.
Find someone who looks at you  the way this flag looks at a camera!

Find someone who looks at you
the way this flag looks at a camera!

Even though we have different identification methods (car number and model), we found that players often relied on car color - maybe because that’s how we talk about cars in the real world.  To keep colors identifiable we moved away from random gradients to fixed colors, ensuring that blue is always blue and not teal or azure or navy.  We also need to do a little more “housekeeping” when new cars enter the level.  New cars will do their best to pick a color that isn’t onscreen.
Good distribution of car colors - calling out green, blue, purple is clear

Good distribution of car colors - calling out green, blue, purple is clear

After making 20 levels, we discovered several best practices for increasing clarity.  One of the biggest challenges was keeping each level instantly readable.  Since every level has a unique layout, it's essential that players can quickly find the most important elements - where customers will enter and exit, where to park cars, etc.
We had a handful of levels that never felt clear enough, only to realize it was because of sideways facing goals.  When a door is perpendicular to the camera, it’s really hard to see!  Updating layouts to that important elements faced the camera dramatically improved quality.
Prioritizing layout as a solution proved ever useful, like with teleporters.  Playtest after playtest revealed that teleporters close to the camera were preventing players from seeing crucial information.  There are a plethora of solves for this problem, but none were as simple or foolproof as changing layout.  
Hmmm, looks pretty empty…

Hmmm, looks pretty empty…

Ack! All of those hiding cars!

Ack! All of those hiding cars!

Solving this meant moving teleporters to the side - no new code needed!

Solving this meant moving teleporters to the side - no new code needed!

Per Miyamoto, “A good idea is something that does not solve just one single problem, but rather can solve multiple problems at once.”  Every issue is an opportunity, especially if there’s a chance to support and reinforce gameplay!  More often than not, the best answers typically solve multiple problems.

Previous
Previous

Very Very Valet Demo is Live!

Next
Next

New Gameplay Footage