The Art of Firewatch

[Music] cool just get started first thing I'm supposed to remind you to please turn off your cell phones and I guess otherwise people are still filing in ok I guess we should begin hello everyone thank you for coming to this session instead of going right to lunch my name is Janie and I am an artist at Campo Santo first a little bit of background about myself I've been doing environment art for games professionally for over 12 years before I joined Campo Santo I was at Double Fine productions for six years most recently I was the lead artist on the cave before Double Fine I was part of much larger teams at EA I was a senior artist once for and in the ps2

era I was a lead world artist on godfather I am now working on Firewatch due out later this year and this is a behind the scenes look at how we are translating a very graphic 2d art style into a 3d world that you can explore in first-person let's jump right in this is a poster we made for the announcement of the game almost exactly a year ago actually right before GDC last year this poster art was also actually kind of the key art for our game at that point a company was only three months old not everybody has started we hadn't found a graphics programmer yet we knew the story we wanted to tell but officially speaking this was really all we had this was the goal post reset for ourselves well this aesthetic didn't just jump out of nowhere the look of the game had been brewing for a few months let me show you this was the first concept sketch by

Allie moss when Sean and Jake the cofounders of Campo Santo first started talking with him about maybe working together and this is about maybe mid 2013 and here are some more or at least the basic premise of the story was already known then like you we know that this happens in a national forest that you play as a fire lookout who spent a lot of time talking to another lookout in under the tower now let me show you how the game looks right now [Music]

[Music] thank you for the next 23 minutes or so I will explain how we were able to create this game world with a very small art team in the last 12 months and if you like what you see and we have a public demo this Friday actually I will share more details at the end and you can come see it for yourself ok let's back up a little bit what is fire watch fire watches and mystery set in the Wyoming wilderness where your only emotional lifeline is the person on the other end of a handheld radio it is a narrative exploration game made in a Unity engine we were using unity 4.5 all last year and we have just transitioned into unity 5 you play as Henry in first

person and you have full body awareness in the game you can look down as your body see that maybe you should hike outside a little more often see your boots going through the grass your hand interacting in the world and you spend a lot of time talking to the Lyla over your handheld radio and she's your supervisor Henry's story takes place in a very specific time in a very specific place we are trying to evoke not necessarily recreate a piece of wilderness in the Shoshone National Forest in Wyoming in the summer of 1989 the world of fire watch is visually very stylized but for Henry's story to be believable and immersive the world has to feel real we really want a player to feel physically connected to Henry in first-person

it is important that as Henry the player feels like he could live in this cabin as a lookout that as forests around him is a place he could have real human thoughts real worries and fuss a real relationship over the radio with delilah the art really needs to support this sense of realness despite whatever stylization so who is making this who is the Camposanto we are a small development team of ten with seven of us based right here in San Francisco one in Vancouver Canada and two in the UK and we all wear many hats so we don't really have titles but this is about the half of us most daily preoccupied with the visual aspects of the game now let's go back to talking a bit more about the key art it is designed by Ollie Moss and as some of you might know he is quite an established graphic designer before he became involved with game

development all these most well known for his poster designs a lot of them are about movies and some are about games his designs are great at clearly communicating an idea while hitting the right emotional tone of the subject and I really really liked that last of us one now let's look a bit into what is so striking about this image if this is to be our art direction for a 3d game we really need to clearly understand what makes this image so special for us why it makes people feel the way they feel when they see it before we can even attempt to translate this into the game analyzing this could be his own lecture so for today I will just pick three key points to talk about I will first list them and then I will go into detail for each one okay number one the colors there are beautiful and bold colors here and there in very distinct layers each layer adds to a

feeling of great depth and distance pretty perfect for a wilderness game and the color palette is solve really sets the right tone for a mystery in the woods number two shapes much of the composition is made with flat shapes with strong distinctive silhouette with abstracted internal details number 3 narrative details you might not notice on first class but if you look closer the story is actually hinted at in the little details ok now let's talk a bit about how we're bringing the layers of colors in this game in some detail now if we were making a 2-d game this would actually be quite easily achieved you know use an eyedropper separate these into paralysing layers and you know BAM but in a 3d world one in which you can walk around it will not to mention Firewatch

is not a level based game and as much as if we love this color orange it will look lovely during the sunset but it really shouldn't look like that and that night or in the morning so copying the colors directly from the concept art and painting it directly onto the assets it's quite out of the question we require instead a dynamic solution since Firewatch takes place in the outdoors the biggest chunk of color is actually determined by the sky sometimes is even more than half of your screen we tried a few different ways to make our sky boxes initially we used a program called view to generate panoramas but we have since developed our own tool to generate procedural skies that really cut down on the compression artifacts and it is also a dynamic tool and this shows you a bit of what else guide to look like now for our sky for our style

we really want to be able to control our sky colors like how you would imagine making such a thing inside Photoshop rather than how you would define a physically correct physically-based sized sky shader due to the time limit I can't go into too much detail about exactly what's going on here but how low our graphics programmer has written a pretty in-depth explanation on our development blog so if you want to read more about it I will share the link and it will be explained there the sky is really important because we also derive a lot of game lighting from the sky and lighting is a huge factor in determining color on screen since the bulk of our development was using unity 4.5 we use the excellent unity extension marmoset sky shop as a our dynamic image based lighting solution the sky shop is so easy to use once you have a visual Sky box and in

our case we use the procedural tool that I just showed in the previous slide you just need to add a shadow passing directional light which is your Sun and with a few button presses and you will have yourself a very naturalistic and very dynamic lighting in the world that matches your sky and this approach pairs ideally with big outdoor spaces and luckily Firewatch falls into that category the upside of having a dynamic solution for lighting is that if you build and interpolation manager on top of it you can change your colors on the fly as the player moves around in one of the ways we trigger a color change is using call trigger volumes so in this video I accidentally place one right around here so it's a mistake it doesn't happen like that in the game but it looks really cool and it illustrates my points so I recorded it yeah it's not like that in the game so we're actually in the video

beside the sky and Sun changing colors something else was also changing its DMUs ferric fog now but before I talk about the fog it is tip time I'm going to share some of these lessons learned all through to talk and these are mostly aimed for smaller developers okay it's not hot tip number one spend the money to buy a tool if it will save you a lot of development time it is very tempting to write your own tools because you know what you want you know how you want it takes a lot of time to make good usable tools and here's the list of unity' extensions that we bought and used and are very thankful for something that is a hundred and twenty dollars per seat is considered very expensive in a unity asset store but if it saves your day or to proceed it is worth it that is equivalent to paying someone fifteen dollars an hour for just one day at work you could be spending that day making

your game better and more unique instead okay so we have sky color so but how do we create those layers leading up to the sky the answer is as I said before atmospheric fog traditionally in 3d games most artists would use fog to enhance the perception of distance the objects are gradually more fogged out as they become more distant in the unity scene fog or the global fog image effect readily achieves us the problem is with just a scene fog is that you only get one color and it also just uniformly becomes stronger as you know it was more distant so in order to get final control over the fog our first instinct was to use a color script stripped texture to modulate the color and intensity of fog based on distance we developed what we are calling stylistic fog it's very innovative name which takes a strip of RGB a texture as

input and it is applied as an additive blend post-process image effects to the scene here's the scene in Firewatch without fog and here it is with stylistic fog and you can see it at a texture strip we're using in the scene and the bottom and this really scary horrific one is my reference fog it is very good for debugging and you can see exactly what pixels in your color strip is affecting which part of your seeing now let's look at the same scene in a different lighting this is actually the same lighting from the video I showed earlier but with no fog and now with stylistic fog when the fog intensity is high it really hits close to the graphic art style of poster and since it is a dynamic system it is very easy to experiment with this is the sunset lighting but with the daytime fog we had earlier it's kind of

fun to just play with it here's another experiment kind of like this one who's weird though I hope this shows how powerful it is to you have good controls over your different colors which brings me to hot tip number two so while I urge you all to buy the tools when you can you are going to have to make some of your own anyway and when you do excuse me develop your custom tools to the strengths of your team with a goal to minimize dependencies for example it makes sense for us to use a color strip texture to control fog because it is very easy for oli who is an excellent 2d artist who lives and frees Photoshop everyday to understand a texture strip intuitively as an input it might not make sense for another team so if let's say a text based input is more comfortable to you than by all means use that instead okay now let's talk about the important of

the color palette itself the colors are not just there to look beautiful the colors on-screen really do drive the mood of the scene it is really important to recognize what kind of mood you are trying to convey with your colors and since Firewatch is a narrative game we are pretty clear on what mood we are trying to tailor for each story moment the art being in harmony with what the player is feeling really does add to the immersive realness of player experience for example when the game is trying to introduce a mysterious perhaps menacing element you really want the mood of the scene to support that you probably don't want that crazy parade you know birthday party color scheme when you're trying to be spooky we sketch out this mood progression with what's called a color script it is the process used frequently in other games and also films this is a chunk of color script from The Incredibles by Pixar and this is our

color sphere for our packs demo and here's another one for a little bit later in the game we try to do this really early in world building when we have to make a new area of the game we pick the most iconic story moment for the locale and build it with that color palette in mind and we do this in passes as well first when you have a pretty rough idea of player experience we have a pretty rough color script and use that information to build a pretty rough gray box and then you know play around it and you're when you're happy with the general scale and pacing we take screenshots from the game paint over it not to how we want and use those to create a more detailed color script which are more like these ones now hot tip number three having a color script really helps a team visually map out player experience whoops I think I went too far anyway I think you guys saw

the thing having a color script really helps a team visually map out player experience from start to finish and be on the same page about expectations make sure you're happy with an overview of player experience with sketches and whatnot before you go into full art production making art ones is not actually that hard having to rework finished assets it is what is really costly for a small team okay now I'm doing it right let's switch gears a bit and talk about shapes and silhouettes now since fire watch is set in the Wyoming wilderness our Wyoming wilderness and not let's say a fantasy Roald Ernest like middle-earth or brutal legend we don't really have giant evil shiny towers or huge statues that we can use to draw to players interest and what do we have lots of trees and rocks everywhere so we have to use those

natural elements to effectively guide the players eye to where we want them to go and this is a quick drawing of how we're using some trees and rocks to see we can funnel the player forward this is how we mark it up pretty quickly and notice how there is already a stuff in sky and some really rough lighting even at this stage and this is a paint over concept all he did over a screen shot after he saw how crappy it was and this is what's currently in the game we nicknamed this pride rock and if you as a team naturally nickname your big shapes during development you are probably on the right track now when creating our trees I focus mostly on the silhouette they create in distance and these are all handmade we don't have sweet tree or anything they still have to look it up close of course but I just make sure

that the lower branches are up to snuff because most of the rest of the tree is usually way beyond player reach these things are actually realistically proportions so there are like 2030 meters tall or even taller real trees are really big all he really wanted our tree shapes to get more stylized and more simplified as they're further out in a distance just like in the key yard now the middle two trees on screen the one in the middle left is what a model would look like without any texture detail and he is hoping that for the middle right it shows what in Ali's mind a reduced detail LOD stylization should look like while the stylistic park is great at cutting down to textured detail it does nothing to simplify the silhouette of the trees at all so how are we going to do this when I was first playing with unity I noticed that when you're

creating in alpha material alpha texture there is this slider called alpha cutoff which essentially determines where the transparency threshold of your alpha testing is and this shows the same tree with three different color alpha cough settings it is much easier to see the difference in silhouette so I realized hmm now if we could somehow adjust a slider as the tree is further out in the distance this would basically achieve the effect we kind of want of simplifying a silhouette and so that's what we did in our foliage shader we do puff out the tree in the alpha test threshold just like this and together with a stylistic fog it does a really good job of simplifying and stylizing what we want to achieve in our direction okay now I've quick few words about our rocks this is the concept sheet for our rocks it is all about the angular shapes and especially the shapes that they

create in pretty harsh lighting and when I was making these I basically only cared about the shape they create I try to make each module one of its unique interesting shape characteristic in all 360 degrees so I can use them differently as I rotate them and think of these as your rock words and just like how you use words to create different sentences we're hoping that we can use these rock words to create different rock sentences so they all mean something different when in combination or you can think of these as Lego blocks you know similar and there's almost no texture detail on these and other than some drybrushed highlights on the edges from the ZBrush sculpt a gentle occlusion baked and a good quality normal map okay let me demonstrate how we actually use these rock modules this is a detailed paint over concept with notes for our front-end you I'm seen it is also the first shot of our teaser trailer and as

you can see the notes are all about how we should arrange the raw composition and this is a quick scene breakdown showing just how we use those to create what all you wanted and you will see a floating one now those floating ones are just the module before I layer onto the scene getting close that's pretty good needs some pointy 20 bits though right there you go I'm missing some stairs and that one's good for stairs [Music] okay so hot tip number four make a small number of modular SS that are versatile for a game full of rocks we actually only have a handful of types keeping your number of SS low makes your life a lot easier because you'll be managing way less data you are likely going to have to retouch all of your assets like

once or twice so if you only need three rocks don't make a fourth one even if it's really fun to make okay I talked a lot about the ways we have abstracted the forests of fire wash down dish just shapes and colors now let's go into the ways we've put narrative details into the world I mentioned earlier that no matter the stylization of the art the world needs to feel real enough to support a real human relationship you build with Delilah and one main way to player interacts with Delilah is through conversing about objects that you can look at or objects that you can pick up examine and you can choose to radio to Delilah and talk about them yeah check out this whiskey so while we focus on the shapes and silhouettes of the generic rocks and trees in the world we did the exact opposite for all the human scale props that has a narrative payoff these items

are actually quite simple in shape but has a lot of detail in the texture and are all very unique and these are all in engine shots actually we just put it in the white room and there are two advantages to this style choice number one it establishes a pretty clear visual language that any object with a certain level of texture detail is something that adds to your story or is something that you could talk to Delilah about and the second is our last hot tip by focusing your art bandwidth on assets that deliver the most payoff in terms of player experience you are basically getting the most bang for your buck there so do use style to your production advantage our rocks and trees are totally simple assets because they only surface at this stage but we put a lot of design love and thought into these props because they do help build narrative and narrative is the core of our game okay now some final thoughts I

would like to encourage you all to embrace your limitations a lot of the art and process decisions we have made developing Firewatch are defined by the people and technology we have available to us knowing what your limitations are and working within them can be very empowering they can push you to play to your strengths and when you do that you can create amazing things with a small team lastly I want to invite you all to our demo date this Friday is from 11:00 to 7:00 on Howard Street between 6:00 and 7:00 so it's only two or three blocks from here very walkable and we have transformed a bit of Soma into a little forest I mean there are real trees and everything like it's awesome and you can play Firewatch there we have demo stations and is a free event you don't need a GDC pass so I'll bring a friend and that's it I hope you all enjoyed the presentation [Applause]

again for those interested in more in-depth explanation for the processes and tools I mentioned or haven't mentioned we try to keep up with our development blog and probably will do more a bit after GDC and please keep in touch Twitter is probably best and please fill in the evaluation form very much appreciate if you do and have a great rest of GDC thank you [Applause]