next »

[FTLRalph]

So we all know of tile-based methods, the simple Mario-like approach:



I'm curious though, what other methods there are of building levels for a 2D platformer? For example, this doesn't seem to be using tile-based graphics (Owlboy):



There don't seem to be any discernible repeating tiles in the screenshot. If I had to guess, I'd assume that the level above was constructed in something like Photoshop and is simply one giant texture, is this right?

What are the pros and cons of this approach? What other methods are there?

Curious to see what you guys have to say. Some articles on the subject would also be appreciated.

[Wilson Saunders]

Making a level as one giant texture is not a good idea. There is a lot of empty space that is wasted memory, and making minor changes to the level would be difficult since you would have to modify the texture then modify the collier logic. Chances are Owlboy is made of platform objects that contain a sprite, offset, and collier values. In the level editor the dev would create an instance of a platform then place it in the world and play test it to make sure the player can reach it. The dev may need to shift the platform around a bit, but this should be a fairly fast process if the level editor and play test tool are one an the same. Once the Dev has the level to his liking he saves the offsets and platform indexes to a file that will be loaded when the player enters the level in the actual game.

I am a big fan of Unity3D and they recently (last year) added support for 2d platforming games. Using their editor will save you the trouble of having to write one in your game engine. Also 2d collision detection can get pretty wonky if you don't know what you are doing.

[FTLRalph]

I actually misspoke above, I meant to say one of many large textures, as in, the level was drawn up completely in Photoshop and then sliced into sections, with only the visible sections being drawn at runtime.

Anyway, I think I get what you're saying. I guess I'm getting held up on the storage of the graphics. I assume there would just need to be many, many texture atlases in order to hold all of the unique graphics of the level.

For example, in the Owlboy image above, the platform the character is on, the house above him, and the platform to the right would probably all be separate graphic assets stored inside of texture atlas(es). I'm assuming, of course.

[oahda]

I can see repeated rock tiles in the Owlboy screenshot. They probably just have a bunch of them to combine them in many ways. Then they tint them depending on what parallax layer they are on. Then some things are probably individual assets, like the house and the staircase.

[FTLRalph]

Yeah, I think I can see some repeated tiles too. However, if I had to guess, I'd say they're repeated graphics used by the artist in Photoshop rather than in-game-rendered game tiles, if that makes any sense.

[Sik]

The whole "entire level as giant map" idea has been done though. Actually take it further: two giant maps. One map contains the foreground as usual, the other map contains the collisions (i.e. floors, walls, ceilings, usually this map is half resolution since you don't need that much detail). And yeah, it isn't really optimal...

Also don't forget layers, which really apply to all the methods which are map-based (tiles, the one I just mentioned, etc.). Essentially you have multiple layers on top of each other and collision works for all of them. This is how Sky Sanctuary in Sonic & Knuckles works.

[valrus]

There's also the style where the level is just polygons and you're running around on those directly (Braid, Jelly Car, 2.5D platformers, etc.). 

[FTLRalph]

There's also the style where the level is just polygons and you're running around on those directly (Braid, Jelly Car, 2.5D platformers, etc.). 

Yeah, I've thought of this before. However, I'm more interested in the graphics, how they're stored and applied to the polygons.

Like I said before, I'm assuming it's just a bunch of Texture Atlases with loads of textures representing different platforms/walls/etc that are put into place at runtime.

[Kyle O]

I wondered this too when I started making my game.



The technique I sort of stumbled upon is to create small pieces that can fit together. I lay them all down on 1x1 pixel grid. The collision is drawn onto it separately. It's sort of labor intensive-- more so than laying out tiles on a grid. But I sot of like doing it so...

[baconman]

You just apply a "collision mask," and then have the character's lateral movement check a range of directions, bottom-to-top, rather than do two of them (bottom/side). /shrug

Looks gorgeous, btw. I just hope it works!

[Moth]

If you wanted hand drawn levels but less trial and error with getting set pieces distanced right for platforming purposes, what you could do is make a to-scale diagram of the main character's radius of jump motion with regions marked: like, the largest region could be a red oval that shows how far a player can move in a single running jump with maximum airtime, with differently colored smaller oval regions inside showing "average" sized jumps. then while you make your level use that reference image as an overlay to properly space platforms from each other.

[zilluss]

Rayman Legends has some cool methods of creating theterrain. Basically, they create a polygon strip and figure out the according texture coordinates on the fly. They also check the angle of the terrain, so that they will use a different texture when the terrain has a sharp corner. The fill for the terrain seems to be a simple repeatable texture. You can peek into the textures if you download Rayman for iOS and open the IPA  .

Here's a video where you can see the Rayman level editor in action:
https://www.youtube.com/watch?feature=player_detailpage&v=XoLpPw864eA#t=156

If you look at PixelJunk Shooter, they have some kind of triangle fans with irregular borders, which gives gives a very varied look, despite reusing the same texture throughout the level.

There are also some interviews with the creators of Leo's Fortune where they say that the levels are huge textures that are loaded on the fly with some nifty compression method.

[Cheezmeister]

The whole "entire level as giant map" idea has been done though. Actually take it further: two giant maps. One map contains the foreground as usual, the other map contains the collisions (i.e. floors, walls, ceilings, usually this map is half resolution since you don't need that much detail). And yeah, it isn't really optimal...

Kinda related, Metagun used PNGs for map data. Granted it *was* tile-based, each tile just one pixel, but I bet you could actually have a full-size map as one honkin' PNG, provided it was *only* for collision/spawn data. There wouldn't be much waste, because compressing sparse, few-color bitmaps is exactly what PNG does best.

I wouldn't dare do that for the foreground though. How would you animate it?

[valrus]

There's also the style where the level is just polygons and you're running around on those directly (Braid, Jelly Car, 2.5D platformers, etc.). 

Oops, I meant Limbo, not Braid.  I don't know how Braid does levels.

Kinda related, Metagun used PNGs for map data. Granted it *was* tile-based, each tile just one pixel, but I bet you could actually have a full-size map as one honkin' PNG, provided it was *only* for collision/spawn data. There wouldn't be much waste, because compressing sparse, few-color bitmaps is exactly what PNG does best.

I wouldn't dare do that for the foreground though. How would you animate it?

Just as a brain-twister, it'd be pretty cool to set up a level as one bitmap and then define all animations as cellular automata.

I think of the one honkin' bitmap as the "Lemmings style".  There are obvious downsides, but on the upside, the DMA Design guys were already pretty dab hands at (iirc) Deluxe Paint.  It meant that the designers were already familiar with all the ins and outs of their "level editor" and could start designing levels right out of the gate.

The other upside to doing both graphics and collision through the same bitmap is that it's really straightforward to do deformable terrain and communicate the results to the player.