To create a scrolling effect in a game you will need to do the following:
Create a series of sprites to serve as backgrounds. You could do this by importing an image into an empty sprite or by drawing the sprite yourself. Note that we use a sprite rather than a background because a background does not have Motion controls.
The code for a non-background sprite might be:
Here we see two key presses, right and left arrow. If the right arrow key is pressed then the code checks to see if the x position is greater than 150; if it is then the scroll variable is increased, otherwise the position of the main sprite is changed. A change in the value of scroll will make the background move so the non-background sprite appears to be moving. The code for a left arrow key press is pretty much the same.
The code for the first background might be:
The code for the second background might be:
Scroll is a variable that is changed only when the main sprite approaches the edge of the graphics area. Scroll is used to track how far the non-background character has travelled. The scroll variable is used to move the backgrounds rather than the non-background characters.
The graphics area is 0-480 and 0-360 so the scroll variable does not give the actual x position. Scroll and x position start out at 0. X position cannot increase beyond 480 but the backgrounds can move to give an impression of movement. When x position crosses 150 or -150 the backgrounds start to move. If the value of scroll is within the range of the width of the background then the background remains in view but moves underneath the non-scrolling character. If scroll is between the x values of the first screen then the first screen stays in view but moves to 0-scroll. When scroll is positive 0-scroll will be negative so the background will move to the left. At the same time the second background must move at the same speed as the first so that they move together. The second background will function within a scroll range of 0-960; outside this range it should not be visible.
The behaviour and interaction between scroll and x position can be seen by displaying them in the graphics area.
When scroll changes to 10 the backgrounds within range move to the left (0-scroll).
This is similar to the code for scrolling in the x direction but with the calculations moved to the y part of the Go to x, y and scaled to match the y axis. Create three suitable backgrounds for this example.
This is the code for the non-scrolling sprite:
Here is the code for the first background sprite:
The calculation of position has shifted to the y part of the go to x, y command and the units of calculation are now 360, the number of pixels in the graphics screen in the y direction.
The code for the second background sprite:
Here we see that if the value of scrolly is in twice the range of the screen then the y position is calculated from 0 - scrolly + 360.
The code for the third background sprite:
The range for the third sprite is between 360 and 1080, a total of 720, just as before. As scrolly will now have increased to 500 or so we add 720 to correct the position.
For additional screens in either the x or y direction increase the two values of scrolly in the if statement e.g. if scrolly > 720 and < 1440 then set y to 0- scrolly + 1080.
Write a Scratch game that uses a scrolling window, either horizontally or vertically.