Take a look at your favorite game. Odds are good that there is a scrolling background of some type. Think Super Mario Brothers.
Mario is a bit different than what we’re after though. The background in Mario is a single graphic that scrolls as Mario moves through the world. What we want is a scrolling background that loops forever. We’re going to scroll horizontally like a platform jumping game, but the same concept works vertically.
The Logic
This is what we’re going to create. The black box in the middle is the stage, and anything outside the black is off stage. The red and green rectangles are two copies of our background. Click the animation to start and stop.
What we’re doing is duplicating our background onto two instances on the stage. Both move right to left at the same speed. When one gets all the way off the stage to the left it leap frogs back to the right side of the other instance. Rinse, repeat, and this can go on forever.
Our instances will be duplicates of the same movie clip, but the demo has them as different colors just so you can see what’s going on.
Setup
I’m creating a stage 550px wide by 250px tall. The dimensions of the stage aren’t really all that important though so you can make it fit whatever game you’re making.
You’ll also need a movie clip symbol for your background. For this demo it’s going to be the same height as the stage, but I’m going to make it a bit wider. I typically will make the background symbol wider so that it’s not quite as obvious that it’s repeating.
Be sure to check the box to export for ActionScript. You’re going to need the class name later when we start typing code.
What I do is create a new movie clip symbol and draw a rectangle the size I’m after and then draw everything inside that rectangle. I’ll also put the registration point at the top left of that rectangle so that the symbol’s (0, 0) point can line up with the stage’s (0, 0) point. With most symbols I’ve found it’s easier to put the registration point at the center, but for backgrounds I prefer to use the top left corner.
To the right is the movie clip symbol I created for my scrolling background. Actual dimensions are 250px tall by 1,000px wide. The blue box is the dimensions. The buildings go beyond 250px, but it works because they’ll go off the bottom of the stage and we’re not going to use the symbol height for anything.
On to the code
import flash.events.Event; import flash.events.MouseEvent; var bgOne:Background_mc = new Background_mc(); var bgTwo:Background_mc = new Background_mc(); bgOne.y = 0; bgOne.x = 0; bgTwo.y = 0; bgTwo.x = bgTwo.width; stage.addChild(bgOne); stage.addChild(bgTwo); stage.addEventListener(Event.ENTER_FRAME, eFrame); function eFrame(evt:Event):void { bgOne.x -= 6; bgTwo.x -= 6; if (bgOne.x <= -1 * bgOne.width) { bgOne.x = bgTwo.x + bgTwo.width; } if (bgTwo.x <= -1 * bgTwo.width) { bgTwo.x = bgOne.x + bgOne.width; } }
Explanation
Lines 4 – 11 create two new instances of the background clip. Both are lined up along the top edge with the second background aligned so that the left edge of clip 2 is touching the right edge of clip 1.
Lines 13 – 14 adds the 2 background instances to the stage.
Line 16 attaches an event listener to the ENTER_FRAME event.
Lines 18 – 29 contain the callback function used by the event listener.
Lines 19 and 20 move each background to the left 6 pixels.
Lines 22 – 24 check to see if bgOne has gone all the way off the left edge. If it has, it is moved so that its left edge is lined up with the right edge of bgTwo.
Lines 25 – 27 do the same, but for the other background instance.
Done
This is the finished project using the code above. Click to start and stop the animation.
The same thing is happening as the red and green demo at the top of this post. We’re just not seeing it because most of the motion takes place off stage.
Limitations?
Right now this just scrolls at a fixed speed. In a real game you’d likely want to be able to control the speed.
It is also set so that the backgrounds will only scroll right to left. If you wanted it to go the other way you would need to add more ifs to the eFrame function to handle when a background moves all the way off the right edge.
If you’re really not feeling up to the code, you could have also done something similar using motion tweens. I’ve done it both ways, but find the code method easier to get looking right. When I’ve done this with tweens the jumps never seem to line up as well.
Scene 1, Layer ‘Layer 1’, Frame 1, Line 22 1084: Syntax error: expecting identifier before rightparen.