(External links: added link)
m (Corrected SB)
 
(9 intermediate revisions by 7 users not shown)
Line 1: Line 1:
'''Scrolling''' in [[Scratch]] is the action of sliding [[sprite]]s across the [[Stage]]. Scrolling in Scratch typically involves using a set of [[sprite]]s and moving them across the stage while having no gaps between sprites. Common uses of scrolling in Scratch include [[platformer]]s, scrolling text, maps in adventure games, and sometimes large pictures. Having an object(s) scroll across the stage is commonly seen in Scratch [[project]]s. In the Scratch community, knowing how to produce a scrolling effect is a highly valued ability; there is a common misconception that producing such an effect is very difficult. A project that uses scrolling is often referred to as a scroller.
+
{{External Programs}}'''Scrolling''' in [[Scratch]] is the movement of (usually contiguous) [[sprite]]s across the [[Stage]]. Commonly used for [[platformer]]s, scrolling text, maps in adventure games, and sometimes large pictures, it can be found in many [[project]]s. A project that uses scrolling is called a scroller.
 +
 
 +
Knowing how to produce a scrolling effect is a highly valued ability in the Scratch community, and its difficulty is commonly overestimated.
  
 
==How to Scroll==
 
==How to Scroll==
Scrolling is produced by creating [[script]]s that move the sprite or set or sprites across the screen. Usually, Scratch users want to make an image greater than the stage bounds (480 by 360) scroll which proves difficult because Scratch restricts the size of sprites to the stage bounds. Many methods of producing scrolling involve creating a series of sprites each being the size of the stage bounds.
+
A scrolling [[script]] moves a sprite or set 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.
  
An example is here
+
Many scrolling methods involve a series of contiguous sprites, each the size of the stage.
https://scratch.mit.edu/projects/15171113/#fullscreen
 
  
 
===Scrolling Without Reusing Sprites===
 
===Scrolling Without Reusing Sprites===
This is the most commonly used method of scrolling for beginners. It is sometimes referred to as the "Traditional Method" because it is usually the first method most users try as well as being featured in one of Scratch's sample projects. This uses one sprite per 480x360 tile of scrollable area. This method involves multiple sprites. To create a 2 way scrollable area a script like this is needed:
+
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:
  
 
<scratchblocks>
 
<scratchblocks>
Line 16: Line 19:
 
</scratchblocks>
 
</scratchblocks>
  
A sprite with this script will appear in position number 0. 480 is the amount of space between sprites, the number it is multiplied by determines its position in a set of sprites, and the scrollX [[variable]] lets the user control the movement (in this case on the x-axis) for the set of sprites.
+
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 scrollX [[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.
  
 
<scratchblocks>
 
<scratchblocks>
Line 23: Line 28:
 
   set x to ((scrollX) + ((480) * (1)))
 
   set x to ((scrollX) + ((480) * (1)))
 
</scratchblocks>
 
</scratchblocks>
 
Each time a sprite is added it must be manually given a new position number. Placing the following script would place a sprite in position 1 and make it appear beside the sprite with the above script.
 
  
 
Due to the way Scratch keeps sprites from going outside the stage area, a script like this may be desired to prevent overlapping sprites:
 
Due to the way Scratch keeps sprites from going outside the stage area, a script like this may be desired to prevent overlapping sprites:
Line 31: Line 34:
 
when flag clicked
 
when flag clicked
 
forever
 
forever
   if <([abs v] of (x position)) > [480]> then
+
   if <([abs v] of (x position)) > [600]> then
 
     hide
 
     hide
 
   else
 
   else
Line 38: Line 41:
 
</scratchblocks>
 
</scratchblocks>
  
The number 480 can be replaced with something else depending on the width of screen that you want the sprites to scroll across.
+
Alternatively, one could make a border around the outside of the screen.
  
To solve the issue of overlapping sprites some prefer to include a black border around their screen in which case this script is not necessary.
+
Finally, an input script, like the one below, allows the user to change the scrollX variable and thus the positions of the sprites.
 
 
You will also need some way of changing the variable, so that the set of sprites can be moved by the user. A script like this one is fine.
 
  
 
<scratchblocks>
 
<scratchblocks>
Line 54: Line 55:
 
   end
 
   end
 
</scratchblocks>
 
</scratchblocks>
 
But, there is an easier way.
 
  
 
===Infinite Scrolling===
 
===Infinite Scrolling===
This is a method for infinite scrolling.  Just have  
+
This is a method for infinite scrolling.  Just have
  
 
<scratchblocks>
 
<scratchblocks>
Line 65: Line 64:
 
   set x to ((-1) * ((scrollX) mod (480)))
 
   set x to ((-1) * ((scrollX) mod (480)))
 
</scratchblocks>
 
</scratchblocks>
.  
+
.
  
Then, have a second sprite with another script which is  
+
Then, have a second sprite with another script which is
  
 
<scratchblocks>
 
<scratchblocks>
Line 76: Line 75:
  
 
===X and Y Scrolling===
 
===X and Y Scrolling===
This is exactly the same as the "Traditional Method", except you can scroll upwards, as well as across. You will need more scripts just like the ones above except with a different variable, and you will have to replace the number 480 with the height of the area you want to scroll in (typically 360).
+
This is the same as the "Traditional Method", except with movement in two dimensions. You will need more scripts just like the ones above except with a different variable, and you will have to replace the number 480 with the height of the area you want to scroll in (typically 360).
  
 
===Two Player Scrolling===
 
===Two Player Scrolling===
Line 117: Line 116:
 
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.
 
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===
+
===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 you need 2 variables for each terrain. An example can be found [http://scratch.mit.edu/projects/24496141/ here].
 
It is possible to have 2 scrolling terrains in a single project. This is same as the "scrolling without reusing sprites" method except that you need 2 variables for each terrain. An example can be found [http://scratch.mit.edu/projects/24496141/ here].
  
 
==One Sprite One Script method==
 
==One Sprite One Script method==
One [[Sprite]] one [[Script]] scrolling is advanced and scrolls only using 1 sprite. An example Scratch [[project]] is [http://scratch.mit.edu/projects/RHY3756547/715593 Line] by RHY3756547.
+
One [[Sprite]] one [[Script]] scrolling is advanced and scrolls only using 1 sprite. An example Scratch [[project]] is [http://scratch.mit.edu/projects/RHY3756547/715593 Line].
 
<scratchblocks>when gf clicked
 
<scratchblocks>when gf clicked
 
go to x: (-118) y: (-123)
 
go to x: (-118) y: (-123)
Line 128: Line 127:
 
set [oldy v] to (y position)
 
set [oldy v] to (y position)
 
forever
 
forever
   clear
+
   erase all
 
   switch costume to [costume2 v] // This is the first background costume
 
   switch costume to [costume2 v] // This is the first background costume
 
   go to x: ((scrollx) + ((480) * (0))) y: (0)
 
   go to x: ((scrollx) + ((480) * (0))) y: (0)
Line 158: Line 157:
 
<scratchblocks>when gf clicked
 
<scratchblocks>when gf clicked
 
forever
 
forever
clear
+
erase all
 
switch costume to [costume1 v]
 
switch costume to [costume1 v]
 
set x to ((scrollX) + ((480) * (0)))
 
set x to ((scrollX) + ((480) * (0)))
Line 175: Line 174:
 
First, make a variable called <scratchblocks>(scrolly)</scratchblocks>
 
First, make a variable called <scratchblocks>(scrolly)</scratchblocks>
 
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 <sb>set y to ()</sb> needs to be used.
 
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 <sb>set y to ()</sb> needs to be used.
<scratchblocks>set y to(scrolly) + ((360) * (0))</scratchblocks>
+
<scratchblocks>set y to((scrolly) + ((360) * (0)))</scratchblocks>
 
This can be combined with horizontal scrolling to scroll both horizontally and vertically.
 
This can be combined with horizontal scrolling to scroll both horizontally and vertically.
  
Line 191: Line 190:
  
 
== See Also ==
 
== See Also ==
*[[Extensive Scrolling Engine]]
+
* [[Extensive Scrolling Engine]]
*[[One Sprite One Script Project]]
+
* [[One Sprite One Script Project]]
*[[Scrolling Platformer Tutorial]]
+
* [[Scrolling Platformer Tutorial]]
*[[Simulating Gravity]]
+
* [[Simulating Gravity]]
  
 
==External links==
 
==External links==
*[[Wikipedia:Side-scrolling|Side-scrolling video game]] on Wikipedia
+
* [[Wikipedia:Side-scrolling|Side-scrolling video game]] on Wikipedia
*[https://youtu.be/--CE9QChhRE Side-scrolling tutorial] on YouTube
+
* [https://youtu.be/--CE9QChhRE Side-scrolling tutorial] on YouTube
 +
* [https://scratch.mit.edu/projects/133622642/ Side-scrolling example] on scratch
  
 
[[Category:Scripting Tutorials]]
 
[[Category:Scripting Tutorials]]
[[Category:How To Pages]]
+
[[Category:Game Design Tutorials]]
 
[[de:Bewegter Hintergrund]]
 
[[de:Bewegter Hintergrund]]
 
[[fr:Scratch Wiki Accueil/tutos/006 Scrolling]]
 
[[fr:Scratch Wiki Accueil/tutos/006 Scrolling]]

Latest revision as of 21:19, 12 July 2019

SandCastleIcon.png This page has links to websites or programs not trusted by Scratch or hosted by Wikipedia. Remember to stay safe while using the Internet, as we can't guarantee the safety of other websites.

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.

Knowing how to produce a scrolling effect is a highly valued ability in the Scratch community, and its difficulty is commonly overestimated.

How to Scroll

A scrolling script moves a sprite or set 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 ((scrollX) + ((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 scrollX 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 ((scrollX) + ((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)) > [600]> 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 scrollX variable and thus the positions of the sprites.

when flag clicked
forever
  if <key [right arrow v] pressed?> then
    change [scrollX v] by (-10)
  end
  if <key [left arrow v] pressed?> then
    change [scrollX v] by (10)
  end

Infinite Scrolling

This is a method for infinite scrolling. Just have

when flag clicked
forever
  set x to ((-1) * ((scrollX) mod (480)))

.

Then, have a second sprite with another script which is

when flag clicked
forever
  set x to ((-1) * (((scrollX) mod (480)) - (480)))

X and Y Scrolling

This is the same as the "Traditional Method", except with movement in two dimensions. You will need more scripts just like the ones above except with a different variable, and you will have to replace the number 480 with the height of the area you want 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 you 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 two. You will need to duplicate player one and player two so that they can go be seen on both sides of the split screen.

After your 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 [0]
forever
  if <key [right arrow v] pressed?> then
    change [Player 1 ScrollX v] by (-10)
  end
  if <key [left arrow v] pressed?> then
    change [Player 1 ScrollX 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. You will need to change the variable used and the arrow keys pressed.

In the duplicate of player one'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 ScrollX) - (Player 1 ScrollX)) y: (([y position v] of [Player 1 v]) - (anything))
  if <<((Player 2 ScrollX) - (Player 1 Scrollx)) > [240]> or <((Player 2 ScrollX) - (Player 1 ScrollX)) < [-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 you need 2 variables for each terrain. An example can be found here.

One Sprite One Script method

One Sprite one Script scrolling is advanced and scrolls only using 1 sprite. An example Scratch project is Line.

when gf clicked
go to x: (-118) y: (-123)
set [scrollx v] to [0]
set [oldx v] to (x position) //These blocks keep the player's position
set [oldy v] to (y position)
forever
  erase all
  switch costume to [costume2 v] // This is the first background costume
  go to x: ((scrollx) + ((480) * (0))) y: (0)
  stamp
  switch costume to [costume3 v] // This is the second background costume
  go to x: ((scrollx) + ((480) * (1))) y: (0)
  stamp // Continue this process until desired length is met
  switch costume to [costume1 v]
  go to x: (oldx) y: (oldy)
  if <key [right arrow v] pressed?> then// This gives the player controls.
    change [scrollx v] by (-5)
  end
  if <key [left arrow v] pressed?> then
    change [scrollx v] by (5)
  end

The old y variable must change the same amount as Y position when Jumping .

More information can be found in the One Sprite One Script Project 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 Mario Kart by Lucario621.

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 ((scrollX) + ((480) * (0)))
stamp
switch costume to [costume2 v]
set x to ((scrollX) + ((480) * (1)))
stamp
switch costume to [costume3 v]
set x to ((scrollX) + ((480) * (2)))
stamp

Y Scrolling

The screen can also scroll vertically in the Y axis.

First, make a variable called
(scrolly)

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((scrolly) + ((360) * (0)))

This can be combined with horizontal scrolling to scroll both horizontally and vertically.

Scrolling Text

Scrolling text is not mainly used for gaming purposes. It makes text scroll off the screen, while another one appears from above it. It can be used to put credits in the end of a project for a example 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 bottom.
next costume // Turns into next page.
go to x: (x position) y: (180) // Teleports new page to the top.
glide (1) secs to x: (x position) y: (0) // Glides to original position.

An example is here.

See Also

External links