March 24th, 2008
This installment shows the developer tools created by Jonathan Blow, which I used to build Braid’s landscapes. It’s a backstage tour cluttered with scaffolding and pulleys. It’s not pretty, but it’s True. (Disclaimer: The text on the buttons is too big because we changed the font at one point and just never fixed it.)
Last week, after writing about the beginnings of World 2, I found myself adding the finishing touches to those same areas. One of my early goals was to make the game look like a living painting, irregular and ambiguous. It’s quite a challenge in a game which is built from discrete, re-useable components. But the changes I made to World 2 this week make me feel very comfortable about the finished product.
Writing these features has started to feed back into the creative process. It’s helped me draw closer to the long-held intent which so easily gets muddied and compromised throughout a long gestation.
I’ve enjoyed your comments and feedback, too. A lot of people asked about how the art was broken up and assembled into level maps. In response, I aimed Part III at answering that. It showed how Jonathan and I arrived at the design of World 2, and how those concept paintings got broken down into assets ready to be imported into the game. This part continues in the same vein, showing how those assets got arranged into the landscapes you play through.
This is the beginning of 2-1, the first level the player visits after the home world. It looks a lot cooler than it did a week ago, but that’s hard to tell from a still image. 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!