Scratch

archmage wrote:

I am going to try and explain how to scroll stuff in scratch but you better be good at programming in scratch before you try this. I do not recommend a scrolling game as your first project.

There are 2 methods of scrolling I use. Method 1 uses many sprites, is easy to implement but can cause lag if the area is too large. Method 2 uses just 2 sprites but does not lag.

METHOD 1: SCROLLING WITH MANY SPRITES
For a demonstration of this method go to http://scratch.mit.edu/projects/archmage/76150

Ok first create a new variable called scrollX

        <{  scrollX  }>

Now that we have that we will need to have our scrolling sprites.
So make a sprite called terrian0.

*It is important to name the sprite terrain0 instead of terrain1 to check and adjust a value used to scroll.*

Now some of these numbers may vary in value depending on the size of your sprite. This assumes your sprite is as wide as the screen.

The number 480 in this code block represents the stage's total width.

//This should be placed on the sprite "terrain0"
<when green flag clicked>

<forever>
<set x to( (( <{ scrollX }>  <+>  ((  480 <*>  0 )) ))

Now the 480 * 0 bit is not necessary in the first sprite you want to scroll but we will keep it in there so we can use it when we duplicate the sprite using the duplicate tool. What that number actually represents is the number at the end of the sprite's name so for the sprite terrain1 you would put

<forever>
<set x to( (( <{ scrollX }>  <+>  ((  480 <*>  1 )) ))

and for terrain2 you would put a 2 instead of a 1 and so on.

Now the number at the end of the sprites name will dictate the order of the sprites so if you keep moving right you will first see terrain1 then terrain2 then terrain3 ect.


now here is a simple script that demonstrates how to alter the scrollX variable to make your sprites scroll.
This code should be placed on the stage. Using this code on multiple sprites is not necessary and not recommended.

<when green flag clicked>

<forever if> <key[ right arrow  ]pressed?>
<change{  scrollX }by( 5


<forever if> <key[ left arrow  ]pressed?>
<change{  scrollX }by( -5

METHOD 2:SCROLLING WITH 2 SPRITES
For a demonstration of this method go to http://scratch.mit.edu/projects/archmage/82995

You should already be comfortable using the first scrolling method as this method is more difficult

You will need to create 3 different variables for this method

  <{  scrollX  }>    //This variables keeps track of how far the user has scrolled

  <{ terrainNum  }>  //This is used to let the terrain sprite know what terrain should be displayed
 
<{  xVelocity  }>  //For some reason I was unable to get linear movement to make the terrain sprite not flicker with this method. However when the scrolling variable is changed according to the xVelocity variable the scrolling works as it should and does not flicker.

*Place these scripts on the stage*

<when green flag clicked>
<forever>
<if>  <( (( <round( <{ scrollX }>  </> 480 )) <>> (( <{ scrollX }>  </> 480 )) )>
<set{ terrainNum }to( (( <round(  (( <{ scrollX }>  </> -480 )) <+> 1 ))
<else>
<set{ terrainNum }to( <round(  (( <{ scrollX }>  </> -480 ))

What this script does is it divides the scroll variable by the stage's width and then rounds it down to the nearest whole number.

<when green flag clicked>
<forever>
<if> <key[ right arrow ]pressed?>
<change{ xVelocity }by( -2
<end>
<if> <key[ left arrow ]pressed?>
<change{ xVelocity }by( 2
<end>
<set{ xVelocity }to(  (( <{ xVelocity }> <*> 0.9  ))
<change{ scrollX }by( <{ xVelocity }>
<end>

This is a basic movement code that uses the xVelocity variable to change the scrollX variable.


Now before we begin programming on the terrain sprites it is very important to remember that BOTH of the two terrain sprites must have exactly the same costumes in exactly the same order. Now doing this will result in weird changing of the terrain sprites to incorrect costumes.

Make sure you have created 2 terrain sprites called "terrain1" and "terrain2".

Now put this code on terrain1.

<when green flag clicked>
<forever>
<switch to costume[ <{ terrainNum }>
<set x to( (( <{ scrollX  }> <+>  (( 480 <*> (( <{ terrainNum }> <-> 1 )) ))))
<end>

What this script does is it sets it's costume according to the terrainNum variable and then it sets it's x position to scrollX+(480*(terrainNum-1)). When the terrainNum variable changes it makes the terrain scripts change costumes accordingly and move to the proper position.

Now put this code on terrain2.

<when green flag clicked>
<forever>
<switch to costume[ (( <{ terrainNum }> <+> 1 ))
<set x to( (( <{ scrollX  }> <+>  (( 480 <*> <{ terrainNum }> ))))
<end>

This script is similar to the script on the first terrain sprite but it has been altered to appear in front of the terrain1 sprite.

Both methods when used correctly will produce a scrolling effect.

If you want to see examples of projects that feature scrolling go to this gallery.
http://scratch.mit.edu/galleries/view/8494

that's good advice but here is a more simple way to do it without variables:    :

ON THE BACKGROUND YOU WANT TO SCROLL ON

first,make a sprite that is little. This represents your moving background.

Then,make it BIG.

Then,put this

<when[ right arrow ]key pressed>
<change x by( 3)>

Then,this

<when[ left arrow  ]key pressed>
<change x by( -3)>

Then,if you want some mario song...

<when green flag clicked>
<forever>
<play sound[ Mario song ]and waits>
<end>

But this is optional.

then,on the sprite.

<when[  right arrow ]key pressed>
<point in direction( 90)>

and you can add <next costume> if you want to make an animated run.

and then,
<when[  left arrow ]key pressed>
<point in direction( -90)>

So that's all!

FoxDur wrote:

Thank you! I'll use this on my next scrolling game.

me too!

floppy_gunk wrote:

How to easily make a four-background mouse-scrolling project (it is SO easy!):

First make four sprites as big as the background.
On each sprite, go to the paint editor and click on 'set rotation center'.
set the rotation center on one of the sprites to the bottom left corner, on another the bottom right corner, etc. Then on each sprite, do this:

<when green flag clicked>
<forever>
<go to x   (( 0 <-> <mouse x> )) )y   (( 0 <-> <mouse y> ))
<end>

And hey presto! You have made a mouse-scrolling project!

and then if you wanted more than one mouse scrolling project, u do the same thing but go to x: 0-mouse x plus 478  go to y: 0-mouse y

this would put a piece of terrain to the right.

floppy_gunk wrote:

bosox397 wrote:

floppy_gunk wrote:

How to easily make a four-background mouse-scrolling project (it is SO easy!):

First make four sprites as big as the background.
On each sprite, go to the paint editor and click on 'set rotation center'.
set the rotation center on one of the sprites to the bottom left corner, on another the bottom right corner, etc. Then on each sprite, do this:

[blocks]<when green flag clicked>
<forever>
<go to x   (( 0 <-> <mouse x> )) )y   (( 0 <-> <mouse y> ))
<end>[/blocks]

And hey presto! You have made a mouse-scrolling project!

and then if you wanted more than one mouse scrolling project, u do the same thing but go to x: 0-mouse x plus 478  go to y: 0-mouse y

this would put a piece of terrain to the right.

But then you would have to use this code instead:

[blocks]<when green flag clicked>
<forever>
<go to x   (( 0 <-> (( <mouse x> <*> 2 )) )) )y   (( 0 <-> (( <mouse y> <*> 2 )) ))
<end>[/blocks]

well, if you dig around my profile, you find a mouse scrooler, very basicly made.

I used scrolling method one, however, after one sucessful attempt, the first sprite that is scrolling goes right to the end after the green flag is clicked. What should I do?

Thanks, it worked! My problem now is that the following sprites won't scroll!
I tried <forever>                   but it did not work!
            <set{ scrollx }to( 0

sailorgrl wrote:

Thanks, it worked! My problem now is that the following sprites won't scroll!
I tried <forever>                   but it did not work!
            <set{ scrollx }to( 0

It won't scroll because your scrolling variable is always at 0.
Just do When Green flag clicked, set scroll x to 0. Don't use the forever bit.

it wont work?<change{  }by(

archmage wrote:

I am going to try and explain how to scroll stuff in scratch but you better be good at programming in scratch before you try this. I do not recommend a scrolling game as your first project.

There are 2 methods of scrolling I use. Method 1 uses many sprites, is easy to implement but can cause lag if the area is too large. Method 2 uses just 2 sprites but does not lag.

METHOD 1: SCROLLING WITH MANY SPRITES
For a demonstration of this method go to http://scratch.mit.edu/projects/archmage/76150

Ok first create a new variable called scrollX

        <{  scrollX  }>

Now that we have that we will need to have our scrolling sprites.
So make a sprite called terrian0.

*It is important to name the sprite terrain0 instead of terrain1 to check and adjust a value used to scroll.*

Now some of these numbers may vary in value depending on the size of your sprite. This assumes your sprite is as wide as the screen.

The number 480 in this code block represents the stage's total width.

//This should be placed on the sprite "terrain0"
<when green flag clicked>

<forever>
<set x to( (( <{ scrollX }>  <+>  ((  480 <*>  0 )) ))

Now the 480 * 0 bit is not necessary in the first sprite you want to scroll but we will keep it in there so we can use it when we duplicate the sprite using the duplicate tool. What that number actually represents is the number at the end of the sprite's name so for the sprite terrain1 you would put

<forever>
<set x to( (( <{ scrollX }>  <+>  ((  480 <*>  1 )) ))

and for terrain2 you would put a 2 instead of a 1 and so on.

Now the number at the end of the sprites name will dictate the order of the sprites so if you keep moving right you will first see terrain1 then terrain2 then terrain3 ect.


now here is a simple script that demonstrates how to alter the scrollX variable to make your sprites scroll.
This code should be placed on the stage. Using this code on multiple sprites is not necessary and not recommended.

<when green flag clicked>

<forever if> <key[ right arrow  ]pressed?>
<change{  scrollX }by( 5


<forever if> <key[ left arrow  ]pressed?>
<change{  scrollX }by( -5

METHOD 2:SCROLLING WITH 2 SPRITES
For a demonstration of this method go to http://scratch.mit.edu/projects/archmage/82995

You should already be comfortable using the first scrolling method as this method is more difficult

You will need to create 3 different variables for this method

  <{  scrollX  }>    //This variables keeps track of how far the user has scrolled

  <{ terrainNum  }>  //This is used to let the terrain sprite know what terrain should be displayed
 
<{  xVelocity  }>  //For some reason I was unable to get linear movement to make the terrain sprite not flicker with this method. However when the scrolling variable is changed according to the xVelocity variable the scrolling works as it should and does not flicker.

*Place these scripts on the stage*

<when green flag clicked>
<forever>
<if>  <( (( <round( <{ scrollX }>  </> 480 )) <>> (( <{ scrollX }>  </> 480 )) )>
<set{ terrainNum }to( (( <round(  (( <{ scrollX }>  </> -480 )) <+> 1 ))
<else>
<set{ terrainNum }to( <round(  (( <{ scrollX }>  </> -480 ))

What this script does is it divides the scroll variable by the stage's width and then rounds it down to the nearest whole number.

<when green flag clicked>
<forever>
<if> <key[ right arrow ]pressed?>
<change{ xVelocity }by( -2
<end>
<if> <key[ left arrow ]pressed?>
<change{ xVelocity }by( 2
<end>
<set{ xVelocity }to(  (( <{ xVelocity }> <*> 0.9  ))
<change{ scrollX }by( <{ xVelocity }>
<end>

This is a basic movement code that uses the xVelocity variable to change the scrollX variable.


Now before we begin programming on the terrain sprites it is very important to remember that BOTH of the two terrain sprites must have exactly the same costumes in exactly the same order. Now doing this will result in weird changing of the terrain sprites to incorrect costumes.

Make sure you have created 2 terrain sprites called "terrain1" and "terrain2".

Now put this code on terrain1.

<when green flag clicked>
<forever>
<switch to costume[ <{ terrainNum }>
<set x to( (( <{ scrollX  }> <+>  (( 480 <*> (( <{ terrainNum }> <-> 1 )) ))))
<end>

What this script does is it sets it's costume according to the terrainNum variable and then it sets it's x position to scrollX+(480*(terrainNum-1)). When the terrainNum variable changes it makes the terrain scripts change costumes accordingly and move to the proper position.

Now put this code on terrain2.

<when green flag clicked>
<forever>
<switch to costume[ (( <{ terrainNum }> <+> 1 ))
<set x to( (( <{ scrollX  }> <+>  (( 480 <*> <{ terrainNum }> ))))
<end>

This script is similar to the script on the first terrain sprite but it has been altered to appear in front of the terrain1 sprite.

Both methods when used correctly will produce a scrolling effect.

If you want to see examples of projects that feature scrolling go to this gallery.
http://scratch.mit.edu/galleries/view/8494

Simply Genius

Uhhm... Sorry, but couldn't you just make a background (a sky, for example) and make sprites for pieces of ground, etc. move with the arrow keys instead of what you're supposed to be controlling moving? and isn't that considerably less time-consuming? I'm not an expert on this, but I have some scrolling projects of my own on my personal computer (most of my projects are just ____-offs which I don't put online) which use this technique.

I just make them hide, go to the other end of the page, and show again, and it works fine.

But if you make them hide and show at different times then you can make it so that the background will change at different places. As long as none of the sprites are too long, I don't think that the limit will apply for mine either.