The Art of Afterparty: The Devil's in the Details

[Music] my name is ruel pasqual i am the art director at night school studio uh after the party is not out yet so you guys will have first look at a lot of the yard in the game are you guys excited yeah all right let's do this cool all right uh it's good to be back in the bay i actually went to school here at the academy of art in 1997 i studied illustration computer animation and i've been creating art ever since i was a kid in the philippines uh here's some of my personal work i love working in traditional medium a lot of my old paintings are inspired by my wife and kids my art has been featured at galleries in san francisco los angeles new york city and san diego comic-con i taught myself sculpting and learned how to make molds and resin castings it's always great to

able to work on something tactile and take a break from the computer of course i also like working in digital i try to post as much personal work as i can these are a few of the sketches i sometimes post on instagram and i also like modeling rigging and animating characters and creating test scenes in unity so i've been fortunate enough to work for some innovative companies throughout my career i started in 2002 here in the bay area so here's some of the games and projects i've worked on in 2014 sean crankle and adam hines started night school studio with their first game oxenfree they're actually right there say hi that's nice uh so i was able to create all the rigs for the characters in

oxford as well as serving as an animation consultant uh in 2016 sean hired me full time to work on mr robot mobile texting narrative game where i designed the ui and ux today i'm going to talk about the art of afterparty as art director i focus on visual identity color lighting rigging animation direction and branding with a small studio studio you have to make you have to wear many hats it was a big challenge for our team so we had some failures before ultimately finding success here's our logo designed by our graphic designer diana kwok uh we decided to create our own version of a chromatic activation aberration effect in this one our first challenge was team size oxenfree was made of a core of six people with after party we doubled the size of the team in production now we have almost tripled it this was our

bike bar pub crawl in venice beach last year you know our research at night school we are really proud of the studio culture and chemistry and story games we all love to make let's talk about story so the story of after party two besties since uh kindergarten milo lola mysteriously died after graduating college they both go to hell but they find a loophole that if you outdrink satan you can grant your life back on earth so the tone of the game we wanted a fun humorous excellent adventure like bill and ted a crazy busy crowded nightlife like shibuya japan and a story with a lot of heart like beetlejuice so we came up with these three little words comedic alive and heart comedic in story dialogue and animation alive a world

where a ton of demons and humans coexist heart a story about friendship that lasts through the afterlife the three little words are an emotional experience that the players should feel when they're playing this game they're basically our three pillars so our amazing writers adam heinz and hannah felipsky would create the bones for a story and art and design fleshes it out so what's our vision for this sophomore walk and talk branching narrative game the vision for afterparty was to create a distinct handcrafted art style with a similar game play like oxenfree story is important to us the player is able to drive the direction of the story so the narrative the player chooses becomes one of the core mechanics of the game so what's our version of hell after

party straddles a fine line between dark content but still being fun in a vibrant world we wouldn't want to be too grotesque or too cliche we are very careful in balancing tone art and design so our goals for this one are much more ambitious this time around how many of you have played oxenfree awesome so i for you that haven't oxen free is a single player game that's equal parts coming-of-age tale and a supernatural thriller the gameplay is a walk and talk branching narrative where the player can influence the story in a meaningful way our goals for after party we wanted to create a full 3d game two playable characters with a ton of npcs environments with complexity and design and story so we had a few inspirations

we looked at a lot of simon weiner's photographs the way he captures light and shadow in his photos which gives you a mysterious eerie feel we imagine your art to have saturated lights hitting buildings at all times interior lights and neon signs became some of the main light sources for the game we were also inspired by the art of neil camber ross his design sensibility use of color combinations shape languages and how he composes his characters in his paintings we kind of like the haphazard rickety architecture we created for hotel tea how shadows were designed inside the overall shape of the structure jamie hill's gorillas was also a big inspiration for the character designs fashion edginess and grit the rendering and lighting for our character was inspired by the scene the

movie called belly you guys remember it's directed by hype williams where crowds are bathed and lit by multiple colored lights you can see this beginning in the movie it's a slow-mo shot so as they walk into the bar there might be a trailer for it so maybe speaking of trailers let's look at after party trailer if you haven't already seen it so each department had a hand in making this trailer as a small studio you kind of have to so all of it was captured in game footage milo how long have we been friends our entire lives our whole entire lives and so i want you to understand that i'm not blaming you for getting us killed and sent to hell two uh what do you want two dead orphans and i'm not even saying how drinking satan to get back home is the worst idea

you've ever had okay well lola what are you saying [Music] so [Music] i'm just saying you should pace yourself [Music] uh lola can you get alcohol poisoning in hell all right let's talk about visual targets uh we start off with illustrations uh created by amazing artists claire chan

and beverly chen no they're not related uh what's a crazy night out in hell look like debauchery rollicking fun tomfoolery those are some of our demons in the game we wanted to lean into bright colors and dark shadows by using volumetric spotlights to center the action we created a drinking minigame similar to the drinking game in indiana jones you guys know pastor our protagonist had to practice drinking with other demons in order to beat the prince of partying so for this illustration with drinking at your disposal we wanted to show how they might act when they start to get a little drunk we brainstormed with our marketing manager kylie moses from a brand perspective on how moments we can show our fans the tone and art style of the game for an indie company we don't have the huge marketing budget so we try to share as much production art as we can with our fans on social media

to keep them excited and in the loop neon signage helped fill the gaps of darkness and extend color choices we have in this world quiet moments are outside and the party ends inside the bars where most of the story moments and quests happen our designers sound designers scientific and eduardo ortiz frau help party atmosphere with the run of the jewel style music tracks we also have an incredible cast of voice actors known after party koi dao as milo janina gavanker as lola drinking is a mechanic in the game we have demon bartenders that could serve you a variety of drinks which you can use to call your dialogue choices it's kind of like cosplaying with drinks here are a few example drinks you have in the game so when you take a drink a third dialog bubble pops up and opens a new branch in the story we call the dialogue option liquid

courage so one of our biggest challenges was art luckily we have a talented art team at night school studio so oxenfree lends itself to a muted color palette with a soft painterly style for after party a vibrant color palette and neon signs were a big jumping off point for the look and feel of the game since players will spend most of their time in bars we wanted exterior interior spaces to have a modern city feel yet showcase a primitive historic hell vibe here's some exploration of shape language and building designs and how each level might be composed our hail composes of different islands on the river sticks the game is side scrolling similar to oxenfree but using a perspective camera we use lava mountains as our backdrop to populate the world along with molten waters where you can take a

hail ferry to each location you also meet a cab driver named sam hill where she can take you from bar to bar so even in hell you shouldn't drink and drive samantha hill is kind of the character in the die hard movie argyle so she's kind of like your tour guide slash parental figure in the game this is the concept art for the first level of the game we chose the color red to acclimate the player to the world we wanted help to have a familiar initial vibe so the player can cross the visual threshold we did lava waterfalls college town kind of atmosphere with long lines like at the dmv you know hell this one's inspired by a college town of ufc we built a bunch of sports bars dorms a great hall libraries the park and the scales of justice in the background

this is also where milo and lola discover they are in hell so we wanted a player and the characters to be on the same page in the story this bar is called feisty's is your typical sports bar where you can play drinking games beer pong and watch demons play sports on television this concept was inspired by the boroughs of new york city demons over time created their own urban landscape that has been haphazardly put together and stacked over the years so after the player settles into our version of hell we start to then break away from the hellotropes and our stereotypes we all know we start to introduce color variations within each island or zone to match the tone and fun colorful nightlife of the game this level was inspired by the busy nightlife of shibuya japan in an after party we have many games woven to the story

and each have a purpose to advance the player you can just hear this good inferno playing in the background in a bar called skull you can have a dance-off mini game ddr style with a demon to gain their suspect for a possible quest payoff this club was inspired by the bdsm club in l.a called bar sinister sean you've been there right all right this level little rentalia was inspired by the architecture of washington dc where courts and hell monuments reside this is the oldest location uh in hell to the left is where satan fell from heaven there's a big hole now and it became a natural tourist attraction and a great selfie spot the gates of hell are also in the background this is where all the poor souls walk to get tortured below that is a club called sealed knot

so the design was inspired by catacombs in paris our interior spaces also have a familiar but mysterious look and the sealed knot is our version of a speakeasy where only demons are allowed inside our lead designer joe gatling designed all the levels along with art and story teams to which we had a fair amount of variation in nostalgia to complement the tone and story with months of concepting the next challenge was our vertical slice so this zone is called first in izzard where you can find your first typical dive bar we started to call out assets we would need to build in 3d this bar the schoolyard strangler on the far right where you can take your first drink in hell our camera is a lot closer to the characters in this game so we wanted more depth in the middle

ground foreground and background so we want to create that parallaxing in this game the construction and design for the bar and schoolyard strangler was inspired by an old church in new york city that was later converted to a club in the 90s called the limelight my wife samantha has been there when she was a teenager i think during like the hip-hop nights or something so now i think it's a crossfit gym which is kind of sad we're going to go with modular design and only create bars that we interact with the plan was to create basic looking buildings to fill the structures and gaps between the background we started to build a prop library we can distribute and reuse the entire game so we started the model street lamp street signs gates satan monuments rocks and tombstones we also start to think about the texture quality we

wanted to put inside the each model we model 3d trees trash cans dumpsters piles of human skull also a library of torture devices that hints the activities during demon work hours eric romano one of our 3d artists created this prototype we first started with no textures and tried to experiment with volumetric lights and emission he then modeled and textured the sample bar here we decided to figure out the poly count of each model and texture detail then i started to assemble the scale of the world and figure out how dynamic lighting was going to work with effects and fog working with the post-processing stack in unity we wanted to see how much we can get away with with minimal color grading you can kind of see alex from oxenfree hanging out she was kind of our test model for the scene

so after modeling and texturing finished for the buildings and props i started to assemble our vertical slice in unity as we progress with the first level we start to find visual fidelity problems the unity terrain and the models just look like any other 3d game we weren't getting the handcrafted look we were going for with basic lighting and texturing plus it nearly took months to model and texture the vertical slice this was just one exterior location we still had a ton of interior spaces to build we were losing detail that our artist created in the concept art and it wasn't coming through at all in the 3d environments at this point we were me we weren't meeting our original vision for the game this is the concept art we started with so does it look like we'd hit

our original vision nope something in our process had to change sean crankle our co-founder and studio director called an all hands meeting to talk about our challenge we had to pivot in a small studio with limited resources and people we had to take a step back and look how we made oxenfree every game is different and each will have its own problems it's just taking a long time to build each zone and the usual pipeline wasn't getting us there you weren't able to execute the vision we had hoped for so sometimes failure pushes you to create creatively solve problems so we asked ourselves so what's been done before that worked oxen-free lead artists had the girls created this look and feel and was translated in a game engine using sprites

with an orthographic camera by pointing out the reason for failure only then is when we can start to learn to fix them for after party we wanted to come to our concept art to have a direct line into modeling we were kind of losing all of our artists work in the process so we had to bridge the gap between concept art into in-game art basically make the game look like dart work so people don't realize how hard that is to do seeing it in concept art standing it up and building it laid out and how it's modeled shaded animated and how it looks in the scene through camera that's a really difficult task but the devil is in the details we communicated to the entire team that the vision of the game wasn't being fulfilled after an all hands meeting we'll work together and figure out a new pipeline we wanted the in-game environment part to look like the concept art but with more depth and work with real-time lighting

here's how we did it with our new pipeline so we went back to the drawing board we set out to create a small exterior and interior space to test out our new pipeline we found an immediate success with a new technique i can show you a result of these two a little later but the solution was how geometry was modeled how artists created the concept art in photoshop an initiator written by our lead developer engineer brian cannon to bridge the gap of concept art into in-game art concept art had to be painted on how we want to see it in the perspective camera this was our new vertical slice first lizard our artist would hand the concept art for modelers eric romano and alex chavez they would then rotoscope the concept art model the car's geometry precisely around each piece then the geo gets uv'd and

broken out into separate maps so there's still a fair amount of 3d in the game the terrain the doors the lamps and anything the characters had to interact with were 3d the rest were simple cards that were pushed and pulled to cheat the perspective camera here's how the scene is broken down to show you the 3d geometry we used the poly brush texture plugin for the terrain which gave us three texture channels a custom shader was designed to seamlessly blend the art with the lighting and modeling we called it the bartender shader so we tried just using the unity light mapping but it didn't achieve the nuances of the concept art since our 3d geometry budget was so limited the solution was to add a texture input to the standard shader that acted as a custom light map so the custom light map uh just included stylized highlights

layer that is basically a special emission layer that multiplies the light value by the albedo the textures would then be passed back to our artist claire in beverly to create albedo light map and emissive layers in photoshop light maps were used to add color and rim lights to the gray middle value of the albedo they had to be separate from the albedo so artists can have more flexibility when balancing the textures with the real-time lighting here's how the artists layer their files in photoshop all the light map layers are set to multiply emissive maps are painted in for parts that emit lights so when the lighting is baked in turn affecting our characters in the environment along with normal maps metal and rough textures to provide added depth as well as specularity with this new pipeline we empowered our

artists to have more contributions and flexibility in production our modelers then will receive the painted textures and start to disassemble the scene in unity i will then start to light the scene and closely reference the concept designs we originally started with this is our original concept art did we hit our original vision yes we found success these are just the 3d assets in the game engine a bit of unity fog and utilizing the post processing stacking unity our new pipeline helped us achieve the new vision so here's a comparison of the old 3d pipeline and the now scalable successful 3d pipeline

so bringing back those two uh exterior space after we pivoted uh we extended the model now and it's a full level in the game called odds vaticans so i had to speed up the image here so you guys can see the entire level of the game here's the first interior space we built concept art above and the game running below with the new technique and pipeline we now have learnings to leverage any concept art style we want now that we successfully had the environment art style and pipeline working in game how do we design characters and scale the world of after party how do we make environment art look alive how do we approach character modeling texturing rigging and animation with a ton of characters we wanted a

variety of shapes and sizes for all of our main characters and npcs adam hines wanted satan to be twice the size and be the most prominent and interesting silhouette in the game all of our characters have to be 3d and they're all modeled in maya and zbrush so starting with our protagonist so here's milo's initial character designs i went through a few changes we started off with cardigans trench coats sporty jackets air jordans and jeans our characters colors had to complement each other since they're going to be together all the time with milo we chose a simple clean design with a yellow cardigan jeans and purple hair that echoed his personality so milo's backstory he's an only child uh intelligent and skated through college with ease his fear of rejection stopped him from making new friends so the choices we made for his designs

were indicative of his personality so you have purple hair like i'm cool um open collared shirt i'm kind of up for anything uh button cardigan i'm reserved open kind of sloppy but don't care jeans and carvers meaning i'm ready for an adventure so here's the 3d model to the left and concept art on the right so here's milo's designs texture sheet and poly count and using the standard standard unity shader i think we got down to around 8 000 triangles for his model so lola went through a few versions as well classic leather jacket jean jacket ripped jeans for her hair we really embraced the iconic thick kinky hair that subtly bounces she definitely had to be a badass

but edgy and fashionable at the same time so it went to classic 1990s overalls old school and trendy rip stockings and doc martens meaning i've been in a few fights and totally kicked some ass solo's backstory um she's the youngest of four sisters her sisters are kind of uppity and materialistic so she's just happy to be done with college and wants to really make a difference in the world so we have our concept art on the left and model on the right so here's our designs model textures and hair cards our modelers really did a great job in just translating our characters into 3d i think lola's model is around 10 000 triangles so the characters clothings and textures create a vision of the characters experiences and lives and roles they have in the

game yellow was a unifying color they both carry that can read from a distance since we were designing two playable characters their outfits and callers had to read clearly an after party in order to get out of hell their friendship had to be put to the test for satan so we wanted his design to be iconic and familiar you know he's been running hell for over a million years and so adam had this idea of layering fashionable clothes over time to kind of beef himself up his personality is a cross between kanye west and dr frankenfurter from rocky horror picture show so satan's backstory he's the first kid in heaven that was uh put into detention so in hell he runs the party 24 hours a day

every day for centuries his design was so crazy so we were wondering how we were going to model him and kind of stay in the decent poly count so from concept art it was going to be a challenge but we did it eric romano claire chen and i attacked him and how to build him correctly satan's model i think clocks in at around 13 000 triangles so the next problem to solve was how to do the rig how to animate all these characters so how do we bring all these characters to life in after party they had to have cool outfits strong design shape posture and animation that caters to their personality type so for rigging we use anzoven's setup machine for games the super cool easy rig rigging tool that makes animations and exports fbx files so in maya we also use a

plugin called studio library where you can save transfer animations and poses we are also able to use blend shapes for human faces and demon masks we are able to transfer all the balance shaped atoms across each mask type their personalities lola is protective snarky and independent milo is friendly nervous and square the animation had to communicate emotions and personality clearly for the acting to read from a distance they had to be comedic alive and have a lot of heart so satan was a huge complicated character with layers of clothing and props it was just a big challenge for his rig to work properly so i started to experiment with cloth

component in unity i kind of just started off with a simple banner flag kind of figure out how it works in unity so now we added cloth dynamics and digital just rigid bodies to help our characters feel alive and to get that free overlap and follow through in the animation so i had to group all that and combine all the right pieces to reduce the amount of draw calls we have so we have his feathers were cloth his necklace and skulls around his neck are all rigid bodies [Music] we also added colliders so the colliders would push and prevent penetration of the cloth around it the materials and shaders was another obstacle to cross with their characters so how do we render them similar to our concept art so they feel part of the game environment

their textures have to come through in the models as well as seamlessly fit into new the new environment modeling and lighting they look great with just an ambient occlusion gi style rendering with a simple background with the standard unity shader but it just wasn't working at all or seeing them clearly with uh our busy environment scenes so our lead engineer bryant had to create a custom tune shader for the characters as well we called it barton shader it consisted of three layers so we wanted the lights to have a bright saturated colors but that washes out all the bright very colors we put into the character's textures we needed a custom shader to keep all the local colors consistent through each lighting situation so the bartoon shader it has base lighting which calculates the global elimination input from the light probes a standard toon shader that desaturates

the light source so the local colors pop even though the light source is saturated the harsh rim light picks up any colored lights on the edges of the character so the top gif uses the standard shader and the bottom gif uses the barton shader now you can clearly see that our characters as they cross that dumpster fire light source you can see their local car color as well as seeing that rim wrap lighting around the edges lighting we also want it to look like the illustrations so how do we render volumetric lighting with a ton of characters the engineers and designers were swamps so we picked up an hx volumetric lighting from the unity store but later on our engineers we wrote

the shaders and um lighting and made a fake volumetric light for each character so it kind of saves us on just any unity caching we had one directional light that's a shadow caster the rest were point lights there were just light probes that were baked into the environment so i designed one of the characters named sister and rari warmhorn milo nola's personal demon in hell you just don't get tortured physically you also get tortured mentally by creatures birthed from your subconscious spheres blend shapes on their arms are also there to kind of create that nice noodly shape we also added an admission layer to the barton shader to help with glowing masks and other props like christmas lights and lampshades with animation we wanted to push the timing acting

and hilarity here's one of our party demons as modius is doing the burning man now let's look at both environment and characters working well together at our vertical slice first and lizard the bartender shader and the bartoon shader in action with one of our three little words being alive how do we design all the npc crowd characters we had the idea of demons wearing masks and glowing eyes to visually represent them and tie them to this world we also played with different proportions to vary their beltline or hip height we also gave them unifying skin color

but grounded them by adding clothing in contrast humans have dot eyes and have a variety of skin tones and outfits we created a variation of horns and mask types for our demons we reference a lot of different outfits that span across different times and cultures we were able to scale out each rig type by having a variation of hair props and texture swaps as well as changing their body mass with blend shapes later on we started to give them cause of death props for just interesting gags so another challenge was managing the crowd and npc characters how do we make our environments look alive aaron cheney one of our engineers

created a dynamic crowd system the dynamic crowd system leverage control randomness to populate hell in an automated naturalistic way while staying out of the player's way with our dynamic crowd system we also wanted to avoid characters walking and standing in front of the camera view it's comedic but we needed more control when staging these ai characters so basically we had to re-condo some scenes we had a combination of dynamic crowds and static characters that sparked joy i created some rule sets for our game designers to follow and keep in mind when looking and hooking up scenes now that all the assets are made it was critical to have the animations acting in staging to have a convincing performance

for eye tracing we wanted the crowd to react to our player characters if our characters toasts or cheers demons and humans in a certain proximity will also start to cheers with you so similar to oxenfree we never try to take player control away like an in-game cutscene will do crowd placement have a purpose and story to really sell the world of hell for example the scene was composed with barbecue demons on the left and ultimately you would have npc standing in line for hell tacos on the far right you have a drunk demon throwing up and another picking a pic and tweeting it about and posting it on bicker bicker is our version of twitter in the game we also created a consistent camera guide to manage height distance

of our camera to our player characters the game of beer pong and pc characters pay attention to the main characters as well as to react who's winning or losing in after party you can drink trash talk and play beer pong all at the same time here's where staging our player characters dynamic crowd system static characters environment playing a role in making the scene work my job as art director is to keep track of each thing that we build and design i really follow it through from the beginning to the end of production

so the art style by finding creative workflows and bringing concept artists more into the production it really helped bridge the gap in concept art and in-game art we were able to solve our art problem by bringing all the engineers and designers together technique have super smart engineers and designers to have them on your side they understand shader work dynamic crowd systems game design limitations that helped us create the game successfully bringing them into the fold and explaining the technical problems help bridge the gap between concept art and game art scope create a game that fits your budget and timeline always weighed the risk of adding too many features we were ambitious in making a bigger game than oxenfree but we succeeded it took a while to get there but we definitely overscoped a tiny bit on

this game skill set and team size lean on your team's strengths empower challenge and nurture a positive working environment artists learning from each other scale the team to the proper scope of the project with our concept artists working in production they were able to have more footprint in the game keep it small and simple make a simple game with few mechanics prototype them early make sure they hit all your design pillars i think starting with a small vertical slice would have helped us spot troubled waters very early failure don't be afraid to fail failure is part of success we were honest and supported each other in finding solutions so there were no egos at all in pointing fingers and who made a mistake we banded together as a team to find a solution in creating the new technique and pipeline

collaborate and communicate don't be afraid to raise a red flag when problems arise be open to learn from each other's team members together find creative ways to solve that problem you know don't be married to anything that you create be open to change and things being cut old monitors were just too precious and we weren't able to use any of them focus with the three little words it helped us check ourselves when it came to this changes about tone art and design it kept us on the right track do you guys remember the three little words we were able to succeed in creating a world that feels comedic i know brian cannon our legionnaire is

probably freaking out right now because of all the draw calls in the game uh but the game has to look alive even though dead in hell a story of friendship that lasts through time seriously though at night school uh we try to create sincere stories and create characters everyone resonates with so sincerely yours ruel thank you gbc thank you so please follow us on twitter at nightschoolers instagram nightschoolstudio instagram rewzilla so i guess we have q a sessions right now if you guys have any questions you can i

guess step up to the mic uh hi uh this was a really great talk thank you um i was just wondering uh you talked a lot about the shader work that goes into creating the lighting effects and the um textures for all the models um what shader editor did you did you guys use did you use like shader forward or forge or do your artist just brute force the shader code i think we uh i think brian our lead engineer just kind of used standard and initiator and kind of hacked into it and started to write a custom script that enabled the extra texture input in the standard shader thank you great thanks

i guess i'll ask a question um so this might be out of the scope of the talk today but i know in the mr robot game as well as oxenfree there were elements of args that were leading up for the marketing of the game and i was wondering if that expanded to any point as far as this game goes on arg yeah the oxenfree arg was a very specific and interesting fun extension of the game i'm not sure maybe thank you perhaps john perhaps probably great question anybody else questions all right cool thank you so much there's going to be a survey uh at the end of this that you guys will probably get emails you can also catch me if you guys want to ask a few more questions i'll be across the hall but thank you very much for showing up to my talk thank you