Hey all, me and my staff are having a hard time figuring out what to do when it comes to level design/creation. Basically, our game, Project SD, is a 2D side scrolling shooting game (it's kind of like "Castlevania for the GBA with guns"). Our question revolves around level background - How are the ACTUAL backgrounds for a 2D game created? I'm talking strictly of the backgrounds here. I mean, do we just draw a picture and use that as the background for the game? Or, do we have to draw out the individual tiles for the background to use in the game? It seems like a lot of work to make the background for each individual piece if we did it that way... In addition, we plan to have "layered backgrounds". What I mean is tha, there might be parts of a level where the "true" background moves slower than the front background (the front background might just be some window or something). How would you go about creating those? My guess is that we draw the "true" background, and have to create tiles for the other background... Is this right? Can anyone help?

The more the landscape moves, the larger the image representing the landscape will have to be.
Once an image becomes very large and repetitive, breaking it up into tiles saves time.

So, the wall of the room you are in will have to move at the same speed as the floor of the room you are walking on (which is presumably represented with tiled sprites). An easy way to deal with this aspect of the background would be to render it at the same time you render the foreground (eg, the terrain which the player stands on/bumps into). At it's most basic level, solid terrain would be represented by the value 1 on a 2D array, and background 0. Have the renderer draw floors when it encounters a 1, and walls when it sees 0. Obviously a greater variety of floors and background tiles can be achieved with more values for the grid.

Objects in the far background (mountains, city scapes, etc) will appear to move much less relative to the character's movement (much like powerlines whip past when you're in a car, but the mountains hardly seem to move at all). You could just represent this with a single image which is the same size as the screen and doesn't move at all. Draw this background layer first, and it will appear to be behind the "closer" background, so that you will be able to see it through windows or in outdoors areas.

Or, the background image could be drawn as being larger than the screen. You could then either find a ratio between how much the player moves and how much the background moves (eg, if the player moves one tile left, translate the background one pixel right). Or you could use a more robust method by calculating how much player movement results in how much background movement. Eg, if the player moves 10 tiles left and level width = 100 tiles, % moved = 10. Translate the backround (10% of it's size/some denominator to prevent it from going off screen) right.
If the player is going to be moving in one direction a lot, then tiling the large background image could be a good idea (like they do with backgrounds in Tom and Jerry cartoons when they are chasing each other).

[Edited by - CIJolly on June 9, 2006 5:46:55 PM]

Tile Engine
Parallax Scrolling

The easiest way to do a 2D game is using tiles, at least for the main playfield.
You'll want to decide upon a size for the tiles based upon the resolution at which you'll be running and the level of granualarity you want and you'll also want to take into consideration that sizes which are powers of 2 work nicely with most drawing routines and hardware because some optimizations can be made. A typical size for 320x240 resolution was 16x16 pixels. By extrapolation, 640x480 would be 32x32 for the same size tiles, and 1280x960 would be 64x64. Of course, you can have larger or smaller as you desire, even non-power-of-2 sizes if you wish (though this may negatively effect performance.)

As compared to large bitmaps, tiles are actually LESS time consuming and have a much smaller memory footprint. Think about it like this: you can draw a 32x32 tile used in hundreds of places throughout any given level of gameplay (and repeat this ~ 200-300 times depending on the level), OR, you can manually edit every pixel of each and every level. Quick calculations reveal that a fiarly small level, say 10 screens, produces 640x480x10 pixels, or 3,072,000 pixels. and thats just 1 smallish level. A game like Super Mario World had ~120 levels each, lets say, 15-20 screens. Thats 645,120,000 pixels, or NEARLY 2/3 OF A BILLION pixels. By the way, that would have made the cartridge 256 MegaBYTES (as opposed to megaBITS, the standard way to measure cartridge size.) Assuming ~60% compression, thats 4 times larger than the largest cartrige games ever produced (eg. Resident Evil 2 for the n64.) I'd be willing to bet that the game uses ~2048 tiles, but lets even give a generous over-estimation of 4096. 4096x16x16 equals only 1,048,576 pixels. Basically, what I'm saying is that its very difficult to produce quality, detailed levels without using tiles unless you have a staff of artists, professional art tools, and a large budget to keep them fed, clothed and happy.

One thing to remember is that basically all console game systems prior to the Saturn/PSone/N64 used tiles nearly exclusively because that was what their graphics unit supported. Look at games like Final Fantasy 3, ChronoTrigger or Secret of Mana on the SNES to see what tiles can really do. Even those SNES '3D' mode7 games like Mario Kart and F-Zero used a fancy mothod of tiled graphics (Mode 7 is a tiled video mode which supported rotation and scaling. By changing the rotation and scaling registers between each scan-line developers were able to achieve the 3D effect)

fortunately, modern times will allow you the freedom that not everything need be tiles. Back in the old days, tiles were all you had, and if you wanted a graphic bigger than the tiles it supported, you had to make 2 or more tiles and always draw them together to make up the larger image, sorta like those sliding picture puzzles. nowadays, once you've got your background down, you can go ahead and draw your characters and objects as one big bitmap.


I actually wrote an API that behaved like a tiled GPU about 6 months ago when I was writing some portfolio code to get into a GBA development position. Then I wrote a demo of the first level of Super Mario Bros. that ran on it... One of these days I would like to release it here on gamedev and host a little competition to see who can make the coolest game within the contraint of the API. I just need to put together some more usable tools and documentation first.

Castlevania for gba with guns? You mean Metroid? :P

My favorite game style at the moment. It's funny, I played through the second Castlevania GBA game right after I completed Metroid Prime 2, and it's scary how similar they are. I spent more time going around to all the rooms I've been in to see what I missed then I spent actually playing through new stuff. Oh, and I had to do this TWICE because there are TWO DIMENSIONS! Arg. But yeah, lots of fun anyway.

Since you aren't limited with tiles, you don't have to use the same resolution for the background as you use for the foreground - but you can still use your tile system! Depending on how much you want the background to repeat, make the tile size for the background accordingly. And you needent stick with square tiles either. If your background has a lot of columns, you might use rectangular sized tiles that fill the vertical resolution, but are only half or 1/4 the width.

And scrolling the background at a different speed is pretty easy. When you scroll the main layer in your loop, be sure to scroll the background at a different speed than that.

Wow, thanks for the advice everyone! Everyone was so helpful!

1 more question though

I'm sorry that I wasn't clear on this earlier, but I didn't need to know How to make tiles and backgrounds. I'm not actually a programmer.

What I was really doing was planning the level design. I wanted to get an accurate picture of what a level will ACTUALLY look like, so I told the artists I'm working with "Draw a picture of what you envision the actual game screen would look like." - I wanted them to physically draw on paper what they thought a screen looked like.

Then, I was gonna have another pixel artist take that "actual" game screen and turn it into a pixel art to be used for game.

The problem I was having was that, after that, what would be the best manner to make different sections of the level. What I mean is different sections with different backgrounds but with elements of the same foreground.

Should the background be made as one huge tile, and then the foreground including smaller detailed objects (like a box) and the general background be made from smaller tiles?

Or is it, the background is one huge tile, different objects in the foreground (such as a simple box) are another individual tile, and then other larger elements of the foreground (such as the wall of the castle you are in) consist of different tiles?

From what you are saying Saluk, I should go with the second choice. In other words, I'm gonna have a bunch of different sized tiles and I can just mask one over the other...

Wow, thanks for the advice everyone! Everyone was so helpful!

1 more question though

I'm sorry that I wasn't clear on this earlier, but I didn't need to know How to make tiles and backgrounds. I'm not actually a programmer.

What I was really doing was planning the level design. I wanted to get an accurate picture of what a level will ACTUALLY look like, so I told the artists I'm working with "Draw a picture of what you envision the actual game screen would look like." - I wanted them to physically draw on paper what they thought a screen looked like.

Then, I was gonna have another pixel artist take that "actual" game screen and turn it into a pixel art to be used for game.

The problem I was having was that, after that, what would be the best manner to make different sections of the level. What I mean is different sections with different backgrounds but with elements of the same foreground.

Should the background be made as one huge tile, and then the foreground including smaller detailed objects (like a box) and the general background be made from smaller tiles?

Or is it, the background is one huge tile, different objects in the foreground (such as a simple box) are another individual tile, and then other larger elements of the foreground (such as the wall of the castle you are in) consist of different tiles?

From what you are saying Saluk, I should go with the second choice. In other words, I'm gonna have a bunch of different sized tiles and I can just mask one over the other...