Sign in to follow this  
Followers 0
DF Lee

Art Update #3: Creating a Visual Style, Part 3

290 posts in this topic

Hey, backers! We’ve been busy working on a lot of things, including the visual style. Previously, I posted some of our early efforts to define the visual style here. Later on, Bagel did an additional post showing the evolution of his “painting style” for the game.

These early explorations left us with a basic approach to scene composition and painting/texturing style, but we still had a lot of other visual questions to answer, such as: Would the world have enough “depth” and look rich enough to explore? Would the world feel alive and dynamic, despite its painterly origins? Would the character feel like part of the scene?

We also wanted to explore some basic “game structure” questions, like: What would an interaction look like? How much interface is on the screen? Is there a “verb page”? How does the inventory work? How about the camera? Can it “cut,” does it shake, and does it zoom in?

Because the programmers were still developing the core technology used to build the game and because Tim was still working on (at the time) the details of the story, character and setting, we decided to focus on exploring the above questions in one coherent sequence, which we’ve been referring to as the “pre-viz” (pre-visualization) sequence. The idea was that by building a single sequence that would touch on all of these questions we could get an early idea of how many of these pieces would fit together.

As with the first tests, we used Adobe After Effects to create the sequence, but did so with an eye towards implementing things similarly in our actual game engine. Below you can watch the pre-viz sequence and then come back and read about the various parts that went into it. But before you do, please read this...

DISCLAIMER! The characters, environments, writing and everything else shown here are NOT part of the actual game. These are early visualizations that help us answer questions.

Watch the video now then keep on reading!

[vimeo]43566303[/vimeo]

Painting Style

As Bagel posted previously, we’ve been working on the painting style recently--more on the world than the characters at this point! Our goals with our painting style were:

• To preserve a painterly sensibility. Softer edges, broken lines. We wanted to avoid the “Flash” look with crisp, vector edges, lots of gradients and too much “flatness.”

• To create a world that people want to explore. This meant that the style had to help convey a certain level of richness in texture to facilitate that. Because the camera could also “move into” the scene in some cases, we also needed the style to hold up in these situations.

• To achieve a style that is expressive enough to let us communicate the emotional notes of the story. Color is an important tool here. Even though we don’t demonstrate a great deal of color range in the pre-viz, we will be using color heavily in this regard as we develop the various settings in the game.

The image below shows a quick recap on how the painting style evolved:

visualstyle3_01.jpg

Atmosphere

Because our game will have a camera that can travel INTO the screen, we needed some techniques to help soften distant things until the player character gets near them. In a traditional static painting, this depth is often created by painting distant things with looser brush work, less detail and lower color contrast.

That approach works fine when the player can never get to the distant area, but because the player can in our game we had to approach this issue differently. At the same time, we also wanted our world to be more dynamic than a painting so these elements needed to be able to change over time.

A few of the techniques we used in the pre-viz include:

• Fogging. Our approach was a simple one, which was to additively color some distant layers with a color close to the average background color. This “fog” gradually fades out as the player approaches the distant element. We broke up the uniformity of the fog by adding a few animated “fog particles” near the ground of the cabin and mailboxes, which also fade out as the player approaches.

• Depth of Field. Depth of field refers to the real-life camera effect whereby distant objects (or in some cases very close objects) are blurred. Our programmers felt that it would be possible to blur layers based on camera distance in our engine. This adds another layer of depth for us to work with. The blurring is in the pre-viz is very subtle, which is how we plan on using it so that it doesn’t stomp on the painting.

• Light Rays. We put a few slowly animating additively blended light rays in the brightest part of the scene. Our intent was not to dominate the lighting painted into the textures but instead add a sense of “light scattering though the atmosphere” to add further depth.

This image shows these techniques (they are a little hard to see in a static image!):

visualstyle3_02.jpg

Living World

We love creating interesting worlds that are fun to explore so it’s important that the world feel alive and dynamic. We wanted movement, subtle or not, on the screen at all times to help emphasize this.

We added some particle effects such as chimney smoke and leaves blowing across the screen. It’s not clear yet how elaborate our particle systems will be in the actual game, so these elements were hand-animated and kept simple – only just enough to add some movement to the scene.

In addition, we animated little bits of bushes, grass and trees to wave in the wind. Because we didn’t author the textures with this in mind initially, they feel a bit “squishy”, but this is easily solved in production by separating out the bushes and other animated foliage into discrete objects. Also, if we wind up with a lot of outdoor scenes in the final game, we may invest in a “foliage” system to allow for simple wind movement without having to animate all of these elements (which could potentially be a production time and memory concern).

One last thing we wanted to demonstrate was that player actions can change the world. This isn’t a particular new idea in adventure games, but we wanted to make sure it was on our mind. In the pre-viz, after the player activates a control panel, the camera cuts to show a rocket rising out of the cabin. When the player later leaves the cabin, the results of his actions are still visible, as the rocket protrudes from the top of the cabin. This part of the pre-viz was also important because it demonstrated that at times, we will want to be able to cut to a camera in a different part of the world (or a different “room” in adventure game parlance) to show the results of the player’s actions.

World Lighting

We wanted to experiment with some type of dynamic lighting in our world, because this would give us another way to add life and richness to the world. We approached this in two different ways:

• Painted layers. This technique involves painting both a “lights on” and “lights off” version of the same layer. These can be swapped out as lights turn on and off.

• Dynamic lights. This approach uses run-time lights that brighten/darken the scene, using parameters such as color, intensity, radius, and fall-off. The advantage of using these types of lights is that they are capable of a broader range of effects, such as “smoothly” transitioning on/off, moving in the scene, or cycling through different colors. The disadvantage to dynamic lights is that they can hurt performance and aren’t capable of casting specific shadows (in our implementation) or “painterly” pools of light in the same way that painted layers can.

To try and play to strengths of both techniques we combined them. This is most evident in the control room part of the pre-viz. The image sequence below shows some of the individual contributions to the overall effect:

visualstyle3_03.jpg

Character Rim Lighting

As I described in my previous post, we experimented with some basic character lighting by multiplying a gradient texture on top of the character depending on their location in the world. This worked pretty well to tie the character into the basic scene, but when we began to introduce dynamic lights, we felt we needed to see that reflected on the character in some way.

We couldn’t realistically “paint” custom character lighting, because we’d have to do it for every frame of animation. And we couldn’t simply brighten the entire character, because that would fight the world “gradient” lighting mentioned above and probably flatten the character out in most cases. What we did instead was to create a simple rim light effect, which is a bright light that highlights part of the character’s silhouette when near intense light sources.

To do this we calculated a simple “fringe” around the outside of the character and then multiply a gradient on top of it to give it some direction. That result is then colored and added to the character to create the rim light. The color and intensity of the rim light can tie into the world’s dynamic lights to further tie the character into the scene. You can see this in the pre-viz in a few different places, such as the control room and downstairs in the cabin.

Here’s a breakdown of the effect:

visualstyle3_04.jpg

While the effect works pretty well, we’d like to get a more believable modulation of the effect based on some of the details in the character’s textures. We have a few different ideas on how best to implement this, which we will further experiment with when we actually implement it in the game engine.

Interaction

Although the pre-viz sequence wasn't meant to be an example of puzzle game-play, we put in a few interactions just to start to get a feel for how some of them might work. Because we are also targeting iOS and Android devices, we wanted to start off by keeping things simple and clean. The look of the interface elements in the pre-viz is temporary and something that we will develop much later as the final look of the game matures.

Some of the things we explored:

• Clicking on an item. In the pre-viz, the player clicks on a control panel switch and opens a mailbox. In both cases we flash a simple highlight to show that the player has successfully interacted with the objects. It has been discussed whether or not there should be some sort of highlight on all “potentially” interactable objects, to avoid pixel-hunting, but we haven’t made any decision on that yet.

• Picking up an item. The player picks up two items: an envelope and an axe. Rather than open the inventory every time a new item is acquired, we simply flash the “hand/pickup” icon and play a sound to let the player know that the item had been put away. We may or may not play a “pick up” animation in all cases-- I think it depends on how responsive/quick we ultimately want the pickup interaction to be. For the pre-viz, we played a proxy pick up animation for the axe, but didn’t do one for the envelope, so we had an example of each.

• Using an inventory item. We wanted using an inventory item on a target to be straightforward. The player pulls down the inventory, selects the item and either drags it onto or taps the target. The target then highlights to show that a successful interaction has been initiated and the sequence plays out. In the pre-viz the lumberjack successfully uses his axe on the tree, which then transitions to a dialog sequence.

visualstyle3_05.jpg

Dialog Sequences

Thanks to the funding of all of awesome backers, all of the dialog in the game will actually be recorded voice. The voices we used in the pre-viz sequence belong to Double Fine's own Greg Rice (as the Dialog Tree) and Chris Remo (as the hipsterjack).

Being an adventure game, there will of course be dialog sequences, where the player speaks to another character and is able to choose from a variety of responses (a "dialog tree"). Sometimes, especially for short interactions, these might be done from the standard game camera. But for more important or lengthy sequences, we will cut to a closer framing of some sort which will probably feature higher-resolution character faces capable of more facial animation than the full body character.

We want a variety of different camera angles for these sequences, both to keep them fresh and to also support the story telling with the appropriate camera language. For our first sequence, we wanted to try an "A-B" style dialog camera cut. Since this sequence has some comedic timing/reaction, it seemed more appropriate than a more standard adventure game "both characters in one shot" sort of angle.

You may also notice that the Lumberjack’s face looks quite a bit different in these shots. In the final game, the character designs will look consistent from both the standard in-world camera and the close-up dialogue camera. We just used this up-close shot to experiment with the character style a bit, and since the lumberjack is not actually in the final game, we didn't adjust the two approaches to be consistent.

The facial animation itself is still very rough, but it has enough detail to let us try this type of sequence out. For those who want to know a bit more about the facial animation, we created several eyebrow and eye shapes as well as a relatively modest set of visemes, which are various mouth shapes used to put together lip-sync animation. These were simply keyed in after effects with HOLD frames to the recorded dialog. For the actual in-game animation, we will probably have some additional deformation (jaw) and actual head/body movement, too. But we'll talk about animation in a future post!

visualstyle3_06.jpg

Next Steps

I will close this ridiculously long post by outlining some of what the visual team will be focusing on in the near future:

• Implementing the pre-viz in our game engine! This means working with our programmers to translate the assets and help design the tools and processes that will allow the art team to make the content for the game.

• Characters! Although we have not spent much time developing the character or the animation on the pre-viz, you may have noticed a few new animations, such as the front walk and the axe chop, and that is because Ray Crook, long time animator at Double Fine, has recently joined the project! Now that Ray is on the project, we will be focusing on character and animation style a lot more. Expect an update in the future dedicated to the subject!

• Concept design! Now that we know more about the story, characters and locations (including some great ideas from the backers on the brainstorming thread), Bagel, Scott Campbell, Peter Chan and I will start digging into designing these things. I’m sure you’ll be seeing more of this in the coming months.

Thanks for reading!

Share this post


Link to post
Share on other sites

"There will be no hipster lumberjacks in the final game" Love that disclaimer. The literal dialogue tree was hilarious too.

I really like the lighting and camera work. Makes everything look more dynamic and alive. Can't wait to see the concept art for the actual game when it starts coming together.

Edit: I'd really prefer if object highlighting was optional or just a smartphone thing. I'd rather have something like a cursor that changes when you're hovering over an interactive object, and maybe a "highlight useful things" button for people that like that sort of thing.

Edit 2: Attack of the Edits: And YES, please have some humorous pick-up animations. I always loved those in other adventure games.

Share this post


Link to post
Share on other sites

In before people complain about a hipster rocket...anyway joking aside it looks really nice. I like that there was a bounce to the hat while moving. Though certain parts looked to me a little dark while inside the house, I'm guessing that, that would just be about getting the right balance you're seeking in the art style.

Share this post


Link to post
Share on other sites

That was REALLY interesting,

i can t wait to see these ideas/decisions applied to the real design of the final game.

Like, the way you plan to keep smooth edges, that s a great decision indeed since we see way too much clean cut illustrator graphics, these days.

I was wondering, will the engine your programmers are building be able to use overlay, multiply, add and such ''lighting'' effects?

for the light rays for example, you ll need that, right?

Share this post


Link to post
Share on other sites

Really interesting read! Looks like the game's look is coming along great.

As for the picking up animation question, personally I'd prefer that stuff to be animated as it gives the feeling that it's actually the character picking the thing up rather than me. I think the part where he picks up the letter looks kind of disconnected and off, as though there should be an animation there but it's missing. As for the concerns about the time it takes, well, it's an adventure game... Not exactly the most intense, high-speed type of game :)

But yeah, that's just my thoughts on the matter. As I said the style of the game is looking really nice.

Share this post


Link to post
Share on other sites

The tree is hilarious! Just one thing about the video. Sometimes, when the camera zooms in on an area the character is approaching, it changes direction in quite a rough way, although I suppose that will be ironed out.

On Painting Style: I applaud the decision of working out the Flash feel of it, and I think you have achieved it quite nicely.

On Atmosphere: If you can dynamically introduce all those layers without the feeling of them being pre-rendered, as if a film was running in the background, I think it's a fantastic approach, which will only enrich the 2D feel.

On Living World: Maybe I am a bit worried about production time, but if you can automatize things like foliage or insects, etc., would be great.

On Lighting: I also agree that in some areas, there is probably a bit more darkness than I'd like, but I suppose that's an art-style balance or choice issue. Character rim looks great.

On Interaction: Maybe highlighting can be switched on or off... a difficulty option?

On Dialogue: I understand this is just playing with camera angles (which were very appropriate, if I may, for the conversation style) and animations, but I thought it looked great. Loved the light choice on the character as well.

Great job! Keep these post rolling in ;) Hugs from Europe!

Share this post


Link to post
Share on other sites

Very interesting article and entertaining video. Also ... Extreme Lumberjackery !

Share this post


Link to post
Share on other sites

Wow, the game is already making me laugh and it's not even stuff that's going to make it into the final product. Bravo, guys. I'm really excited about what comes next. :D

Share this post


Link to post
Share on other sites

Thanks for the update!

You talk about how you worked with different techniques to make lighting work in your environment but I'm wondering how these translate to the engine. Is the expectation that the programmers will use the same (or very similar) techniques to achieve the same effects in the engine so you guys can continue doing the art this way?

Share this post


Link to post
Share on other sites

This is TOO AWESOME!

Seriously, I keep pausing the video and walking away saying, this can't get any cooler. Then coming back, watching a few more seconds, pausing, and freaking out.

Seriously great update here.

Share this post


Link to post
Share on other sites

This was very interesting. Almost wanted to see this as animation. Lumberjacks that are also space pilots!

Share this post


Link to post
Share on other sites

Really? Axe-to-mouth? lol.

Lookin' really cool, though. Thanks for sharing!

Share this post


Link to post
Share on other sites

I really am digging the art style and the conversation with the tree was great. While looking at the art style posts so far it all seems very unique and it's getting even better with the small touches. But i had a thought while watching this video that it kind of reminded me of the puzzle agent game. The styles are really very different but overall I think it mainly has to do with it being physical media style content being animated.

Share this post


Link to post
Share on other sites

Wow, it's looking great! I want to play it now :) It's so much fun seeing this part of development, and knowing I helped in some small way makes me proud. I love the art style too. There's too much "realism" in games today, and they don't seem like games anymore. Just movies that I click a button occasionally. We need more "old-school" puzzle adventure games.

I agree with Alecs above about the interaction/difficulty. It would be great to have this as a toggle, or set to off on a higher difficulty setting. If it's not possible, I don't care. I just want to play the game....stick me in cryo till it gets released :D

Share this post


Link to post
Share on other sites

This was fun to watch and read about. I wasn't entirely sold on the look early on, but I knew a lot more work was needed and all the added effects really flesh it out. Thank you for outlining your process and laying out early material for all to see. Also, the dialogue tree and voice acting were hilarious, and not in a so bad it's good kind of way, like I could see that little exchange in the game.

edit: I just went back and watched it again and wondered what music you used, and then thought about the sound in general. When does sound work usually happen and will we be receiving updates on that? Not just voice work and music, but the larger design aspect of how sound is used in the game?

Share this post


Link to post
Share on other sites

This was very entertaining and informative. Thanks! The new video looks great. I was kind of worried when the first vid appeared, but this one eliminated them.

Can't wait to see more!

EDIT: I'd love to see Hipsterjack in some way or form in the final game, though!

Share this post


Link to post
Share on other sites

OMFG, this is amazing! I really like how it has come out. Yes! The scene has come to life. I remember talking about this, seeing it is a whole different thing.

A few things I noticed, maybe they are still like that because this is preliminary:

1. The character size change as he walks away seems a bit off to me. It's a little bit odd, when he goes down the path and the camera zooms in it feels unnatural, as if the character is not really in the scene or not in line with it. The size later changes significantly, maybe too much.

2. The walk is a bit crude too, or maybe the general animation speed is a little bit fast, not sure.

3. Shadows - great lighting effects and love it, I would love to see the character cast a different shadow based on the lighting. There are various places in which this could apply (opening the door, walking up the stairs and others).

4. Collisions - not shown here, but would be interesting to see if the character causes subtle animation changes. for example what happens when the character touches the bush leaves

5. Would love to see subtle changes in the back plane too, especially when zooming in on those, either in the first scene or even when in dialog

6. Particles - yes, do it!

7. The scenes are a bit dark, this could work great for a mysterious effect and that particular scene. It might be interesting to see your take on the style for a mid-day scene out in the open.

EDIT: Actually would be interesting to see these scenes a little bit less dark. I seriously had to bring up the brightness of my monitor to appreciate it more, now the white background of this forum is burning my retina.

Oh, and Greg - Producer, t-shirt model and now voice actor - does your talent know no limits?

Share this post


Link to post
Share on other sites

It's... so... beautiful... *sniff*

Seriously, amazing work guys. The only thing I'd critique is the animation, and with a new animator on board I'm sure that'll improve soon.

Share this post


Link to post
Share on other sites

Hmm, I guess I'm going to be the Negative Nancy and say I don't really like the art style all that much. The general style seems to be "slightly blurry" and I'm not digging that. Personally I prefer the looks of games like Broken Sword 1 & 2 and Monkey Island 3 and had hoped for something more in that direction rather than artsy fartsy like with Machinarium. Perhaps I just need to get used to it, dunno - at least I loved the whole Dialog Tree scene, hillarious! Especially enjoyed the axe-to-mouth pun.

Share this post


Link to post
Share on other sites

Excellent, particularly the tree scene - very happy at the thought of dialogue cutting to people's faces (at least sometimes).

edit: it's probably done in the video just so we know what's happening, but dragging inventory items onto things is a terrible mechanic (although it's fine for the odd combining of inventory items). I find it a bit of a clumsy drag if it has to be done for everything, especially with touch devices because it's a much less fluid movement than just twitching a mouse.

edit again: regarding pixel hunting, outlining all 'interactable' (not a word) objects, even if only at the touch of a button or what have you, sounds a little engagement-detracting (not a real phrase). I would prefer something that makes more sense internally to the game world, for instance if there is some clue in the character's behaviour which suggests you've left an environment without interacting with everything. This sort of happened in Grim Fandango, right, since his head would look at relevant stuff, although it wasn't perfect.

Share this post


Link to post
Share on other sites

The pre-viz is looking great: if you guys can get the finished game to look that good and show all those features it'd be wonderful.

Share this post


Link to post
Share on other sites
Sign in to follow this  
Followers 0