This article is a stub. It may be incomplete, unfinished, or have missing parts/sections. If the article can be expanded, please do so! There may be suggestions on its talk page. (June 2018) |
It has been suggested that this page's contents be merged with the page Scrolling Platformer Tutorial. You can discuss this on the page's talk page. (October 2018) |
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: | This tutorial specifically deals only with x scrolling, but the concepts can be used for y scrolling. |
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.