Last time, we looked at Tim’s house, full of doors to time-warping worlds. Each of those doors leads to a place in the clouds, called the “world and story screen.” It has two main features: 1. podiums presenting books with pieces of story, and 2. doors to the various puzzles of each world.

The way the story is presented in Braid is rather unique. As Tim runs across the screen, he passes a series of podiums. As he arrives at each one, it glows and its fragment of story appears overhead. Because the podiums lie in a path the player must necessarily cross, it’s assured that all players will be aware of the prose, although it’s easily skipped simply by declining to linger before any podium.

Beyond the podiums sits a row of doors. Initially only the first one is accessible; in time, all provide entry to their respective domains. Each door leads to a small area containing a handful of puzzles embodying the unique theme and time mechanic of their world.

Here is the world and story screen for World 2, from some time in 2006. (Pardon the low-quality jpeg.) All of these graphics are placeholder. The doors and podiums and cloudy floor were all created by Jonathan Blow. The background is a photograph which he either took himself or stole from flickr (just guessing). The Tim sprite is by Edmund Mcmillen.

See how the floor is made from cotton balls? That’s Braid’s particle system at work, pumping out bunches of snowy fluff that move and disappear in a cloudy fashion.

Why the cloud theme? Why not just an ordinary room, since these spaces are linked to the more-or-less normal house setting? Well, as you may know, Braid involves travel between worlds of philosophical possibility. Each one expounds in video game puzzle form on some idea of how reality might be organized. In my reading, the clouds suggest an imagination rising above the grounded world, untethered from its logic. It’s a hopeful scene, pregnant with potential. Also, clouds are well-known for their transient, shift-changing properties. As a transitional space between different arrangements of time’s laws, the mercurial nature of clouds is appropriately suggestive.

Also, in some parts of the game, there are moving cloud platforms that Tim can stand on. The story screen creates some precedent for that behavior.

One of the very early things I did for Braid, around September 2006, was draw this revised backdrop for the story screen. It’s night in this version, evoking more of the “dream” connotations of clouds – perhaps a little cliché, but consistent with the imaginary world theme. The moon looks like an eye with a heavy brow of cloud hanging over it. This version of the story screen showed up in Jon’s Braid demonstration at GDC 2007 (briefly, around 15:10 of this Google video).

The story screen looks identical from world to world, but until the last month of development we intended to differentiate them. For the most part, we were going to do this by showing a different landscape, or landmark, approaching in the vista of each story screen. Here’s a series of concepts showing hills and other structures up ahead, growing in scale in each successive screen as though we were soaring through the night sky. At the end, the castle finally stands before us.

One big problem with this is that there is a castle at the end of each world, not one big castle at the end of the game. But in other ways, it might have been appropriate and interesting. Although it does look a lot like certain parts of Yoshi’s Island:

(Stole that picture from the flickr gallery of mirpkered … let me know if you guys turn up a better screen capture.)

When we returned to the story screen to improve on our somewhat hastily-painted night sky backdrop, I proposed a different direction. Clouds are sort of old-fashioned, right? This time the metaphor is is a stage set. The domestic setting of the house starts to look two-dimensional, like balsa wood facades. Besides walls and other house-like features, there are also clouds and waves, depicted in a linear, symbolic style. The rectangular shapes of the walls are also repeated on the right in abstracted form as drifting rectangles with no realistic details. By abstracting the basic shapes of the house, and mingling indoor and outdoor features, my goal was suggest the solid reality of the house becoming uncertain, unsubstantial, and artificial. I imagined a drifting, hovering motion. (As you can see, a few domestic objects are actually drifting around, as though caught in a slow-motion tornado.)

I liked this direction a lot, but it had a few problems. For one thing, it didn’t incorporate a view of the new world. So we tried a revision with that in mind:

Here, the walls of the house grow transparent, revealing the grass-and-rock landscape of World 2 in the distance. The indoor/outdoor contrast is played up, with the moon showing through the clouds.

You can also see the new doors we were working on. The ones on the right are pretty close to some that appear in the final game, although we eventually made them narrower, since horizontal space gets pretty tight in some of these screens. The door on the left, which leads back to the house, was replaced because the empty arch, without an actual a door to open, felt wrong. It just has a different feeling when you interact with it. Usually the door is closed and the action of opening it is accompanied by a creaky/slamming door sound. There didn’t seem to be any real reason to handle this one differently.

In this draft we also looked at the idea of replacing the podiums with hovering pages of text. I suppose I was trying to keep in the hovering theme from the last version. But this was one of those “not better, just different” things (as Jon put it). Podiums were fine, so we went back to those in the next revision.

This revision finds us pretty close to where we started, with the night sky dominated by dramatic cloud shapes. The Word 2 landscape you see in this version is an early version of 2-1 using old graphics by a different artist.

The podiums have lamps that illuminate when Tim stands in front of one.

The night setting just hadn’t felt right. Jon explained that these scenes are meant to convey hope and excitement for what’s ahead – especially in the early parts of the game, which are generally more positive and cheerful.

Clouds are returning to the foreground, although architecture is still present. Clouds are an important recurring theme throughout Braid, and this screen, more than any other, served to establish that. Hence celestial shape-shifting returns as the metaphor for the philosophical and temporal revisions of each world.

Also, the sky here is more appropriate as a backing for text. The previous designs had a lot of detail that would have interfered with legibility.

One final major revision banished the architecture, building the foreground entirely from clouds. Having dropped the theater imagery, the walls in the previous draft didn’t make a lot of sense.

The podiums have been turned towards the screen, consistent with the 2D nature of the gameplay. Rather than a solid base, they now have individual legs, to better show what they are, and prevent them from reading as slabs of some kind.

At a certain point we created icons for all the levels, and revised the doors to display their respective icons. I was a little concerned that the icons were too small to read, but space was already tight. So I proposed a couple of space solutions which would allow for bigger doors. Unfortunately, they were all less elegant than just having all the doors in a row! It was pretty obvious these were not good ideas.

Here’s how this screen looks in the final game. The podiums bear books which open one at a time. To help the player notice that the books are opening, and to underscore the correlation between an open book and its text above, open books emit a glow that drifts upwards like letters floating off the pages.

Unfortunately, the distant landscapes got cut. It was more difficult than anticipated to make them look right. Most of the worlds have very thin floors, i.e. the ground surface is close to the bottom of the screen. Viewed from a distance, that is not really enough floor, so I had to do extra drawing to extend the levels down. The same was true of the walls. Also, each world has a different color background, which is a pretty important component to the look. These backgrounds are usually not the same color at the sky in this screen. This was especially true of World 6, which has a dark background. So it was a little problematic, and in the last stage of development, with more important matters still pressing, we abandoned the distant vistas altogether.

The most notable difference between this draft and the last one, however, can’t be seen in a still image. This screen is fully animated: the clouds flow across the screen true to their transient nature. We accomplished this by taking the original concept drawing, breaking it down into particles, and building the scene in the level editor entirely from those particles. Each part of the screen uses a different set of particles to create a certain texture of cloud.

Here we are in Developer Mode (which was explained in a previous Art of Braid). The particles are hidden now, so this screenshot only shows the static parts of the picture. We had to make sure the background would be the right color, so you wouldn’t see black through the particles as they shift around.

This screenshot shows the particles only, with the static background removed. You can see the black default screen color showing through.

This shot has an arbitrary set of particle objects hidden, just to help you see how things break down.

Here you can see the particle objects that form the floor and walls. I’ve moved things around a little so you can see the individual objects. The bottom horizontal particle object is the primary floor piece; the thin strip of particles above it sits behind its top edge to fill in the spaces and create a more or less flat foor; above that are some darker particles that sit behind the others and help the floor stand out from what’s behind it.

More assorted particles. Again, they’ve been moved around just to help you see them. Compare these shots to the above screenshots and you should be able to figure out where each particle object appears on the screen.

This, of course, is the book emission that appears over an open book. There are two particle objects here: one that generates radial “shining” particles that grow out from the center, and another that creates rising triangular particles that get larger over time.

Purely for demonstration purposes, this screen shows what happens if the bounding box for the shining particles is much bigger: they generate all over the place. In the game, the bounding box is deliberately smaller than the particles themselves so that they’ll all generate in the same place, overlapping.

And finally, an animation showing how it all looks in motion. (Although … it would be much better to have a flash video. When I run fraps and Braid, my system slows down too much, but if anyone else finds a video online that shows this screen without a lot of other stuff going on, let me know.)

As you’ve seen, this screen was a special challenge because of its heavy reliance on particles not only as garnish, but as the main course.

7 Responses to “The Art of Braid, Part IX: World and Story Screen”

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

    [...] David Hellman has posted the latest entry in the Art of Braid series, part 9. This entry explains in great detail how we came up with the final look for the story screens in Braid, and shows all the revisions along the way, explaining our thought process. It is possibly the most informative Art of Braid yet. If you’re interested in game development or the art process for a modern 2D game, I recommend looking at the entire series. [...]

  2. John Says:

    Very impressive. Always great to read about your work. I have a question: Did you do many thumbnails of these concepts? It seems many were taken to finish before a decision was made. Was that to truly understand how the background would behave in the game?

  3. David Hellman Says:

    Well, many of them were revisions of existing images, so it’s not like every one required me to start from scratch. They had to look finished enough to enable a judgment.

  4. Johnson Says:

    I am working on an animated short for school at the moment and had to realize a similar dreamlike world like this. i rembember staring in awe at all those moving organic clouds and thinking “how did he do that goddamnit?!?”

    of course, or film is much much simpler (it’s rotoscoped animation in flash, after all)

    cool to have an inside look on this particularly impressive scene!
    (Another being the startup screen – i ran back and forth for the good part of 10 Minutes, marveling at the parallax scrolling of the buildings! awesome!)

  5. Johnson Says:

    Just thought to let you know about the little fanart i drew with the awesome app called Colors! on the Nintendo DS:

  6. Daniel Says:

    I’m dying for more artwork of “Manhattan”. I Photoshopped a wallpaper of the Manhattan title screen, and would like to see more of it and learn more.

  7. JohnnyW Says:

    Wonderful post! It’s so interesting to see all the different permutations you went through before coming the final (and best) solution. Thanks for that, it’s extremely insightful!

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