The Art of Braid, Part IV: Developer Mode
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!
That’s better!
March 24th, 2008 at 1:41 pm
[...] David Hellman has written another installment about the art of Braid. This time, he discusses the way we build the in-game scenes: the different elements that we compose together, and what the editing process is like. [...]
March 26th, 2008 at 11:58 am
What does the size of each “arrow and dot” icon mean? And is the purpose of the arrow to visually distinguish each particle, or is it simply an artifact of development, like the too-big button text?
March 26th, 2008 at 4:12 pm
Well, Jonathan would be the guy to talk about the origin or purpose for the icon, but it seems like it’s just there to say “this is a particle object.” The icon just has one dot and one arrow, so no, it’s not an arrow-per-particle sort of thing.
Particle objects have a default size. When re-sized, the icon deforms proportionally. Particles within the object don’t deform, though; the dimensions of the object just determine the area within which particles will be generated.
March 27th, 2008 at 4:30 am
The arrow-and-dot doesn’t mean anything. It is just an arbitrary bitmap that I picked out of Braid’s bitmaps directory to draw, in order to show the rectangle where the particle object is. It is even a lousy bitmap for that purpose since what you really want to know is the boundary of the rectangle, and that’s invisible.
You just want to see these as rectangles oriented somewhere in space, and the particles appear at random points inside the rectangles.
March 28th, 2008 at 8:18 am
Thanks for the series of write ups, a really fascinating read.
One question. The the pieced images seem to have translucent borders about 10px wide. When you began to layout the level and overlap the images was there a lot fine tweaking to get the overlaps to look natural and not muddled?
March 28th, 2008 at 8:57 am
It worked pretty well pretty quickly, which was a fun surprise. But it takes some judgment to place the pieces in an optimal way.
One thing that helps a lot is that the rocks and grass have noisy, irregular textures. When I put two pieces side-by-side, I try to find some shadow or other shape in one that can link up to a shape in the other. A continuity like that is pretty convincing to the eye, and amidst all the other irregularity, you’ll ignore the things that don’t match up exactly.
April 12th, 2008 at 4:59 pm
Thank you SO much for publishing this information. I find it extemely interesting and am honestly jealous of the level builder you have at your disposal
Was the editor built from the ground up (if so, what development environment was used if you don’t mind me asking?), or was some of it part of an existing solution? Thanks again and I continue to look forward to playing Braid!
July 14th, 2008 at 3:48 am
What’s the difference between the brick textured collision rect and the transparent white collision rects (if any)?
Thanks for this writeup
.
July 15th, 2008 at 5:40 am
Also – in that same screenshot (the collision layer). Is the object highlighted in greeen (presumably selected) an abstract collision shape? If so how is it made – is it just a texture or is there a whole bunch of vertices defining that shape?
Really cool stuff
I’m intrigued. I am dying to experience Braid, luckily I don’t have to wait too much longer!
July 30th, 2008 at 6:32 am
The brick-textured collision rectangles are sort of the normal ones, while the transparent white ones are linked together — a way of creating a multi-part surface, like a curved hill or uneven ground, without little seams or gaps.
The object highlighted in green that you pointed out is just the marker for the multi-part surface. It doesn’t have any collision properties of its own.
August 19th, 2008 at 1:09 pm
I really enjoyed this description of the art of Braid. I have yet to see the game running in it’s full glory since I have only seen a few videos scattered around the Net that in quality does not do the art justice. Unfortunately I have to wait for the PC version since I do not own an XBox 360 anymore.
One question David: Does the level editor use a tile based system to save the map or does it create a full image? The reason I ask is that it feels from your description like you can place the pieces as you want and not just in a fixed place like in normal tile based maps (which are normally placed side by side).
August 21st, 2008 at 1:00 am
That’s correct, the pieces of art that make up the levels can be placed anywhere … at any pixel location, and at any rotation. They overlap with transparent edges, thereby blending together.
When the levels are drawn, the engine draws all the pieces in whatever positions and orientations they’ve been set to. So no, it doesn’t “flatten” everything down into a full image per level.
September 8th, 2008 at 3:58 pm
Do you still plan on releasing a level editor, or is such unlockable by hitting the correct series of buttons on the XBLA version?
September 8th, 2008 at 4:09 pm
There’s no level editor in the XBOX version. From what I understand, it would not be possible to have a Braid level editor on XBOX … something to do with Microsoft’s rules about … something. (My intentional vagueness should dissuade anyone from quoting me on that!)
I know Jon wanted to create a level editor for the PC version, and the demand for it is well-noted. Jon is working on the PC version now, as his blog attests. I don’t have any information on its progress, though.
February 3rd, 2009 at 7:46 am
[...] fixed along grids and all the tiles are the same dimensions. I’ve modeled my editor on the Braid editor and the Aquaria editor, pretty much the gold standard for 2D editors as far as I’m concerned. [...]
March 2nd, 2009 at 1:41 am
[...] Level Editor Video Level Editing in Braid Boingo Trailer with editor [...]
April 19th, 2009 at 5:49 pm
[...] Las dinamicas del juego son geniales, tenía la impresión por los comentarios que habia oído que la unica dinamica que existia era la de controlar la dirección del tiempo, pero fue gratificante descubrir que cada mundo tiene dinamicas basadas en tiempo pero variadas, me gusto mucho manejar la sombra (fue la que más trabajo me costó asimilar). Las gráficas realmente son muy vividas y como un extra, a alguien se le olvidó el editor de niveles en esta versión y puedes echarle un vistazo al motor del juego y te quedas sorprendido con lo que mueve, claro si no quieres romper tu compra, David Hellman, el artista, nos ilumina un poco en esa area: http://www.davidhellman.net/blog/the-art-of-braid-part-4/ [...]