A Scrolling Background w/out Panoramas

Reading Article
Author: NihilusJShakuras
Posted on 08/02/2004
print :: back to list

I

f you're making a CMS, but it seems to lack pizazz, it needs that special something to make it interesting. You need a nifty scrolling background! Sure, you could teleport to a map with a panorama, but that's cheap and easy. This alternative way is much more flexible and does not require teleporting.

First, you will need an image to use as your background. It should tile fairly well, much like the designs on house wallpaper. It can be any size, but for this example I will use a 320x240 file, called BGScroll, for simplicity. Create a new common event for this system. Set its start condition to Parallel Process and give it a switch to turn it on and off.

Assuming your image will be scrolling downward, your event will begin as follows:

Show Picture 1, BGScroll (160, -120)
Move Picture 2, (160, 360) 3 sec
Move Picture 1, (160, 120) 3 sec (Wait)

This displays the background off the screen, then moves it to the center so its edges are flush with the screen's edges. It may not make sense to move Picture 2 now because it hasn't been shown yet, but keep in mind that this event will be looping.

Show Picture 2, BGScroll (160, -120)
Move Picture 1, (160, 360) 3 sec
Move Picture 2, (160, 120) 3 sec (Wait)

Once the first picture reaches the center, the second is displayed directly above it, but still out of sight. This ensures that the edges of the two pictures touch and match correctly.

If you think of this event as it loops over and over, it will make sense why you moved picture 2 in the first step. I promise it will.

You can of course change the picture layers used and the time required to move the pictures, but make sure that all the times are the same; otherwise, the images will fall out of sync.

If you want to use pictures other than 320x240, remember that the second picture must be displayed after the top edge of the first appears on the screen. RM2K displays pictures by their center point, so for the top edge to touch the top of the screen, the y-value it starts at should be negative half its height, the y-value it should move to the first time shoud be half its height, and the y-value it stops at the second time should be 1.5x its full height. Again, if you think about it and draw it out, it will make more sense.

i.e., for a 320x400 picture, you would show it at (160, -200), move to (160, 200), show the second pic, then move the first to (160, 400).

If that is a little too much, just follow the first system word for word and you should be fine.

[If I made a math mistake somewhere in the long method please let me know]

Active Users (1)[ cima55 ]