Gamasutra: The Art & Business of Making Gamesspacer
The Art Of Braid: Creating A Visual Identity For An Unusual Game

Printer-Friendly VersionPrinter-Friendly Version
View All     RSS
April 17, 2014
arrowPress Releases
April 17, 2014
PR Newswire
View All





If you enjoy reading this site, you might also want to check out these UBM TechWeb sites:


 
The Art Of Braid: Creating A Visual Identity For An Unusual Game

August 5, 2008 Article Start Previous Page 6 of 6
 

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.


Article Start Previous Page 6 of 6

Related Jobs

Nexon America, Inc.
Nexon America, Inc. — El Segundo , California, United States
[04.17.14]

Web Designer - Temporary - 3 month
Darkside Game Studios
Darkside Game Studios — Sunrise, Florida, United States
[04.17.14]

Mid-Senior Graphics Programmer
Digital Extremes
Digital Extremes — LONDON, Ontario, Canada
[04.17.14]

UI ARTIST/DESIGNER
Digital Extremes
Digital Extremes — LONDON, Ontario, Canada
[04.17.14]

UI ARTIST/DESIGNER






Comments


Haig James Toutikian
profile image
Great great article! I really liked how it shows the progress of the art direction from the beginning to end with comments under the images :D I hope to see more articles like this one

Jeff McArthur
profile image
Wow great article, thanks for describing (and visually showing) us the iterative process of creating this game. Love the art style, I'm definitely going to have to buy a copy of this game, even if my main point to do so is just enjoying the great art!

robert toone
profile image
Excellent article. I really enjoyed experiencing the experimental development of the art style, for such an art style game. The game looks great and goes along with it's play style.



I look forward to such articles in the future.

Tom Newman
profile image
Great article! Looking forward to any future articles laid out like this!

Gopalakrishna Palem
profile image
Good Article, great principles.



Ensuring aesthetics do not dominate the player's perception of the world, highlights the game design philosophy.



Would love to play this one.

Rikard Peterson
profile image
This article was a bit different than most. Love it!

Jeff Zugale
profile image
This is good stuff, both the artwork and the complex thought process and care behind it. I'll be buying and playing this game to see the rest of it. Thanks for sharing!

Anders Hojsted
profile image
It's interesting how he can tell about these things because he isn't bound by an NDA. There's too little knowledge-sharing like this in the games industry because of all the secrecy.



A.

Christopher Waite
profile image
That was a really insightful article. Actually, it's convinced me to purchase the full game. The effort and passion that has gone into the various iterations of the design, really makes you feel that you are playing something special.

Arthur Times
profile image
This may seem like a dumb question but I'll ask it anyway.



What language did you program the game in. I know XNA Creators Club really focuses on C#, but does XBLA allow C++?



Thanks.

Anonymous
profile image
Being a student of game animation and creation, I absolutely loved this article. Look forward to more like this. It was aa great teaching tool. I am going to put it on our forum in class. Thanks.

Jason Bakker
profile image
Any aspiring game developers want to hazard a guess as to why, on the collision screenshot, there are two different tiles used? (The brick one, and the grey one.)

Aaron Murray
profile image
Thanks for posting this article. As a dev, I love reading about how others attack the issues we face. At the same time, it is helpful for outsiders to see how much work goes into the finished product, and how beneficial constant iteration is...

Jason Bakker
profile image
I guess not ;) If anyone is wondering, it's because in game engines you often flag wall and floor as different collision types, so that the engine knows to collide with each differently (walls tend to be a lot more "slippery" than floors).



If there were screenshots of, for instance, one of the spike floors in the game, that would probably be a different collision type again (so that the engine knows that when you collide with it, you're supposed to die).



The more you know!

Dax Hawkins
profile image
Regarding Arther Times post above:



XBLA to some extent is language agnostic. Most of the games up there are C/C++ but there is one game in C# (Schizoid).



Xbox Live Community games, on the other hand, must be built with XNA Game Studio and written in C#.


none
 
Comment: