Simulate a scrolling game background by moving the Canvas itself

[Scott Ferguson]

Move a Canvas left or right on the device screen.

A current project requires that the canvas background image move relative to a stationary ImageSprite and be the width of the device screen display for a side scroller game.

This required that the Canvas itself be moved left and right on the device screen.

This example project accomplishes that by placing the Canvas inside a horizontal screen arrangement (Container).

Inside Container are two components, an empty horizontal arrangement (Spacer) on the left and the Canvas (Canvas1) to be moved on the right.

Container.AlignHorizontal is set to left (1) aligned to cause the Canvas to always be touching Spacer to it's left.

Setting Spacer.Width moves Canvas1 left and right on the screen.

The global variable SPACER_MAX_WIDTH is a constant that is set to 2 x Screen1.Width.

Container.Width is set to 5 x Screen1.Width.

Canvas1.Width is set to 3 x Screen1.Width.

Spacer is initially set to the Screen1.Width which will center the canvas on the device display.

Canvas1 can be moved a total distance of 2 x Screen1.Width with this scheme, so centering the canvas allows it to scroll both left and right a full screen width.

Other arrangements could be made such as:

Container.Width = 3 x Screen1.Width, Canvas1.Width = 2 x Screen1.Width where 1/2 of the canvas can be viewed at a time.

Container.Width = 7 x Screen1.Width, Canvas1.Width = 4 x Screen1.Width where 1/4 of the canvas is visible at a time. (if device memory allows!)

etc.

In all of these schemes some part of Canvas1 can be allways visible and fill the width of the device display.

(2015/08/30 - Although the following red-highlighted text is a working method, I have since found that a ShowChoose Notifier can be used instead of a Clock Timer to allow the Canvas to refresh.)

A CLOCK TIMER IS REQUIRED TO ALLOW ARRANGEMENTS WIDER THAN THE DEVICE SCREEN WIDTH TO DISPLAY:

A timer (Initialize) is used to give the device time to adjust the positions of components wider than the screen when the app starts.

HOW TO USE THIS APP:

A ball is bounced on the canvas and two other balls are centered vertically on the canvas.

When Canvas1 is shifted left or right, the Red ball moves to stay centered on the device screen but the Yellow ball moves with the canvas (it is not animated, but can be collided with).

The RedBall sprite's X position is adjusted with the SpacerWidthToCanvasX procedure-with-result that tracks the current Spacer.Width.

The canvas can be moved in the following ways in this demo:

a. Drag the canvas directly to move it left and right (this adjusts the width of the CanvasX arrangment).

b. Touch and hold the Ball sprites in the small canvas (Canvas2) below the main canvas to move the main canvas in a smooth scrolling motion (uses the Scroll Clock component which can be set to any speed by changing the Interval property value).

c. Drag the small canvas strip (Canvas3) to move Canvas1 an amplified distance (see the Canvas3.Dragged event block).

d. touch the left and right buttons to move Canvas1 left or right five pixels at a time. Reset the Balls with the Reset button.

e. tick the 'track pink ball' checkbox to have the canvas follow the movement of the pink ball.

CONCLUSION:

This technique can be used to allow a fixed background image on a canvas to move left and right.

It may be useful for moving other components on the device screen as well such as panning an image wider than the screen or sliding a tray of buttons on or off the screen.

---

END