After doing those concept drawings and abstracts, it was time to bang out some useable assets and see how they’d work in the game. Jonathan had already written an engine for building level maps from irregular chunks of any size. He asked me to take a concept like the ones I’d already done, and break it down into pieces that could be copied and pasted to create the first world. (The first world the player encounters, for reasons initially unexplained, is World 2.)

Behind-the-scenes features sometimes create a false impression of ease and inevitability, like those glib “evolution” pictures showing a fish stepping out of the ocean, becoming a chimp, homo erectus, and then Groucho Marx. Of course it only looks easy if you ignore all the species that died out over millennia of natural selection. For every image you see here, assume a half dozen variations that would have diluted this article but were nonetheless important.

And certainly some stages of a process go more smoothly than others. Looking at this overwhelmingly green concept, it’s safe to assume I was not happy during its creation. The rock walls struggle from one approach to the next, looking like amphibious skin in one place and shattered glass in another. It was time to settle on something, but was what I’d come up with good enough? I kept searching.

This search led me back to the favorite from that earlier batch of concepts:

I adapted that pea green and chalky blue to a more detailed, physical approach. The grass looks soft and grassy, the rocks rocky. The background is partially abstract but incorporates white line drawings of houses and a cathedral.

I felt some relief; it was looking better. But Jonathan said the mood wasn’t right for World 2. The colors were pretty but unnatural, slightly toxic. World 2 is the optimistic start of the adventure. It gently introduces the fundamental player actions, like jumping and climbing. Most importantly, the featured time behavior is “rewind,” the ability to take back a mistake and try again without penalty. It’s a very forgiving world. The art had to add to that sense of forgiveness and positivity.

That lead to these more “normal” colors: brown rocks and a blue sky. The problem with this concept is the intrusiveness of the background. I was trying to create more “visual interest” by adding an arch in the background, and showing the field on the left rising above the foreground, as though it were receding three-dimensionally. But as Jonathan explained, and as I appreciated more and more over the course of the project, there was no point adding visual interest in a way that was contrary to the gameplay. The things to reinforce were those things true to the gameplay. For example, when the player comes to the edge of the cliff, with the ladder leading down, what matters is the cliff and the ladder. In this concept, the background extends the cliff further right. This interferes with the immediate perception of the cliff the way it really is.

Likewise, the bright yellow of the tree is very attention-grabbing, although it has no gameplay purpose.

Meanwhile, I was still trying to find the right look for the rocks and grass. You can see different approaches being tested in different parts of these pictures. Gradually I settled on something and started breaking these concepts down into pieces. These pieces would be imported into the game and arranged, copied and pasted using Jonathan’s development tools. I’ll explain that in more detail in the future.

Some of these early pieces were on the big side, or overly specialized, and therefore not super flexible. Those steps, for example, show up right at the beginning of the game, but nowhere else.

Some wall and corner pieces.

Since it would be kind of boring to see nothing but grass and rocks, I drew some flowers. (By the way, at this point the prototype character sprites were getting replaced by Edmund McMillen‘s designs. These, too, have been replaced for the final game, but more on that later.)

And a door for coming and going. And a ladder, although we didn’t stick with this design.

And a tree. I had this idea to make the tree really useful with these Swiss Army Knife-like appendages. The extensions were separate pieces, so they were all optional. As it turned out, there wasn’t much use for them at all! The tree is still in the game, but without the branches.

Here you can see how those pieces fit together into a level layout. This is still just a Photoshop mockup, though. The grass, rocks and flowers are in a foreground layer, and I was painting the vista in a background layer. It was important to work with the foreground right there, to ensure all parts would relate properly, just like different elements of a painting.

Even though the background was early, I wasn’t entirely satisfied with the direction. It looked too cartoony and literal, with clear outlines. All along I’d wanted to do something abstract or different, not to make it look like a literal, clear depiction of a place. It can be hard, though, not to get in a very literal mindset, when the things you’re producing are discrete and defined. Especially in games, where you are generating discrete objects with explicit functions. But I wanted things to flow together more.

I was thinking about the foreground/background issue, and how to differentiate them more. Maybe the foreground would be rendered in higher detail than the background? And background objects would be roughly-defined, with ambiguous edges. In other words, the more gameplay relevance something had, the more detail it would have. Objects with no gameplay relevance would dissolve into the atmosphere, contributing aesthetically but not intruding into the player’s perception of his physical surroundings.

This painting convinced me it could work. The blue from the sky merges into the leaves of the tree, as the green of the leaves merge back into the sky. Just above the door, a tree is shrouded by a blue haze, which also drifts right…

But how was I going to take this painting and break it down into components without destroying its improvisational, case-specific nature? It wouldn’t suffice to bring in the whole painting as a flat background and just wallpaper the level with it. I wanted the backgrounds to have depth, with a prominent parallax effect, so far away objects would drift by slower than nearby objects. With edges irregular and often undefined, how was I going to decide where objects started and stopped? Creating a cohesive, intermingling impressionist background with discrete cut-out shapes was a challenge I’ve continued to grapple with all the way up to the present. If I can improve the result any more in the final weeks of the project, I will.

Here are some pieces of the sky getting edited in Photoshop. I feathered the edges with the eraser tool so they’d appear contiguous when overlapped.

Trees.

All the background elements for World 2 were ready to go…

12 Responses to “The Art of Braid, Part III: World 2 Comes First”

  1. Braid » Blog Archive » The Art of Braid, Part III. Says:

    [...] Hellman has posted The Art of Braid, Part III over at his blog. This entry goes into a lot of detail about the early art concepts, as they [...]

  2. oligophagy Says:

    When you said the pieces were fuzzy-edged, I imagined just mechanical alpha blends. The brush-stroke-texture stippling you do looks much nicer. The way the backgrounds look like watercolors is cool, too.

    About how many unique foreground pieces went into making World 2?

  3. David Hellman Says:

    Hmm, that’s hard to estimate, especially for World 2. Later worlds tend to have all their specialized assets grouped in one file, but because it was the first and we were still working out our process, W2 stuff is scattered around through a half dozen files. I’m going to go out on a limb and guess 100 to 130 pieces. Keep in mind a lot of them are very small, like those individual flower clumps shown above.

  4. skye Says:

    I’m really curious to see how it all fits together once it’s animated.

  5. David Hellman Says:

    Today I am improving the motion in World 2, tweaking the particles to try and make them less conspicuous, more united with the static images. I think it’s working …

  6. karlo Says:

    You’r doing the right thing. I estimate everything what’s done with some deeper meaning than just commercial purpose.

  7. David Hellman » Blog Archive » The Art of Braid, Part IV: Developer Mode Says:

    [...] of people asked about how the art was broken up and assembled into level maps. In response, I aimed Part III at answering that. I showed how Jonathan and I arrived at the design of World 2, and how those [...]

  8. nich Says:

    thanks for these reports on game assets. they are very interesting and enjoyable.

    i like the representation of perspective and a third dimension in http://www.davidhellman.net/blog/wp-content/uploads/2008/03/aob03-03.jpg

    i don’t see why you couldn’t make the background arch higher or lower than the foreground cliff.

    in fact, i’d leave it as it is. if someone confused the background as an interactable game element, then perhaps they should be playing solitaire instead of a time bending platformer. what was the contrary nature you spoke of?

    is interactable a word? able to be interacted with… hmmm, should be.

  9. David Hellman Says:

    nich, glad you are enjoying these. I’ll try to keep responding to what you guys are curious about.

    It’s not that a reasonably attentive person can’t tell the difference between foreground and background in this image. Probably most people would understand just fine. It has to do with the other thing you mentioned, the “contrary nature.” Part of the aesthetic for Braid is that all aspects — puzzles, story, graphics, etc. — illuminate the same thing, albeit from different angles.

    If the cliff ends in a certain place, the graphics should help you feel that even more, not show you something contradictory that you have to filter out. Some of the backgrounds I drew had this sense of, “look, you’re in an interesting 3-D space!” while the gameplay is strictly 2-D. Yes, the player can ignore or filter out the 3-dimensionality, but then what was its point to begin with?

    The true nature of the game is wonderful and interesting enough. The art should support that, not compete with its own agenda.

    As I write this, I can think of areas where we were more or less absolute about this. In the end, it’s not dogma. It’s a design priority, a sensibility we apply on a case-by-case basis. I’m sure there will be more opportunities to clarify and explore this topic.

  10. Jonathan Geer Says:

    Hey David,

    Thanks so much for sharing this detailed account of the work that went into creating the visual style of the game. I have yet to play it as I don’t own an Xbox, but I’m sure I will download it once it’s on PC. I’m a composer myself, but am interested in the creation of game art, especially when it is a little more unique like this.

  11. CryoNox Says:

    Hi David,

    the levels look like 1 big painting, how did you break it down to smaller blocks that can be repeatedly placed, while retaining that seemless feel to it?

    Is it all about feathering the sides of the images which will connect to others?

  12. David Hellman Says:

    Yeah, that’s basically all it is. Some explanation is here: http://www.davidhellman.net/blog/archives/85

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word