Public Group

This topic is 4962 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

How are 2D backgrounds made (just like the ones in 2D fighting games) made? Sorry if I sound like a kid asking his mom "Mommy, are unicorns real?" or something like that, I just recently acquired this curiosity for the games I used to play. Must be cuz of all my free time :p Also, how do you animate them? Are they large animated gif's or something?

##### Share on other sites
If you refer to partially backgrounds as seen i arcade fighting games, the answer is quite simple.
They usually have a number of hand-drawn images that are layered on top of each other so that they can scroll independently from each other, creating some feel of depth.
The animated parts are usually just sprites with a few animated frames that are attached to one of these background layers.

##### Share on other sites
Hi !

I'm not a pro but I think my answer is quite correct :
- In fact, they use a huge bitmap (any picture) and they display only a part of it, so when, you come closer to the edge of the screen they display another part of the bitmap (a part a bit more on the left if it's for the left edget of the screen for example)
- I think I'll do a little "ascii art" for better explaination :

The bitmap is the following : "12345" (five parts)
When you're in the center of the screen, the "234" part is display
When you come closer to the left edge, the "123" part is displayed (with a smooth scrolling effect of course)
The same is done with the right edge.

- Now, let's talk about the animations. I know even less about them, so I'm just guessing. They specify forehand some part of the big picture that will be animated. For each of these animations, they have bitmaps that represents the several steps of the animation. So they only have to loop through the animated parts of the background and to display the correct animation bitmap.

Of course, this is only valid for 2D background. If someone knows more about it, don't hesitate to correct me or to go on.

Hope it helps.

##### Share on other sites
Imagine its like how a cartoon is drawn with layers of transparent cells each with a drawing on it.

The main background may be made of multiple layer each which the programer has set to move at different speeds to give the impression of depth (know as paralax scrolling)of as just a fixed singe layer or animated single layer then the player "cell" or layer is drawn over it and then finaly any images which must appear over the player. I.e the water on the dockstage of King of Fighter 2000 part of the water (on the left of the screen) image appears behind the player and another semitransparent layer is animated ontop to give the impersion your character is stepping into the water. Then things like health bars ect are drawn laast so nothign can overlap or cover it.

When working with 2D graphics in most cases this layering is exactly how the graphics card draws. The first thing to be "drawn" is covered by the second and the second by the third and so on.

Also, how do you animate them? Are they large animated gif's or something?

When you animate somthing in a game you place thier different frames next to each other in a picture file like so

1--------2--------3---------|        |        |        ||        |        |        ||        |        |        ||        |        |        |---------4--------5--------6

you tell the program to draw the pictre in the rectanlge with top corner "1" and bottom corner "4" (in this case our left most picture)
then each time you want to "animate"or flick to the next frame you tell the program to draw pictre in the rectanlge defined by top corner "2" bottom corner "5" and so on until you get to the end then you start over.
so it works much like a flick book.
So you use one lage image file with all the pictures on it, just imagine (for simplicities sake) that the computer cuts out the picture you give it the co-ords for and pastes it to the screen , then faster than the human eye it does the same with the next.

##### Share on other sites
Ah I see. Thanks a lot! That was very usefull :)

1. 1
2. 2
3. 3
Rutin
22
4. 4
JoeJ
16
5. 5

• 14
• 29
• 13
• 11
• 11
• ### Forum Statistics

• Total Topics
631774
• Total Posts
3002286
×