(Redirected from Scrolling Background)
Scrolling in Scratch is the movement of (usually contiguous) sprites across the Stage. Commonly used for platformers, scrolling text, maps in adventure games, and sometimes large pictures, it can be found in many projects. A project that uses scrolling is called a scroller.
How to Scroll
A scrolling script moves a sprite or collection of sprites across the screen, often to create an image larger than the stage. Scratch restricts the size of sprites to the stage size (480x360), so users rely on scrolling to create bigger images.
Many scrolling methods involve a series of contiguous sprites, each the size of the stage.
Scrolling Without Reusing Sprites
The most commonly used method for beginners is sometimes referred to as the "Traditional Method", because it is usually the first that users try and is featured in one of Scratch's sample projects. It uses multiple sprites, one sprite per 480x360 tile of scrollable area.
To create a 2 way scrollable area a script like this is needed:
when flag clicked forever set x to ((scroll x) + ((480) * (0)))
A sprite with this script will appear in position number 0. 480 is the amount of space between sprites, which can be changed if needed. The number it is multiplied by determines its position in a set of sprites, and the scroll x variable lets the user control the movement (in this case on the x-axis) for the set of sprites.
Every new sprite must be manually given a new position number. The following script would place the next sprite in position 1, so it appears beside the first sprite.
when flag clicked forever set x to ((scroll x) + ((480) * (1)))
Due to the way Scratch keeps sprites from going outside the stage area, a script like this may be desired to prevent overlapping sprites:
when flag clicked forever if <([abs v] of (x position)) > > then hide else show end
Alternatively, one could make a border around the outside of the screen.
Finally, an input script, like the one below, allows the user to change the scroll x variable and thus the positions of the sprites.
when flag clicked forever if <key (right arrow v) pressed?> then change [scroll x v] by (-10) end if <key (left arrow v) pressed?> then change [scroll x v] by (10) end
This is a method for infinite scrolling. The script for it is the following:
when flag clicked forever set x to ((-1) * ((scroll x) mod (480)))
Then, have a second sprite with another script which is
when flag clicked forever set x to ((-1) * (((scroll x) mod (480)) - (480)))
X and Y Scrolling
This is the same as the "Traditional Method", except with movement in two dimensions. One will need more scripts just like the ones above except with a different variable, and one will have to replace the number 480 with the height of the area wanted to scroll in (typically 360).
Two Player Scrolling
Two player scrolling is typically split screen scrolling. When using this method, one player's character is on the top of the screen and one on the bottom. The players use different controls, but their characters are in the same landscape with the same backgrounds. This method has been used in many video games, usually ones with multiplayer mode. To begin one will need to make the background sprites. Afterwards duplicate them for the second player. You need two variables; a scroll variable for player 1 and a scroll variable for player 2. One will need to duplicate player one and player two so that they can go be seen on both sides of the split screen.
After one's costumes have been created, insert this script or a similar script in player 1's script area:
when flag clicked set [player 1 scrollx v] to  forever if <key (right arrow v) pressed?> then change [player 1 scroll x v] by (-10) end if <key (left arrow v) pressed?> then change [player 1 scroll x v] by (10) end
However, this script will vary depending on the color of the stage and other elements.
Then duplicate the script seen before and insert it into player 2's script area. One will need to change the variable used and the arrow keys pressed.
In the duplicate of player 1's script area (the sprite that will appear in the other half of the split screen) copy this script:
when flag clicked forever go to x: ((player 2 scroll x) - (player 1 scroll x)) y: (([y position v] of [player 1 v]) - (. . .::grey)) if <<((player 2 scroll x) - (player 1 scroll x)) > > or <((player 2 scroll x) - (player 1 scroll x)) < [-240]>> then hide else show end end
Put exactly the same script on the duplicate of player 2 except with (y position of player 2) rather than (y position of player 1).
For player 1's terrain use exactly the same method as the traditional method except use your variable for player 1's scrolling. The same goes for player 2 except with player 2's scrolling variable.
2 Terrains in 1 Project
It is possible to have 2 scrolling terrains in a single project. This is same as the "scrolling without reusing sprites" method except that one will need 2 variables for each terrain. An example can be found here.
One Sprite One Script method
when gf clicked go to x: (-118) y: (-123) set [scroll x v] to  set [old x v] to (x position) // these blocks keep the player's position set [old y v] to (y position) forever erase all switch costume to (costume2 v) // this is the first background costume go to x: ((scroll x) + ((480) * (0))) y: (0) stamp switch costume to (costume3 v) // this is the second background costume go to x: ((scroll x) + ((480) * (1))) y: (0) stamp // continue this process until desired length is met switch costume to (costume1 v) go to x: (old x) y: (old y) if <key (right arrow v) pressed?> then// this gives the player controls change [scroll x v] by (-5) end if <key (left arrow v) pressed?> then change [scroll x v] by (5) end
More information can be found in the this article.
Top Down Scrolling
Top down scrolling is scrolling that you view from the top, it usually uses x and y scrolling. Some examples by Nintendo are older versions of Mario Kart (or the bottom screen of the game on any DS device) and older versions of Zelda (or DS/Gameboy Zelda games).
An example Scratch project is here.
Scrolling With Reusing Sprites
This method of scrolling reuses the scrolling object by stamping it at one position, switching to the next costume, and stamping again at another scrolling position. Repeat this process until you achieve the desired scrolling distance.
when gf clicked forever erase all switch costume to (costume1 v) set x to ((scroll x) + ((480) * (0))) stamp switch costume to (costume2 v) set x to ((scroll x) + ((480) * (1))) stamp switch costume to (costume3 v) set x to ((scroll x) + ((480) * (2))) stamp
The screen can also scroll vertically in the y axis.
First, make a variable called
(scroll y). Setting the position of the sprite is similar to how it is done in horizontal scrolling, except the number 480 needs to be changed to 360, and
set y to () needs to be used.
set y to((scroll y) + ((360) * (0)))
This can be combined with horizontal scrolling to scroll both horizontally and vertically.
Scrolling text is not mainly used for gaming purposes. It makes text scroll off the screen, while another one appears from above it. For example, it can be used to put credits in the end of a project. This is how to make it:
when I receive [scroll v] // can be replaced with other hats go to x: (x position) y: (0) glide (1) secs to x: (x position) y: (-180) // glides to the bottom next costume // switches the sprite into the next costume go to x: (x position) y: (180) // teleports the new page to the top glide (1) secs to x: (x position) y: (0) // glides to the original position
An example is here.
There are many ways to create a scrolling sprites on Scratch. The method that is going to be used is a 2 script method only. They are very simple and gets the job done well. First, a map and a player are needed. In the player sprite, use this code:
define screen update (x) (y) go to x: (x) y: (y) if <not <touching (map v)>> then change [scroll x v] by (x) change [scroll y v] by (y) end go to x: (0) y: (0)
Next, to be able to make the map move around just like the player, this script for the map is needed:
when green flag clicked forever go to x: ((0) - (scroll x)) y: ((0) - (scroll y)
Here are some example projects using this method:
- Extensive Scrolling Engine
- One Sprite One Script Project
- Scrolling Platformer Tutorial
- Simulating Gravity