2D backgrounds

Started by
10 comments, last by Tai-Pan 21 years, 10 months ago
Who knows how 2D backgrounds in 2d fighting games are implemented? I know they are not made using tiles, so how can they scroll? "Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
Advertisement
They are just bitmaps that are lager than the screen, when the two people fighting move to the left or the right you just make it scroll that way. I made a sidescroller with big bitmaps as the background, you just make a camera, and then move the camera. The tutorial on gamedev about makeing tilebased games will help you with that its fairly simple. Then you just add sprites that look as if they are in the background and animate them.
Mhh..good..its simple..for example..I could load a big bitmap (in a SDL surface for example) and then just display a small area..
Is that what you mean?

"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
Yes, you just display a screen sized portion of the image where the characters are.


I know only that which I know, but I do not know what I know.

I know only that which I know, but I do not know what I know.
And what about other details like people moving etc? I suppose those are sprites....
I think that other techniques are used, for example, to display more than one bitmap and make them move at different speeds, to give the illusion of depth, this is my theory Im not sure if that is the method used.

"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
There''s no magic, and it''s not as complicated as you seem to think, thankfully. A background and a sprite and a tile are all essentially the same thing. You just take all or part of a source image and copy that to all or part of a destination image (usually the screen). Parallax scrolling for a background is just a case of drawing one background in front of another, and moving the ons nearer the front further each time.

[ MSVC Fixes | STL | SDL | Game AI | Sockets | C++ Faq Lite | Boost | Asking Questions | Organising code files ]
I have tried the parallax effect, but how am I supposed to move different backgrounds if the only thing that I move is the camera that shows a part of the background??I mean, the bacground is just a still bitmap, and I move the camera with the players to produce the sence of scrolling. So how do I move different bakcgrounds, I have seen lots of fighting games do that.

"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
To do parallax scrolling, you actually need more than one bitmap.
You could have layer1.bmp, layer2.bmp, and layer3.bmp, which, once superimposed, would give the total background image. To acheive parallax, it''s easy from there to just make layer1 move very slow, layer2 at medium speed, and layer3 faster. The trick here is splitting the background layers into separate bitmaps.

And yes, obviously, the backgrounds here are larger than the viewing screen. Just blit the part of the background that you need to see.

You can also blit sprites on top of all that, if you want some animatoin in the background. Doing backgrounds is generally easy, but be careful to not overload the RAM. It''s very easy to quickly eat up all the RAM with bitmaps; I''d strongly suggest you keep your resolution low, 640 X 480 is more than enough usually.
I understand that, but my problem is this one:
I use one layer for the background, larger than the viewing screen, so I move the camera to scroll the background, so the background is still, it doesnt move.
To produce the parallax effect, I need to move dmultiple background layers at different speeds, but how do I move them if the only thing that I move is the camera?..well..thats my problem <:

"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
"Those who follow the path of the warrior must be ready to die, to stand for their convictions, live for one´s convictions, die for one´s convictions"
"Moving the camera"? What API are you using?

Generally speaking, you don''t "move the camera", you move sprites around screen cordinates.

The way I did my little fighting game:

If you want to convert world coordinates to screen coordinates, just use variables like X_Offset and Y_Offset that indicate the difference between the two. So if the left side of the viewing screen is at 30 pixels from the left side of the big background image, then X_Offset = 30, and you blit all sprites 30 pixels more to the left.

That way, you can use X_Offset to determine from where you blit the main layer of your background, and use a multiplier to calculate the other layers. X_Offset would thus be the "X position of the camera", so to speak.

Example (with a 640 pixel wide viewing screen, only considering X coordinates):

If X_Offset = 30, Character_X = 50 (this is the world coordinates of a character), Layer1.bmp is the main bg layer, and Layer2.bmp is a layer further away,

Blit from Layer1.bmp, X = 30 to X = 670
to the screen, X = 0 to X = 640
Blit from Layer2.bmp, X = (30 * 0.5) to X = (670 * 0.5)
to the screen, X = 0 to X = 640
Blit the character at X = (50 - X_Offset) = 20

This topic is closed to new replies.

Advertisement