Instead of moving your player, we can move the terrain behind it so it would look like the player is moving.
We first add a background on the card. It will have to be moved to the first layer so that it does not hide all of the other objects.
We will move it in much the same way we did the player but the code will be in the game loop. That means, it will be moved automatically every screen update.
Once we have it moving, we will need a second one to avoid gaps and make it look continuous.
Getting StartedFind a background like the one below (mockup.jpg by Vicki Wenderlich from
http://www.vickiwenderlich.com - one of the resources listed on the main page)
It would help if the left side and right side match up or there is a second background that will match up with it. You will see why later on in this lesson.
Adding the Terrain/Background to the Card:- Add the background - on the EDIT Bar - click on "File", "Import as Control", "Image File"
- Open up the property Inspector and change its name to "bg1"
- Move that image to the the background - on the Edit Bar - click on "Tools", "Move To Back" or open up the Property Inspector, go to "Size and Position" and move it down to layer 1
Making the Terrain Move:- Open up the Card Script - on the EDIT Bar - click on "Object", "Card Script"
- Add moveTerrain to the Game loop - uncomment the line "moveTerrain" by deleting the two dashes (--) in front of that line
- Add the "moveTerrain" handler by inserting the following code after the "end updateScreen"
on moveTerrain
set the left of the image "bg1" to the left of the image "bg1" - 4
end moveTerrain
- click Apply, then click on the "Run" Tool and click on the "Start" button - the background will move to the left - off the card (screen). When it goes off the card, we want to start it back from the right of the card
Returning the Terrain to the Card and Starting Again From The Right
- Just like we did when the box went off the card, we need to put it back on the card.
- Change the "moveTerrain" code to the following:
on moveTerrain
set the left of the image "bg1" to the left of the image "bg1" - 4
if the right of the image "bg1" < 0 then
set the left of the image "bg1" to the right of the card "level1"
end if
end moveTerrain
If the right side of the image is less than zero (< 0) that means it went off the screen (card). So we have to start it from the right side of the screen (card) again. Since the screen can be many different sizes depending on what device you run on - a cell phone screen is smaller than a computer screen - we can not use a set number for the right side. We just use the "right" of the card "level1" and let the computer worry about where it goes. The computer knows what it is running on and can calculate where it goes. We could have also said: if the right of the image "bg1" < the left of the card "level1" and it would have worked too
- click Apply, then run it again.
Now you should see the background move across the card, then repeat over and over. But there is a gap when it starts over on the right side again. We need to add another background to fill in the gap. We can use the same one as long as the left and the right sides match up. Otherwise, you may have to look for ones that match up or design your own backgrounds. You can also copy the first one and flip it horizontally so the the new left side is the old right side and it should match up. (That will have to be done outside of LiveCode with a graphics editing package
Adding a Second Background to make the Terrain Move Smoothly
- Add a second background as you did before (see the first step) but name it "bg2"
- Move it so that it touches "bg1" on the right side
- Change the code to move the second background image just like the first one
on moveTerrain
set the left of the image "bg1" to the left of the image "bg1" - 4
set the left of the image "bg2" to the left of the image "bg2" - 4
if the right of the image "bg1" < 0 then
set the left of the image "bg1" to the right of the card "level1" - 4
end if
if the right of the image "bg2" < 0 then
set the left of the image "bg2" to the right of the card "level1" - 4
end if
end moveTerrain
Now if you run the code, the Terrain should move smoothly and continuously. if it does not, then move the images so they are side by side.
Making the scrolling more smoothly when you stitch the backgrounds together
- Change the code to move the second background image to the other background (not the card)
on moveTerrain
set the left of the image "bg1" to the left of the image "bg1" - 4
set the left of the image "bg2" to the left of the image "bg2" - 4
if the right of the image "bg1" < 0 then
set the left of the image "bg1" to the right of the image "bg2" - 4
end if
if the right of the image "bg2" < 0 then
set the left of the image "bg2" to the right of the image "bg1" - 4
end if
end moveTerrain
Now
if you run the code, the Terrain should move smoothly and continuously.
if it does not, then move the images so they are side by side.
Screenshots of the above: click here
Notes:- You can change the speed by using a number different from 4
- If you have a moving background, it is hard to do intersects against it (checking for collisions) I is better to have a neutral background and if there are objects to avoid (like trees, rocks, etc) it is better to keep them separate and move them independent of the background.
- You do not have to have a full screen background. You can have smaller land ( for the bottom of the card) and sky (for the top of the card) backgrounds that the player has to avoid.
- You can make your own using the "Image Area" tool from the Tool Palette and draw/color obstacles that the player has to avoid. You can make it like Mario Bros games where he has to run and jump over obstacles on the ground.
