Fashion Trends of Los Ojos

Hello, I’m Vincent Perea, the Art Director for Chance Agency, and I want to tell you a little bit about the inspiration behind our character designs.

In Neo Cab, we’re trying to tell relatable human stories in a world that’s quickly becoming less and less human. The game is set in a future fractured by tech-control and gig economics, but that isn’t the core of what it’s about. It’s actually a game about people, and the brief moments where one life intersects with another.  

As such, most of the game takes place in Lina’s car. You pick up passengers (or “pax” for short) and reveal their stories as you chat during the ride. You see glimpses of the city of Los Ojos, but a lot of the focus is on characters interacting in a confined space. This meant that a pax’s attire and appearance had to not only convey their personality, but also offer hints at what the larger world was like.

If all I have to describe the world outside the car is the upper part of a character’s body, I have to be bold with my style choices. It’s been a fun challenge, and I’ve been drawing on several references to create a future fashion that’s as believable as it is strange.


1980s

The fashion of the 1980s was a big inspiration on the project. Even today, it feels like designers of the time had their eye on the future. It feels like they were not just trying to represent 1980, but 2180—especially in high fashion and New Wave looks. 80s design cues that I drew on include: bold sharp angles, neon colors, contrasting sizes and cuts, diversity of patterns (often clashing), and dramatic makeup.

image

Debbie Harry inspired a generation of thieves with her impeccably casual-cool style. I am 90% certain Grace Jones was actually sent back in time from the future.

image

But I was almost more attracted to how we remember the 80s. With time we tend to exaggerate the styles of the past, and “retro” looks become more about the feelings an era inspires in modern minds, instead of any kind of accurate day-to-day look.

image

Saint Laurent fall 2016 collection

image

Marc Jacobs Resort 2017 collection.

Case in point: when Atomic Blonde came out, I breathed a sigh of relief. “This duotone palette works!” (There’s a great meme on this kind of lighting dubbed, “Bisexual Lighting.”) The whole film is excellently art directed to capture the cool, neon vibe of the time period—or at least the feeling of why the 80s are still so captivating today.

image


Athleisure

Next I looked to the modern trend of Athleisure. I liked how this style uses newer synthetic fabrics, and a diversity of materials in one garment. I was drawn to how these pieces use panelling not just as a construction method, but as an expressive element in the overall design.

image


Hair Styles

Since most of our characters are only ever seen in the backseat of a car, anything above the neck was prime real estate.  So deciding that everyone has “cool” haircuts was as much a practical decision as a creative one.

Any 10-minute walk around GDC was enough time for me to gather reference for all the hairstyles in Los Ojos…so it didn’t seem outlandish to imagine that some current edgy styles (half-shaved heads, multi-color layers) would become mainstream looks as our generation ages up.

image


Setting a Style Guide

To focus my efforts, I made myself a cheat sheet of the “current” style trends that would be seen on the streets of Los Ojos. I also added some elements that are a little more under-the-radar, like fashionable prosthetics, reflective detailing, and illuminated clothing.

image
image

I curated a deep list of references, then sat down and started to sketch some of my favorites, updating details and colors to unite the drawings together. I should note that we’ve imagined Los Ojos to be a very culturally diverse city. It was important to me that the design of the pax represented a wide range of ages, ethnicities, and body types.

image
image


Emissive Details

The game changer in designing the pax turned out to be adding illuminated (or emissive) detailing.  

This was exciting to me because it helped answer some deeper narrative questions in the game—in a city you mainly experience at night, how will a person feel seen? How will they make themselves stand out in the literal and emotional darkness of the world?  

I worked up the concept below, with illumination not just on garments but on tattoos and hair highlights, as well.

image

These details had that little bit of “extra” I was looking to add to our design language. Having highlights and tattoos that glow are not entirely possible at the moment, but in 30 years…who knows? It was a small but bold touch that marked these characters as existing in a future setting.  It was also a trend I could use to unite all the character designs, no matter their backgrounds.  

I tried this emissive approach out in full color, and was satisfied with how it held up. The final game uses a limited palette about halfway between this and the previous concept.

image


Final Look

Once I had these general style guidelines for the world, I could set about designing specific characters. The details of how we prepped and built individual looks is a topic for another time. But I’ll include two characters in their final states below. The character on the left has a nice balance of familiar and futuristic elements. The character on the right has much more extreme style, however it serves a very specific narrative purpose which I can only reveal in…the future.

Final Look of a Pax

image

The Backbone of our Animation System

Hello! I’m Laura - the technical artist at Chance Agency. I developed our 2D master character rig for Neo Cab. A “rig” is like a digital puppet made of a hierarchical set of dozens of “bones”, with layered images attached. We use this rig to animate every aspect of our characters- it’s what makes Vincent’s (our Art Director) hand-painted character art feel alive.

Our main goal was for our pax (passengers, in the parlance of rideshare drivers) to visibly express their emotions and certain reactions during their conversations with Lina.

We also wanted the pax to constantly move, or idle, so they don’t feel static.

image

When weighing our software options, we narrowed it down to two contenders - Spine & Live2D. We were inspired by the character animations in Wispfire’s Herald, an interactive period drama. Using Live2D, they breathed so much life into these portraits with their moving features and smooth head turns. They wrote a great series of posts detailing how they set up one of their characters. With this style in mind, we started comparing Live2D and Spine. We ultimately decided that the skeleton animation in Spine was more appropriate for us because we had to an unusually large cast of characters to create, and sharing a “master” skeleton across all of our characters felt easier in Spine. I’m really glad we explored Live2D, though- we carried some of that animation style over to our Spine workflow (with a few crazy hacks!)

Once we decided to use Spine, we got to work developing our master rig. First, Vincent illustrates the characters in Photoshop. Each piece is drawn on a separate layer so we can export our assets using Esoteric’s Photoshop to Spine script.

We developed our master rig (we call her Neo Zero) through lots of trial and error. The bones are positioned on the face and body in specific areas so we can make the character feel like it has depth and life.

image

Meshes and weights are also very important to our rigs. Converting an asset to a mesh and binding bones to that mesh allows us to deform/stretch it freely. This is how we manipulate the eyebrows, eyelids, face, body, hair, and mouth (the hardest one!).

image

We wanted our characters to be capable of “acting” with their face and their body language, independently, so we developed a skeleton with a few different bone sets. For example, the character’s face may read as ‘happy’, but their body reads as 'drunk’… and we need to be able to transition between all these possible states as the story requires. Spine lets you set up various tracks so you can layer animations in Unity. There is a track hierarchy, so a bone keyed on a higher track overrides that same bone that’s used on a lower track. Our system takes this into account and we have certain bones that are meant for idles and others that are meant for emotes. To keep track of this system, we developed a naming structure to differentiate bone types (like root, exp, and def).

image

We also intentionally override certain bones when we want to interrupt an ongoing idle or emote with a time-sensitive react animation.

After we made it past the basic rig setup, we experimented with a few more complex features. We established a custom constraint system so we’re able to move each character’s head with one master bone. These constraints also enable us to parallax parts of their face, adding a feeling of depth to an otherwise 2D character. We constrain that master bone to custom paths so we can move the head around smoothly. This is how we achieved that Live2D look we were going for. It took a lot of work, and it’s probably the part of the rig I’m most excited about.

Next, we experimented with creating a new character based on Zero’s skeleton- and we were pleasantly surprised with our results! Everything translated over with minimal tweaking- even the animations! That was very exciting.

Our pax setup process in a nutshell:

  • Start with our established Zero rig, which has a base set of emotes, idles, and react animations.
  • Export the assets of the new pax into a new image folder. The asset names have to be exactly the same for all of the pax so we don’t break the image references.
  • Reposition the rig bones based on a guide image of the new Pax’s design. Not all pax are the same height or build, so we usually need to shimmy the bones around before positioning the assets for real.
  • Once the bones are in a good spot, move the assets into place (following the guide image).
  • Build the meshes of the assets we need to deform. This step (and the next one) usually takes the most time.
  • Bind the deformation bones to the meshes, then paint the weights.
  • Hook up the transform and path constraints, then fill in those values.
  • We then verify that the base animation set transferred over smoothly to the new pax. Since all faces are different, we always need to spend time cleaning up certain things (especially those damn mouths), but it’s so helpful to have a starting point instead of having to start from scratch animating each character.

Now that we have a solid master rig, our process is pretty efficient. It usually takes a couple days to rig a new character and then some additional time to customize animations.

I hope this was an informative overview! There’s so much to talk about, so we’ll be posting more deep dives in the near future. Thanks for checking this out!

Capra Cars

Hi! I’m Lisa. One of my first assignments on Neocab was to make an iconic autonomous car using Vincent’s lovely concepts pictured here:

image

My job is to translate these awesome 2D images into a 3D asset for use on the Los Ojos streets!

The first step is to model it in a 3D modeling software. I used Maya for this asset due to its hard surface qualities.  At this stage, I like to get all the feedback I can to avoid any rework later on. This model went through a couple of rounds of feedback before it came out looking like this:

image

Once the model passes muster, I start to UV the model in Maya. This process is a way to unfold the geometry you’ve made to be flat so that it can then be painted as a texture.

A texture sheet looks like this:

image

I turned on the wireframe layer in Photoshop so you can see the thin lines representing the wireframe of the 3D geometry. This is like a roadmap to tell you where each piece of the 3D car is located in this 2D space. The texture was kept quite simple with just a quick ambient occlusion bake and some basic color. Ambient occlusion is a shadow based on proximity to other geometry in the scene as well as self-shadowing based on an ambient light.

The final result will have layered specular, reflectivity, decals and emission maps overtop of this base texture to hit the look we are going for.

Some quick jargon-y explainers just in case I lost you:

  • Specular - the amount of shininess the object has and what color that shine will be
  • Reflectivity - how reflective the object is and what texture it reflects
  • Emissive- whether the object emits light like a glow and what color that glow is
  • Decals - I went old school and layered some transparent geometry overtop of the car to add the logos and turn signals

Once we have all of these textures and the geometry finished, we can start getting this thing in engine! This is where we can tweak the specular, reflection, and emissive textures in a neat package called a “Material.” This step is where it all comes together and the hard work starts paying off.

The final result (with both sets of turn signals on) looks something like this:

image

Hi, I’m Patrick Ewing.

You might remember me as a programmer on titles like Firewatch (2016) and Twitter (2009-2014), or as an actor in Space Jam (1995). Welcome to the Neo Cab dev log. 

Here we’ll be sharing concept art, code, music, visual inspiration and all sorts of ephemera produced when making an indie game.

I’ve been trying to tell stories with games since I first laid my hands on code. It was in the first grade—we were writing commands to make the LOGO Turtle walk around the screen. As soon as I got him to walk, I asked my teacher about making the turtle talk, and giving him a house, or maybe a whole turtle village and… well, my ambitions to make the next Sierra or LucasArts game were far beyond the abilities of a six-year-old on a Commodore 64.

image

Games were always like this, for me— just within reach, but not quite attainable. I kept coding, though, which eventually led me to Twitter, and then to Campo Santo.

Being part of the Firewatch team was the chance of a lifetime— the atmosphere in the studio was open, collaborative, and interdisciplinary. I started building out our dialog recording pipeline, and by the end of the project I was coding gameplay logic, hand-drawing maps, writing filler dialog, and localizing the game in five languages. It was insanely fun, and unbelievably hard. Even in all my years of launching updates to Twitter.com, I’d never felt an honest-to-god panic attack until the day before we threw the switch and Firewatch went live.

image

The response to the game was unbelievable— two years after launch and people are still reaching out with deeply personal stories about how Firewatch touched their lives. People dealing with loss, people looking to make a change in their lives— a 14 year old kid saved a lookout tower, for crying out loud.

That itch I’d had since I first made that turtle move across the screen— to build a world that players felt they could live inside? That only intensified.

So a little over a year ago, we started assembling our amazing team, Chance Agency, and we’re so excited to start sharing some of our work for the first time. Neo Cab will invite you to explore the busy streets and back alleys of a vibrant border city, interact with a large and diverse cast of characters, and figure out how to stay human in a society disrupted by automation.

However you found your way to this {mailing list | blog}, please fix yourself a drink, grab a seat, and SMASH that subscribe button, friend. We’ve got stories to share— tales of worldbuilder wishes and developer dreams. These will be told for the kids in the back row who’ve wanted to make games since before they can remember. We hope our posts about the way our art, code, stories, and music were made and pieced into a whole will end up slotting into your own personal gamedev inventory in some small way. At the very least, we hope sharing with you will keep us inspired to make this the best possible version of Neo Cab we can, and that some of that inspirado will be contagious.