Scrolling (creating a scroller)

Шаблон:April FoolsШаблон:StubШаблон:Merge A scroller is a type of project that makes the background "scroll", or move out of the screen to make it feel like the player is moving. Шаблон:Note

The end product of this tutorial is a simple project where every time an object touches the player, it moves away from the player some more.

Preparation

Sprites

There will be four sprites used:

• Player: This is the sprite that the user controls.
• Background: This is the scrolling background.
• Hitbox: This is what sprites that touch the player will actually be touching. It is not shown.
• Object: The object that is interacting with the player.

Costumes

• The player and object can be anything
• The hitbox should be a rectangle or some shape that covers the place that actually counts as touching the player
• The background has to fill the entire screen and ideally chain well (i.e. one side of the background should smoothly transition into the other side)

Variables

• (scroll x): "for all sprites", this tracks the virtual x position.
• (my x): "for this sprite" on the Object sprite, this controls the object's virtual x position.

Programming

Setup

In the Hitbox sprite, add the following script:

when gf clicked
set [ghost v] effect to (99) //not visible to the user, but still not technically hidden
forever
  go to (Player v)
end

This will make the hitbox hidden, but other sprites can still check if they are touching it. The hitbox will also move so that it covers the Player correctly.

In the Player sprite, add the following script:

when gf clicked
set [scroll x v] to (0) // reset virtual x to 0
go to x: (0) y: (0) // the sprite itself should never move
set rotation style [left-right v] // it should point left or right only

This will simply initialize the positions.

In the Background sprite, add the following script:

when gf clicked
go to x: (0) y: (0)
go to [back v] layer // the background should always be at the back

This will move the background to the center and move it behind all other sprites.

In the Object sprite, add the following script:

when gf clicked
set y to (0) // this can be a different value if necessary
set [my x v] to (100) // this can be customized

Basic Movement

Expand the script in the Player sprite as follows:

when gf clicked
set [scroll x v] to (0)
go to x: (0) y: (0)
set rotation style [left-right v]
forever
  if <key (right arrow v) pressed?> then
    change [scroll x v] by (5)
    point in direction (90)
  end
  if <key (left arrow v) pressed?> then
    change [scroll x v] by (-5)
    point in direction (-90)
  end
end

This will change the virtual x so that the backgrounds will move.

Background Movement

Expand the script in the Background sprite as follows:

when gf clicked
go to x: (0) y: (0)
go to [back v] layer
create clone of (myself v)
forever
  set x to (() - ((scroll x) mod (480)))
end

This will make the background move so that it appears as if the player was moving.

Add the following new script as well:

when I start as a clone
go to [back v] layer
forever
  set x to ((480) - ((scroll x) mod (480)))
end

This will add a copy of the background shifted one Stage width to the right, so that the illusion is not broken by the first copy letting the white Stage through.

Object Movement

Expand the Object's script as follows:

when gf clicked
set y to (0)
set [my x v] to (100)
forever
  set x to ((my x) - (scroll x)) // This makes the object appear in the correct position relative to the player
  if <touching (Hitbox v)?> then
    change [my x v] by (100) // the scrolling equivalent of "change x by (100)"
  end
end

This will make it appear in the correct position relative to the player.

That is all that is necessary. More objects with more complex behavior can be added following the "Object"'s example.