Parallax scrolling

[Snowfly]

How would you pull this off? Does anyone have a game that uses parallax that they'd like to post a demo of?

In my mind, for an outdoor level I'd have the following layers (forgive the rambling, this is kind of for myself, but I'm hoping to get other people's thoughts also):

Sky layer - tied absolutely to view, while constantly scrolling along x. Things like clouds.

Background layer - Tied to view, following at a fraction of view's x. Things like mountains that appear to "follow" the camera.

Collision layer - built out of primitives (i.e. horizontal, vertical and diagonal surfaces) and are assigned a 'DONT_DRAW_ONLY'. These can be simple white blocks with alpha. Not tied to camera.

Cosmetic layer - placed on top of collision layer and tied absolutely to it. Anything goes for the cosmetic layer; the level designer can use tilesets, or larger images.

Sprite layer - Self explanatory. More or less controls the movement of view.

Props layer - Objects that appear to be on the same plane as the cosmetic layer, but set a little shallower along z, so they cover up the player. i.e. Grass to cover the player's feet, trees, water, etc.

Extreme foreground - For things like fog or foliage that appear extremely close to the camera. x tied to view with a multiplier greater than 1.0

HUD - absolutely tied to view. shows health bars, etc.

[BeyondtheTech]

Here's a quick scrolling parallax background of two clouds. One image is a PNG file of white clouds on a blue background, and the other is a PNG file of more white clouds, but on alpha transparency. Set the xvelocity of the x-infinite blue backgrounded-clouds at -2, and the transpareny clouds at -4. The look of the output is really nice.

http://www.beyondthetech.com/downloads/ ... clouds.zip

Remember, if you output to GIF, there's no alpha transparency, so you'll still get colored edges that may not look nice when blending into a background.

That was such a nice feature I discovered when I was designing Bubble Buster. All the original images were GIFs and it looked like clipped images pasted on top of each other. When I redid them as PNG files with alpha transparency, everything really looked like it was part of the scene. Just you wait and see when my next secret project (after Battlestar: FGC) really puts it to the test!

[Snowfly]

Hi BeyondtheTech, thanks for this example! The effect is really simple to achieve and looks great. Now attach it to some camera controls!

Using large 32-bit images does seem like overkill though, and shouldn't be necessary in most cases. Smaller tiling images attached to a wirefram object should do the job also, like in old school games.

I tested your images in a simple side-scroller game scene, and it really killed the framerate, and also ruined the collision in some cases (character was falling through platforms and such).

[BeyondtheTech]

The effect on the framerate will depend on how big the background images are, and in addition, make sure you add Create Actor > Event Disable > Collision for the images.

I wouldn't suggest it for Pocket PC devices, but it may still fare well on the Windows / Linux platforms.

[robin.deman]

Hi BeyondtheTech,

Could you send me the file so i can check it out?
I can't get it through the link above.

[Joshua Worth]

http://www.worth.id.au/~joshua/Game%20Editor/ge_parallax_clouds.zip
Here you go