An interesting article about the artwork in Braid

I recently bought a game on Xbox live called Braid. Its a platform game that lets you control time and its the greatest platformer game I've ever played. The gameplay is unique with how time can fast forward and rewind, and some objects are time independent etc etc. I have no idea how the guy programmed it... but what was truely captivating is the artwork!

<img src="http://img232.imageshack.us/img232/6552/braidpi6.jpg">

Anyway I found an article about how the guy creates this kind of artwork, and it looks like its just sprites of rocks, grass, dirt, etc....and each bit of scenery is scaled and rotated and placed in the level, and with these building blocks he forms the levels.

The result is you dont get level that look like they are made of tiles, instead the level is like a painting...and thats the look Braid was going for.

Anyway heres a link to the article

http://www.davidhellman.net/blog/the-ar ... id-part-3/

I drew some graphics myself and did the same thing as the creator of braid did (feature the edges of the tiles, but with erasor) and the result is pretty good

<img src="http://img136.imageshack.us/img136/8655/screenshotwi4.jpg">

Noice

It's amazing how you got such an organic looking background with so few sprites. How long did that mockup take you?

Hmm probably wasted a good half hour heh...

I been playing around trying out different styles for drawing ground and grass and stuff

I recorded a video

http://www.fileshack.us/get_file.php?id ... hstyle.rar

Thats not the graphic I ended up using, but its kinda similar except I made my brush textured

But yeah being able to independantly rotate,scale and tint each instance of a sprite in the layout editor makes making these kind of levels really easy! It would be a real headache if Construct limited you to have the same size and angle for every instance!

The level itself in this mockup took me only about 10 minutes to assemble.

Sweet vid.

I wonder how easy it would be to make a non-linear* level editor for this type of artwork? Something that records the position, size, and angle of each sprite in an external file.

I know Aquaria uses a similar technique for it's level design, and they have a level editor available for public use (the same editor they used to make the game, in fact).

*(By this I mean, not a grid like most level editors are)

See source code of constructs layout editor

See source code of constructs layout editor

What I meant was making a level editor with Construct. And actually I don't imagine it would be too difficult.

Okay I made an editor. It can load and save files to and from clipboard. Heres a level

4,285,484,311,149,355,4,488,487,320,153,348,4,479,458,295,141,347,1,109,218,256,226,47,4,175,398,201,96,74,1,70,333,232,205,54,4,177,448,260,125,34,1,234,-20,22,19,180,4,147,502,379,182,16,1,58,503,337,298,16,4,72,547,509,244,3,1,214,554,230,203,17,4,209,211,130,62,90,1,337,557,235,207,9,4,193,295,148,71,93,1,486,566,284,251,355,5,218,454,189,113,352,1,644,542,223,197,10,5,142,469,214,128,348,1,765,567,110,97,20,5,418,457,166,99,346,1,708,579,269,237,5,5,328,458,195,116,345,2,294,481,325,147,353,5,126,517,307,183,344,2,484,477,280,126,344,4,17,133,145,69,326,2,685,490,296,133,8,2,160,393,190,86,67,2,190,252,222,100,92,2,140,136,195,88,19,2,31,132,161,72,318,1,39,214,168,148,333,
[/code:8jd7bj30]

To use the editor, use your numberpad and hit a number between 1 and 5. Then click and drag...you'll work it out

Another level

4,436,475,174,83,349,4,517,433,121,58,300,4,555,378,145,69,285,1,112,464,139,122,352,4,431,519,246,118,328,1,220,502,191,168,327,4,457,540,236,113,305,1,85,548,193,170,10,4,283,515,263,126,334,1,167,575,166,146,339,4,304,567,368,176,331,1,292,556,164,145,311,4,337,576,282,135,356,1,323,488,131,115,303,4,214,519,410,197,356,2,181,443,254,114,357,4,71,574,540,259,5,2,45,450,174,78,320,4,155,577,504,242,179,2,324,446,160,72,0,4,388,470,304,146,4,3,447,440,164,80,3,5,415,479,254,152,346,3,511,397,265,130,303,5,332,532,303,181,351,3,540,300,173,84,216,5,217,562,324,194,172,3,440,185,214,105,246,4,264,458,206,99,359,4,175,457,230,110,356,2,422,86,117,52,297,2,484,95,144,65,48,5,425,87,124,74,290,2,546,202,199,90,46,4,740,269,82,39,43,2,632,337,214,96,51,2,695,355,239,108,276,2,753,283,119,53,38,2,603,570,164,74,33,3,624,461,213,104,124,3,651,432,246,120,134,2,696,400,168,76,100,2,647,459,132,59,141,1,644,410,111,98,108,1,587,412,104,91,318,1,597,364,73,64,304,1,530,484,90,79,303,1,554,456,69,61,313,1,519,220,98,86,278,1,496,171,42,37,250,1,496,186,66,58,264,1,469,133,62,54,268,1,455,96,60,53,275,1,486,144,64,56,278,1,425,588,140,123,292,1,385,514,111,98,293,1,418,515,147,130,320,1,492,579,194,171,293,1,563,580,86,76,321,1,430,533,172,152,354,1,368,565,142,125,322,1,368,511,123,108,296,1,592,597,66,58,354,2,202,82,202,91,99,2,125,198,215,97,122,2,36,277,172,77,135,1,127,77,157,138,67,1,170,14,130,114,71,1,33,159,185,163,27,1,98,148,140,123,45,1,44,36,172,152,52,1,37,91,158,139,48,1,95,18,143,126,41,1,19,229,123,108,58,[/code:1we3x0ji]

Beautiful artwork. I love the style!

Okay I made an editor. It can load and save files to and from clipboard.

Dayum, that's tight

1,241,172,131,115,24,1,528,175,129,114,340,2,186,352,121,54,29,2,288,406,152,68,6,2,436,421,177,80,345,2,606,372,186,84,320,[/code:10mcri0a]

Not having Construct on this computer makes baby Jesus cry...

IWANTOSEEIT!!!1!

This is awesome. Someone has to make a game out of this! (David...? )

Wonder if you could make any good random levels with this.

I'm sorry to bring back such an old topic but I'm interested in the way you made these graphics (seen on the wiki) and the search engine brought me here )

Unfortunately I cannot download the video on fileshack :

http://www.fileshack.us/get_file.php?id=169195&file=brushstyle.rar

If possible, could you upload it again or explain how you managed to do it