This entry is nominally about the title screen, but Braid doesn’t have one in the traditional sense. Most video game title screens are just like DVD menus: they show the title, usually some kind of collage or splash image, and present a list of choices: play, select chapter, configure this or that, etc. Braid starts immediately into the game, with no preamble. The game launches, and you are Tim.

This is what the title screen looked like when I joined the project. The protagonist, Tim, appears in silhouette on the left. The sky flickers gently with subtle particle effects. The music sets a calm, contemplative mood. (There’s also a ladder to the right of the sun, leading down to an unseen place. That’s a super-secret thing that’s been removed.) A billboard briefs the player on the controls.

The only way to go is right. You can use the ladder to descend from the roof, or just take a fall. A constellation slides into view.

Proceed a bit further, and you’ll drop down into another area. Again, you can use the ladder or just fall.

This is where you’ll end up: the “hub” which leads to all the worlds you can visit. The large picture frames reflect your progress as you solve puzzles in their respective worlds. Naturally, you’ll return here many times, after each otherworldly excursion.

I asked Jonathan what sort of place this hub was meant to be, and he said there was room for interpretation. It needed to be a distinctly “real world” place to contrast with the imaginative realms Tim travels to. It could be an office, or a gallery… I felt it should be Tim’s home, a place of reflection and repose. (A future article will go into much more detail on the hub area.)

This is what I came up with as a concept for the outdoor area. The sunset seemed to set the right mood, so I didn’t question that. I wanted to emphasize the transition from a public space to a private space, so we start with a pulsing cityscape and move to a quiet residential street illuminated by a few lonely lamps.

The rooftop became a bridge. This seemed like a more normal place for Tim to walk, and suggests that maybe he is on his way home after a day at work (he wears a tie, after all). More importantly, if he is running around on rooftops like Batman, maybe players wouldn’t feel certain that the hub was his home, and not some random place he’s busting into.

As a slight digression, we considered ending the game with Tim running over rooftops (not unlike like Batman, it now occurs to me) …

… and dropping from a ladder …

… and landing back at the title screen, which has settled into night.

We didn’t use this, though. I definitely wouldn’t be spoiling something like that.

Here’s an early version of the title screen, based on that concept. It now has a title, obviously! Jonathan built the text from particles, so it moves like fire burning in the sky. Again, this is not a traditional title screen: when you see this, the game has already started, and you are already in control of Tim.

I’m personally pleased with how the bridge worked out. Its bold horizontal stripe across the screen references the platform genre, in which running to the right is the most fundamental player action. In fact, it’s the first thing Braid invites you to do, as it carefully introduces its basic concepts. The silhouetting removes unique detail, and leans towards symbolism. In a way, Braid is a re-envisioning of, and comment on, the platform genre, so this sort of iconography feels very germane.

I added some new buildings along the bottom, but their converging lines didn’t suit the game’s 2-D perspective. You know what that means: they got axed!

A little more painting, and things were looking pretty cool.

After the scene looked basically how I wanted, I broke it down into pieces, so they can scroll by at different speeds, depending on how close they are to the foreground. The way this works is I duplicate the whole image, and erase around the area I want to isolate, manually creating a soft, irregular fringe. Objects further back need to be extended so that their incompleteness isn’t revealed as overlapping layers move relative to them.

By the way, the above screenshot shows the level editor, explicated in Part 4 of this series.

Certain areas of the title screen have custom-made overlays. They’re applied as particles, but rather than generating many instances of something in many positions within a bounding box, they generate a single image in a single, specific location. This is achieved by using a normal particle object with a very low particle count ā€“ say, 1 ā€“ and by making the bounding box smaller than the image assigned to it. The overlays fade gently and irregularly in and out. They’re intended to contribute to the overall impression of shifting light. This again supports Braid’s theme of a world in revision, and subjectivity of perception and thought.

Here’s the title screen as it exists now. It’s very gentle and soothing to look at. One day, some obese kid will die after looking at this screen for three straight days, and congress will convene a special session.

But now, there is adventuring to do! When Tim takes a few steps, the title vanishes.

As Tim continues to the right, and the screen scrolls, you can see the depth of the cityscape. Oh wait, you can’t, because these screenshots are static! If you want to see this in motion, watch The 1UP Show’s Braid Interview; it opens with this scene.

As Tim nears the house, he gets a little brighter …

… until he is revealed in his full sexiness.

Bonus: Braid title screen wallpaper for people running three monitors! Send in a picture of your set-up and you’ll be featured!

BREAKING! 4/24: Paul Broadbent has risen to the challenge!

18 Responses to “The Art of Braid, Part VII: The Title Screen”

  1. Aaron Says:

    I’m just wondering if there is any chance that this game will on the Wii (Wiiware).

  2. Paul Says:

    That, like the rest of the game, looks amazing! I’m really looking forward to seeing this all in action (shame the PC version is still a while off).
    Thanks for the triple monitor wallpaper, it’s nice to finally get a good use out of my three monitors at work. The only problem now is that I just want to minimise everything and stare at my background all day!

  3. Tinus Says:

    Awesome post, like the previous ones. I find it very interesting to see how much care you guys have put into the design (and redesign) of every element. It seems like you’re not just making a game, it’s like you’re raising a child!

  4. Alex Says:

    Leave it to Braid to make me excited about a title screen…

  5. Stephen H. Says:

    Thanks for posting these, I find them interesting and informative to see the creative decisions you went through. Looking forward to the game.

  6. laurie Says:

    If I were less poor, I would buy an Xbox just to play this.

  7. David Hellman Says:

    Thanks for all your comments. To Aaron’s question about WiiWare, my understanding is that would be a difficult port, because of the difference in hardware power. Also, the Wii only has 512MB of flash memory, versus the roomy hard drives of the XBOX or PC. But I’ll just leave it there and maybe Jonathan will give a better answer.

    Paul, if you are seriously rocking the wallpaper on a three-monitor setup, take a picture of your work space and I will make you famous!!

  8. auntie pixelante › threading braid Says:

    [...] he’s been posting a blog about the process of illustrating the game. the latest entry is on the title screen. Iā€™m personally pleased with how the bridge worked out. Its bold horizontal stripe across the [...]

  9. Doug Orleans Says:

    Oh, that’s a sunset? From the screenshots I thought it was a city on fire.

  10. David Hellman » Blog Archive » 1 Wallpaper + 3 Monitors = 4 Says:

    [...] person to take seriously my suggestion that the panoramic screenshot collage that closed out the last Art of Braid article would make a great super-wide background for those who can accommodate [...]

  11. David Hellman Says:

    Doug: Hmmm, yes. I have heard that before. I don’t blame you…

  12. Scone Says:

    This game looks absolutely gorgeous. There are so few games that stress art like this one does. I’m looking forward to enjoying the experience.

    I too thought that the cityscape at the beginning was burning, but I was hit by the same mood that the sunset was trying to present all the same.

  13. David Hellman Says:

    Thanks, Scone. You and Doug are not the first to say the city appears to be burning. This week I’ve tried to mitigate that impression a bit with some subtle changes that probably won’t make any difference. See how I lost all confidence over the duration of that sentence? Anyway, I added a sun, which probably should have been there all along!

    As ever, thanks for your feedback.

  14. TheBBPS.com (50% American, 50% Canadian, 100% Awesome) » Wallpaper: Triple-wide Braid desktop Says:

    [...] one here comes straight from Braid artist David Hellman’s website. There’s actually quite a few posts about the art direction for Braid, and it’s [...]

  15. Colin Says:

    What program did you use to make the artwork for the game?

  16. Soren Says:

    Hi
    Thank you for the best game of, yeah, i’ve ever played. I have wanted for a long time to get a panoramic blowup of one of the scenes from Braid on my living room wall. I would have loved to have the final scene with tim standing on the balcony, but the intro sequence would be awesome as well. Do you think theres anyway you would have a picture thats good enough quality to be blown up to about maybe 3 feet by 9?

    Thank you
    Soren

  17. HJKn Says:

    Still amazing, even to this day.

  18. Kareem Says:

    ^ even to this day ^^,
    and probably going to be even for the next millennium ;)

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