Scrolling Platformer Tutorial

This article is about how to make a scrolling platformer.

The process begins by creating a sprite. In this article it is called terrain0_0 for clarity.

when flag clicked
forever
go to x: ((ScrollX) + ((480) * (0))) y: ((ScrollY) + ((360) * (0)))
end
This makes it so that the terrain scrolls. The two zeros in this situation correspond to the zeros in the sprite's name. For example, the sprite to the right of the center terrain is called terrain1_0 and it has
((scrollX)+((480)*(1)))
in the x space and
((scrollY)+((360)*(0)))
in the y space.

This can be repeated for the other terrain sprites. In general the terrain sprite that is x screens to the right of the center sprite and y screens above the center sprite is called terrainx_y in this example and has the following script:

when flag clicked
forever
go to x: ((ScrollX) + ((480) * (0))) y: ((ScrollY) + ((360) * (0)))
end

It looks something like this when the sensor sprites are made to go to the player sprite. It can vary depending on the sprite shape.

Mario.png

It is the same code for every sensor sprite.

when flag clicked
set [ghost v] effect to (100)
forever
go to [player v]
if <touching color [#09FF5C]?> then // terrain color may vary
set [hitTest v] to [1]
else
set [hitTest v] to [0]
end
end

The code in the picture below is then put into the player sprite.

when gf clicked
set [scrollX v] to [0]
set [scrollY v] to [0]
set [yVelocity v] to [0]
forever  
if <( [hitTest v] of [rightHitTest v] ) = [1]> then
change [scrollX v] by (10)
else
if <key [right arrow v] pressed?> then
change [scrollX v] by (-10)
point in direction (90 v)
end
end
if <( [hitTest v] of [LeftHitTest v] ) = [1]> then
change [scrollX v] by (-10)
else
if <key [left arrow v] pressed?> then
change [scrollX v] by (10)
point in direction (-90 v)
end
end
if <touching color [#09FF5C]?> then // terrain color may vary
set [yVelocity v] to [1]
if <key [up arrow v] pressed?> then
set [yVelocity v] to [15]
end
end
if <( [hitTest v] of [topHitTest v] ) = [1]> then
set [yVelocity v] to [-3]
change [scrollY v] by (3)
end
if <( [hitTest v] of [bottomHitTest v] ) = [1]> then
change [scrollY v] by (-5)
end
change [yVelocity v] by (-1)
change [scrollY v] by ((-1) * (yVelocity))
end

This results in a properly working scroller.

If the characters are intended to display animations when they move, the code in this project is added.

The final project looks something like this.

See Also

  • This page was last modified on 9 February 2016, at 22:08.