Vertical Scrolling by Moving a 2x Canvas

[Scott Ferguson]

This project has a helicopter rising through a canyon.

Screen1.VerticalAlignment is set to 'center' to allow vertical scrolling to work.

Screen1.BackgroundImage contains the clouds image Background.png.

A vertical arrangment container CanvasContainer is set to 3x the Screen1.Height.

It's BackgroundColor is set to none to allow the Screen1.BackgroundImage clouds to show through.

Inside CamvasContainer are another vertical arrangement CanvasSpacer followed by a canvas GameCanvas.

CanvasSpacer.Height can be set from 0 to Screen1.Height to move GameCanvas below it up or down.

Below CanvasSpacer, canvas GameCanvas is set to 2x the Screen1.Height.

Its BackgroundImage is set to Midground.png which is an image of canyon walls.

CanvasSpacer.Height is initially set to 0 which positions the canvas at the top of CanvasContainer and displayes the bottom 1/2 of the canvas on the screen.

CanvasSpacer.Height is gradually increased to move the canvas down until it has reached the bottom of CanvasContainer.

At that point it is moved back to the top of CanvasContainer by setting CanvasSpacer.Height back to 0 and the process repeats.

This is done inside the Scroll.Timer event block by using the 'modulo of' math operator block.

Helicopter.Y must constantly be adjusted as the canvas moves down the screen so that it hovers in the same position relative to the screen viewport.

This is accomplished in the FlyHelicopter procedure by subtracting the current CanvasSpacer.Height from the helicopter's initial Y position (1.5x Screen1.Height.)

Images courtesy of https://github.com/DigitalLeaves/ParallaxBackground/blob/master/README.md

---