Developer Mode

Let's take a look at how those pieces of rock and grass got assembled into playable levels. This section shows the developer tools created by Jonathan, which I used to build Braid's landscapes. It's a backstage tour cluttered with scaffolding and pulleys. (Disclaimer: The text on the buttons is too big because we changed the font at one point and just never fixed it.)

This is the beginning of 2-1, the first level the player visits after the home world. You can't tell from a screenshot, but there are a lot of animated particles bringing life to different parts of the screen. More about particles in a moment ...

With the press of a secret button, we enter Developer Mode! Tim disappears and a number of control panels and developer-only items become visible. We can now toggle visibility of different elements, so let's take them one at a time.

Foreground: Here we're just looking at the foreground area that Tim scrambles over. Notice how there are fewer highlights on the grass and rocks, and how the shadowy areas are somewhat less shadowy? That's because the particles are gone.

Particles: Now we're looking at the particles by themselves. In Developer Mode, each particle object bears a large "arrow and dot" icon which is usually invisible. For those who don't know, a particle object generates many instances of an image, or series of images.

For example, some levels are set in an autumn forest, the background full of drifting leaves. I drew a handful of leaves, and threw them into a particle object. The particle object creates hundreds of leaves, each one rotating and falling. There are various parameters you can adjust to dramatically change the end result. Pretty much any movement you see in the landscapes of Braid, except for discrete objects like characters, is particle-based.

At the bottom you can see how particles have been used to add highlights to the grass. The surface of the ground is populated by individual blades of grass, and further down there are fuzzier, zig-zag/wave-shaped particles. When everything is put together, these don't stand out so much, but blend with the grass to make it look more vibrant and alive. That's the intent, anyway.

Background: This is the background. The red bounding boxes delineate one piece of the sky. To reduce the number of empty pixels, irregular images are automatically broken down into rectangular sections.

Collision: This part is usually invisible, but it's the most important. It defines the actual physicality of the world. Without this, you would fall right through the floor.

So how does the "magic" happen? I start by creating a new file and importing a group of pieced images. They all appear in a pile. One by one I lay them out side-by-side like this.

Luckily I have a lot more than one screen; I can zip around with the WASD keys. Spacebar allows me to flip back and forth between this and the level I'm working on. I literally just copy and paste (ctrl-c, ctrl-v) these pieces from one file to another, as needed.

Each piece can be scaled, rotated, clipped or tinted. Each one also has a depth value which determines whether it's in front of or behind surrounding pieces. You can see that piece below the red tinted one is clipped (it has hard edges on three sides). It's just there to fill in a gap between two pieces that go on top of it. Clipping makes pieces a lot more versatile.

Tinting usually isn't as dramatic as here; most frequently it's just used to darken pieces further from the active play area.

For me, this stage of the process is a lot of fun. After the hard work of coming up with new art, I get to play toy blocks and see how it looks in action. Back in the days of creating custom Lode Runner maps on NES, I wouldn't have thought it could be a job!

Nooo! All my hard work!

That's better!

Braid was finally finished in June this year. Thanks to a reluctantly compromising perfectionism ("uncompromising" is too idealistic), it took longer than expected, but I'm proud of the results. I hope players will feel the care that went into this game.