This project demonstrates a method to scroll a canvas left or right for a side-scrolling game.
Buttons and a textbox are provided to test different scroll speeds and to change the scrolling direction.
The layout used is based on a canvas that is three times the width of the device screen. Other arrangements are possible(a).
So that requires that the horizontal arrangment that contains the canvas be five times the width of the device screen.
Why? Because 1/3 of the canvas is always visible.
That means 2/3 of the canvas or two screen widths must have room to move out of view to the left and right of the device screen.
The canvas is pushed and pulled left and right by another horizontal arrangment to it's left (ScrollingCanvasX).
ScrollingCanvasX.Width is varied from 0 to two times the device screen width.
When it's width is set to 2 * screen width, the left side of the canvas is visible.
When it's width is set to 0, the right side of the canvas is visible.
For the airplane on the canvas to maintain it's position on the screen, it must move in the opposite direction of the canvas by the same amount.
So for each loop of the Scroll timer, ScrollingCanvasX.Width is subtracted from the airplane's x position.
With a background that is three times the device screen width, the left and right 1/3 of the canvas should be identical.
The middle 1/3 need not match the left and right 1/3s.
This demo uses responsive sizing and allows the device to be tilted horizontally or vertically.
---
(a) A canvas that is twice the device screen width is the minimum size required for scrolling. It would require a container that is three times the device width. The width of the spacer that pushes the canvas would range from zero to one screen width. The left and right sides of the background image would be identical. Canvases much larger than three times the device screen width may not function due to device memory limitations.
--
댓글 없음:
댓글 쓰기