HTML and CSS Reference
In-Depth Information
4.
With each of the background layers implemented and positioned correctly our level
should look similar to the following screenshot:
How it works...
We begin by creating a new object called
ScrollingBackground
, which is responsible for
moving a 2D texture horizontally along the canvas. Using a series of scrolling layers we are
able to produce a parallax effect that gives off the illusion of depth within the game. This
is achieved by moving the background layer(s) at a slower speed than those layers that are
closer to the foreground. As each layer moves off the canvas it then wraps back around to
the other side of the canvas thus continually looping. This is beneicial to game development
as it helps to reduce the amount of assets required for level design. It can also be said that
it is more eficient than loading large textures into our application, which would result in a
decrease in performance.
The object in question requires that we pass a texture, 2D position, depth position, width,
height, and speed to it. The texture parameter refers to the texture that is loaded into the
application and that will be used to represent a background layer. The 2D position indicates
where the texture should start to be drawn on the canvas, for example, the top-left corner of
the canvas, whereas the depth position indicates the position of the texture within the list of
layers that make up the game. The width and height are used to ind the point at which the
texture should be drawn to, that is its end point. The width and height parameters can be
used to draw a portion of a texture rather than the whole texture thus increasing the overall
performance of the application.
