Neo Cab: Visual Case Study

E3 Annoucement TrailerThose smooth jams were supplied by Obfusc ( Joseph Burke) who created an amazing soundtrack for our game. He started dropping us tracks after seeing our mood pieces and it really powered all our work throughout the project.

Our 2019 Launch Trailer

I worked on Neo Cab for about 2.5 years. I was the Art Director for the project and got to really push myself throughout the project. The above image started life as a visual target but captured so much of the mood of the game that we kept it as our Key Art.In this case study I have collected some of the highlights from production in an attempt to show the development as a linear story. However so much work went into this game that this ended up being a large post.The core art team was usually around 3 people with additional support as we needed it. We were a small passionate team and I credit their work in my images where applicable. The team included: Laura Sly ( UI/UX, Graphic Design, Character Rigging), Lisa Fleck ( 3D Modeling) and Dan Fox ( 3D Animation). As well as additional support from: Krista Sanders ( Branding, Design), Brianne Neumann ( Interior Background Design), Scott Duquette ( Exterior Environment Design), Miguel Vasquez (Additional 3D Support), and Armon Nobari ( Graphic Design.)

I made this alternate visual target to show how dramatically the mood could shift with a different lighting setup. The biggest thing I wanted to work on during the project was lighting design. It was not my strong suit before this project, so I really pushed myself on this game and learned a ton.

This was the first image I did for the project. I worked up this mood piece to capture the vibe of the story that Patrick Ewing ( our Creative Director) and I had been discussing. The city was meant to be a futuristic haven but it turned into a very lonely place. I wanted to show Lina at the beginning of her shift, alone, and ready to take on the city. The neon color palette showed up very early and would carry us through the project.

Another mood study. I was initially thinking the style of the game would be more simplified, but through development the style got more complex to match the depth of the writing.

Environment Visual TargetThis is a unity environment test (with some additional overpainting) that Lisa Fleck and I put together. We were trying to capture the look of the early mood pieces using tools we could replicate in engine.

This was a screenshot release to announce the game. At this point we were about a year and half into development. We still had a lot more characters and environments to build but the core visual design was locked in. Most of the game takes place in the confines of Lina’s car, which allowed for a lot of efficiency in terms of art production but also added a lot of challenges in how to make the game feel interesting over a long period of time.

Dash CamThe interior car set was 3D and the characters are 2D sprite rigs built in Spine. Using this above set and character rigs we could switch over to a few different shots ( individual character closeups, a view looking in from the windshield, and even a shot of just the passing city). This allowed us to manually direct the camera during a ride, provide emphasis to story moments, and make each ride feel unique.

Lina POV ShotThe most dramatic camera angle shift is this setup when you are in Lina’s POV. You begin and end every ride in this shot. Lina is able to pick up her phone and there you can navigate the game menus in a seamless transition.Making the 2D and 3D assets synch up visually was a huge challenge. The hardest part was that we used 3D hands for Lina so we had to synch colors and shaders across the same character without it feeling disconnected. We did this because in order to sell the idea of her actually driving we needed to rotate the steering wheel dynamically and this proved to be too challenging in 2D.

From the above research, I designed a limited number of camera shots that we could use to direct any ride. This would help each ride feel dynamic and different (in as efficient a way as possible.) Due to our limited team size I could only afford to build one 2D rig per character. So I designed shots that could leverage the same passenger rig while still offering a different impact.

CloseupsCharacter closeup shots gave the player a good view of the passenger and allowed for moments of focus. This is also an example of the vector graphic holographic HUDs that some characters wear. I wanted the technology to feel a little clunky like it was the early days of wearable holographic tech. So I drew from 80s analog technology for most of my designs. This is Allie who works for Capra as human “Google Maps” car.

In this 1 minute video you can see the lighting system at work in the car scene. The 2D lighting was synched up with 3D lights that moved along the 3D geometry of the car.

Lighting plays a huge role in our game’s style. It was a long process figuring out how we could replicate the style of the concepts in our game engine using 2D assets. The first step was figuring out all the lightning moves I would need to manage the style. This was a step by step lighting breakdown I did in photoshop. This helped us see how many steps and lighting passes we might need to achieve the look.

Here is more detail about the various layers I used for my lighting prototype. This breakdown was then used by our engineer Joel Davis to create a custom shader where I could control and animate each layer to create our lighting effects. The bloom layer ended up being left out as we opted for a global bloom across the whole game.

Sprite Texture BreakdownThe light masks were painted in gray scale and our shader allowed for additive blending of the different tones on a darkened diffuse texture. This greatly contributes to the characters sense of volume. Three lighting directions were painted (right, left, and from behind) for each character. Then the assets were packed into a single image by assigning each mask one of the RGB color channels. I always liked painting the lighting in grayscale as it allowed for a lot more focus on just the tone.The diffuse assets created our base atlas and we developed a tool to copy the layout of the atlas to pack our light masks and our emissive maps in the exact same locations. I know there is a lot of wasted space in some of the atlases. If I could do it over I would have broken up the body assets into more units to allow for more efficient packing. But this operation was complex enough that when it came time to optimize we couldn’t afford (the time) to remake each atlas across the 20 characters. Hashtag game dev problems ;P

Early Characters ExplorationI drew inspiration from the fashion trend Athleisure for our character concepts. Fitness wear has a very futuristic but functional quality to it. By adding light emissive details it I was hoping to find a fresh take on the cyber punk aesthetic that didn’t include unbelievable cybernetics, but felt more plausible and relatable.

Radix Biker ConceptsRadix are a group of pro-bike anti-car anarchists who act against the Capra Corporation. They are a grass roots organization, that Savy falls in with, who oppose self driving cars. There ended up being only one Radix passenger, Azul, but their presence is felt throughout. I drew inspiration from the Latinx youth I saw protesting in the streets of LA around 2016. Rather then design them to look militaristic and typical, I wanted them to be colorful and vibrant.

I wanted each of their looks to be unique and customized the way Latinx youth trick out their fixie bikes (here in LA.) The emissive details here are also functional, allowing them to be easily spotted on the dark streets of Los Ojos. To me it also served as a bigger statement. By being illuminated it was saying “ I am here, I will be seen”. I carried the emissive “glow in the dark” details over to almost every character design in the game.

Style RangesWhen designing a visual style I find it helpful to start out with the same subjects and play with different aesthetic ranges. We toyed with a simplified graphic approach for our characters but ultimately made them look more distinct and specific. Having a more detailed style made each character feel more unique, individualistic, and relatable.

These duotone explorations were a real turning point for the style of the project. I was trying to capture the moody drama I was reading in our early sample stories.

I then expanded the duotone style into full color. It was really important that the character’s expressions could be read cleanly so players could know how the conversation was going. This style allowed for a lot of clean readability in the faces. The lighting design was still dramatic and the neon palette gave the style a futuristic quality.

Lina Concept ExplorationsFor our main character we wanted a blend of approachability and toughness. Her best quality is her empathy but her job also puts her in some difficult situations. The only people that request human drivers in Los Ojos either want a human connection or don’t want to be tracked by the Capra Corporation. Overtime she has had to guard herself against awkward situations, but also make her passengers feel comfortable as she carries them to their destination.

Expression Explorations

Lina Final ModelsThis 3/4 shot is Lina’s final design as it appears in game. We only ever see Lina from a few angles, however I did this semi head turnaround to help me figure out how her hair was shaped.All of our characters are built in Spine out of several different layered meshes that we can move and animate. Using meshes allowed us to give our 2D assets an illusion of depth. Lina is designed to have enough head movements to make it plausible that she is driving during the conversation.

Lina is Mexican-American but her family has lived in the states for generations. I designed her to be a bit ambiguous regarding her racial identity. This was drawn from my own life. Most of my life people have asked me “Where are you from?” which is then usually followed by an incorrect guess about by lineage. This ambiguity has opened up a lot of interesting conversations, which made me realize I could draw from this experience to make Lina seem more approachable.

Lina gets to exit the car at select points in the game. There are only a few locations but it was an interesting challenge trying to reuse our character rigs in different settings. This usually meant designing a new lighting setup and body for them to fit the location.

Savy’s design evolution.In contrast to Lina, I wanted Savy’s look to be bold and capture her loud and fickle nature.

Background Design by Brianne NeumannWarning this is bit of a spoiler: Eventually Lina finds where Savy is hiding out. For this location we had to build a Holographic laptop for her to be messing with. The laptop HUD is a fully animated sequence that responds to character choices.

Fiona PakOne of our earliest characters created by Paula Rogers. Fiona is on her way to a date and is dressed up to match her favorite social media filter. She worries about showing up to the date as her true self. Lina can sway her to go ahead as is or to let her hair ( and guard) down.

AzulA member of Radix who had their arm amputated after an accident with a Capra Car. Their arm was inspired by Claudia Mitchell the first woman to have a bionic arm. There are electrodes connected the nerves in Claudia’s chest that control arm movements. The wires send signals down to the prosthetic limb allowing her a more natural control over her robotic arm.I chose to base Azul’s arm on something more realistic and unfinished as it seemed more befitting of their DIY spirit. Maybe they didn’t get a good payout from their accident so they had to use different parts from older model prosthetics. This also gives Azul some serious Furiosa vibes. You can see some early arm takes that felt more anime influenced, but ended up looking to futuristic and typically cyberpunk. Maybe these arms exist in Los Ojos, but Azul couldn’t afford one.

GideonAn affluent anti-establishment member of the Los Ojos Elite. Her family is concerned for her safety so she is only allowed outside if she wears her “Kinder-mech” branded safety suit. Through your encounters with Gideon you can assist her to be freed of the suit, or convince her that her parents have their best interests at heart.

A collection of additional character designs. From Left to Right: Oona the Quantum Witch, Liam a photographer visiting Los Ojos, and Carlos the black market medic.

LOPD OfficersThe Los Ojos Police were designed to be a faceless threat in the world of our game. We wanted to explore how technology would affect a police force in a well funded town like Los Ojos. Like a lot of things in our world we wanted to depict a future that felt within reach. Back in 2018 we looked at the increasing militarization of the police in America and tried to cast forward 20 or 30 years. This preceded the protests of summer ‘20 as well as the mask wearing cops in HBO’s Watchmen. Like a lot of our designs the future caught up to our vision much faster than we ever imagined.

I wanted their visor to serve two purposes. First to serve as an internal and external HUD. I imagined that the inside of their visor displayed all sorts of pertinent information on the person they were questioning. In addition they could display commands and information to citizens.Second as a way to hide their identity, this way they could be protected from retribution.

They were looking a bit too much like a space soldier. So we redesigned their visors to better resemble riot helmets and shields. This way they maintained their connection to modern police.

3D Model by Lisa Fleck

In game they have holographic badges and their visors display information to Lina about her traffic stop. They intimidate and hassle Lina during her journey through Los Ojos as they search for Savy.

Capra Car DesignsMost residents of Los Ojos choose to be driven around in the self driving Capra Cars. These cars drive around in a flock throughout the city and needed to be compact so they could allow for nonstop movement. It isn’t a subtle metaphor but I thought they should look like a flock of sheep.

The sweeping shape of the back lights was inspired by goats horns, a nod to the inspiration for the company name, Capricorn. The windows are always blacked out allowing for total privacy, this also helped differentiate them from Lina’s car. A self driving car has no real reason for windows.

Final Model3D Model By Lisa FleckThe car is a little cradle that safely carries passengers from place to place. It’s design is economical and inoffensive, but intended to be ominous to the player.

Lina’s CarWe wanted Lina’s car to have more personality. However we also wanted it to look like a car a person with ride share job could afford.

Lina’s Car Art Direction NotesWe chose a nice mid-size car shape, something similar to a Prius but with LED panels to replace the grid and rear panel. I gave the back end of the car a little up-swoosh to push its sense of aerodynamics and to further distinguish it from Capra Cars.

Lina's Car - Final 3D3D Model by Miguel Vasquez. Shader and materials by Lisa FleckWe wanted a nice blend of sporty personality and sensibility. Lina wasn’t going to be speeding down the raceway, she would need a car that would make passengers feel comfortable. By not going super wild and futuristic with the design it also emphasizes how she herself, as a human driver, was a bit behind the times.

Lina’s Interior - FrontSeat

Lina’s Interior - Backseat

Lina’s Phone ConceptsLina uses a holographic phone. As I mentioned before, I imagined this would be the early days of this sort of tech. So I drew inspiration from 80s and 90s tech devices which had an analog look compared than today’s smartphones. I felt like the technology would step back first before jumping ahead to streamlined designs.

Phone Concepts by Vincent Perea. (Right) 3D model by Lisa Fleck.To further emphasize this being the early days of handheld technology I wanted all the in world graphics to be vector based. You can see this in the HUD displays some characters some characters wear as well as Savy’s computer.

HUD Design by Laura Sly. 3D Models by Lisa Fleck.The Phone as it appears in the game. After each ride Lina picks up the phone and activates the Holo UI which transitions seamlessly to our menus.

Menu Design by Laura Sly