This is a read-only archive of the old Scratch 1.x Forums.
Try searching the current Scratch discussion forums.

#76 2008-07-15 13:12:37

Kingdaro
Scratcher
Registered: 2008-06-08
Posts: 100+

Re: Scrolling Background - Help.

Zelda123 wrote:

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

With the help of this and studying the code of your perfect sidescrolling engine, I was able to make a guide partly about it.
http://scratch.mit.edu/projects/Zelda123/200396

...I'm speechless that was confusing...

Offline

 

#77 2008-07-15 19:10:52

archmage
Scratcher
Registered: 2007-05-18
Posts: 1000+

Re: Scrolling Background - Help.

3210werdnahcaz wrote:

my scrolling still glitches up using the 2nd method!

http://scratch.mit.edu/projects/archmage/82995

If your code isnt the same as the code in that project you did something wrong.


Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !

Offline

 

#78 2008-07-15 19:13:49

archmage
Scratcher
Registered: 2007-05-18
Posts: 1000+

Re: Scrolling Background - Help.

Kingdaro wrote:

...I'm speechless that was confusing...

Well did you bother to read the whole thing? If you just looked at it you were probally scared by the big wall o' text but if you read it I give a break down of how each individual script functions.


Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !

Offline

 

#79 2008-07-21 00:16:49

the3rdage
Scratcher
Registered: 2008-07-20
Posts: 100+

Re: Scrolling Background - Help.

ive learned alot from these posts

Offline

 

#80 2008-07-22 13:42:43

bobboder
Scratcher
Registered: 2008-04-25
Posts: 9

Re: Scrolling Background - Help.

I am making a hockey game. So with my scrolling when my player gets to the net, I want the scrolling to stop without having to stop the script forever. is there a script that can do this?

please help! Thanks.  smile
___________________________________________________________________________________
<when[bobboder]clicked>

Offline

 

#81 2008-07-22 18:36:08

archmage
Scratcher
Registered: 2007-05-18
Posts: 1000+

Re: Scrolling Background - Help.

bobboder wrote:

I am making a hockey game. So with my scrolling when my player gets to the net, I want the scrolling to stop without having to stop the script forever. is there a script that can do this?

please help! Thanks.  smile
___________________________________________________________________________________
<when[bobboder]clicked>

Set a limit for your scrolling variables.
Then if the variables pass that limit set the variable to that limit.

like this sorta

forever if (scrollX>1000)
set scrollX to 1000

I hope you get the idea.


Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !

Offline

 

#82 2008-07-24 06:30:47

silver_da_heghog
Scratcher
Registered: 2008-07-22
Posts: 2

Re: Scrolling Background - Help.

lol

Offline

 

#83 2008-07-24 08:58:45

kirby_loves_muse
Scratcher
Registered: 2008-07-24
Posts: 7

Re: Scrolling Background - Help.

silver_da_heghog wrote:

lol

?

Offline

 

#84 2008-07-30 18:31:28

Tengii
Scratcher
Registered: 2008-05-07
Posts: 9

Re: Scrolling Background - Help.

Thanks archmage, this will really help me. X3

Offline

 

#85 2008-08-05 16:00:06

theshapeshifterage
Scratcher
Registered: 2008-08-04
Posts: 100+

Re: Scrolling Background - Help.

Kingdaro wrote:

Zelda123 wrote:

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

With the help of this and studying the code of your perfect sidescrolling engine, I was able to make a guide partly about it.
http://scratch.mit.edu/projects/Zelda123/200396

...I'm speechless that was confusing...

it is actually quit simple
i did not try archmages version yet
i tried zelda123's and it DID NOT WORK. Well ima take a break then try archmages version

Offline

 

#86 2008-08-05 16:07:25

archmage
Scratcher
Registered: 2007-05-18
Posts: 1000+

Re: Scrolling Background - Help.

Zelda123's should work. You probably did something wrong. Compare your project to the working examples in this thread.


Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !

Offline

 

#87 2008-08-05 16:13:15

theshapeshifterage
Scratcher
Registered: 2008-08-04
Posts: 100+

Re: Scrolling Background - Help.

archmage wrote:

Zelda123's should work. You probably did something wrong. Compare your project to the working examples in this thread.

i did i checked over my work 5 times.  I even downloaded his project and i still found them exactly the same

Offline

 

#88 2008-08-06 02:05:36

theshapeshifterage
Scratcher
Registered: 2008-08-04
Posts: 100+

Re: Scrolling Background - Help.

theshapeshifterage wrote:

archmage wrote:

Zelda123's should work. You probably did something wrong. Compare your project to the working examples in this thread.

i did i checked over my work 5 times.  I even downloaded his project and i still found them exactly the same

now i even tried archmages version and it did not work

Offline

 

#89 2008-08-06 14:35:03

archmage
Scratcher
Registered: 2007-05-18
Posts: 1000+

Re: Scrolling Background - Help.

theshapeshifterage wrote:

archmage wrote:

Zelda123's should work. You probably did something wrong. Compare your project to the working examples in this thread.

i did i checked over my work 5 times.  I even downloaded his project and i still found them exactly the same

If his code is working and your doesn't then the scripts are different. Maybe if you upload your attempt I can tell you what you did wrong.


Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !

Offline

 

#90 2008-08-06 15:01:54

SonicPops
Scratcher
Registered: 2007-06-10
Posts: 100+

Re: Scrolling Background - Help.

Okay, whatever you do, don't reply to archmage's huge post. It makes my CPU lag  tongue
archmage: Are you going to brawl yet?  neutral


smile  Go Crank. Inc!  smile
Not much to say  wink

Offline

 

#91 2008-08-06 15:03:22

archmage
Scratcher
Registered: 2007-05-18
Posts: 1000+

Re: Scrolling Background - Help.

SonicPops wrote:

Okay, whatever you do, don't reply to archmage's huge post. It makes my CPU lag  tongue
archmage: Are you going to brawl yet?  neutral

I am trying to join your room but I can't so try joining mine.


Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !

Offline

 

#92 2008-08-06 15:04:33

SonicPops
Scratcher
Registered: 2007-06-10
Posts: 100+

Re: Scrolling Background - Help.

archmage wrote:

SonicPops wrote:

Okay, whatever you do, don't reply to archmage's huge post. It makes my CPU lag  tongue
archmage: Are you going to brawl yet?  neutral

I am trying to join your room but I can't so try joining mine.

Hmm...I can't join yours  sad


smile  Go Crank. Inc!  smile
Not much to say  wink

Offline

 

#93 2008-08-06 15:05:28

archmage
Scratcher
Registered: 2007-05-18
Posts: 1000+

Re: Scrolling Background - Help.

SonicPops wrote:

archmage wrote:

SonicPops wrote:

Okay, whatever you do, don't reply to archmage's huge post. It makes my CPU lag  tongue
archmage: Are you going to brawl yet?  neutral

I am trying to join your room but I can't so try joining mine.

Hmm...I can't join yours  sad

There is probably something wrong with your connection then.


Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !

Offline

 

#94 2008-08-06 17:08:35

SonicPops
Scratcher
Registered: 2007-06-10
Posts: 100+

Re: Scrolling Background - Help.

archmage wrote:

SonicPops wrote:

archmage wrote:


I am trying to join your room but I can't so try joining mine.

Hmm...I can't join yours  sad

There is probably something wrong with your connection then.

:0 My connection is fine, thank you!  big_smile


smile  Go Crank. Inc!  smile
Not much to say  wink

Offline

 

#95 2008-08-06 20:41:35

Bobby500
Scratcher
Registered: 2008-04-19
Posts: 1000+

Re: Scrolling Background - Help.

This got off topic...

Offline

 

#96 2008-08-09 10:22:12

talya
Scratcher
Registered: 2008-08-09
Posts: 2

Re: Scrolling Background - Help.

Following Scratch  program downloading time after time I seem to miss the red stop sign and green flag on the top right and the icons on the bottom right

pls help

Offline

 

#97 2008-08-09 10:24:45

talya
Scratcher
Registered: 2008-08-09
Posts: 2

Re: Scrolling Background - Help.

Following Scratch  program downloading time after time I seem to miss the red stop sign and green flag on the top right and the icons on the bottom right

pls help

Offline

 

#98 2008-08-22 14:26:17

keroro645
Scratcher
Registered: 2008-06-07
Posts: 1000+

Re: Scrolling Background - Help.

How do you make a point and scroller type thing with velocity?

Offline

 

#99 2008-08-22 16:58:59

archmage
Scratcher
Registered: 2007-05-18
Posts: 1000+

Re: Scrolling Background - Help.

Change the scrolling variable by a velocity variable. Then use a forever block to multiply it by a number less than 1.

// like this
forever
change scrollX by velocity
set velocity to (velocity*0.7)


Hi, I am Archmage coder extraordinaire. I do Scratch,pascal,java,php,html, AS2 and AS3. Leave me a message if you want coding advice. Also check out my personal website, lots of good stuff about web development, Flash, and Scratch (v1 and v2) !

Offline

 

#100 2008-08-22 17:20:54

keroro645
Scratcher
Registered: 2008-06-07
Posts: 1000+

Re: Scrolling Background - Help.

archmage wrote:

Change the scrolling variable by a velocity variable. Then use a forever block to multiply it by a number less than 1.

// like this
forever
change scrollX by velocity
set velocity to (velocity*0.7)

Can you please explain a little more cause i dont get it.

Offline

 

Board footer