Vertical scrolling with a hybrid 4x canvas

[Scott Ferguson]

See: video

Combine canvas scrolling with a single moving image sprite to make a vertical scroller with three z levels.

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 5x 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.BackgroundColor is set to none to allow Screen1.BackgroundImage to show through.

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 4x the Screen1.Height.

It' BackgroundImage and BackgroundColor are set to none to allow Screen1.BackgroundImage to show through.

Midground ImageSprite contains the midground image of the canyon walls, is 2x Screen1.Height and is fixed at Screen1.Height offset from the top of the canvas.

Foreground ImageSprite is 3x Screen1.Height and scrolls at the same ScrollingSpeed as GameCanvas.

CanvasSpacer.Height is initially set to 0 which positions the canvas at the top of CanvsContainer and displayes the area starting at 2x Screen1.Height from the top 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.

At the same time, Foreground moves down GameCanvas at ScrollingSpeed as well, which to the user looks like it is moving down twice as fast as Midground.

When Foreground has reached Screen1.Height offset from the top of GameCanvas it is reset back to the top.

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 (2.5x Screen1.Height.)

---

[Gale Fulton]

Great tutorial.  I have been wanting to create a game that would use vertical scrolling.  I was messing around with yours to get a better understanding of how it all works and realized...I can't add buttons to control the helicopter sprite because the canvass constantly resizes.  Any ideas how this might be accomplished?

Thank you again...I would not have though of this without this tutorial!

[Michael Ferguson]

See this example:

https://groups.google.com/forum/#!searchin/app-inventor-developers-library/scrolling%7Csort:relevance/app-inventor-developers-library/F_rn1vS76h4/s195MecqAAAJ

It keeps a sprite in one position on the screen as the canvas scrolls. That sprite could be a button.

---

msf