Touch Develop retirement postponed until June 22, 2019. Sign-in and access to cloud assets to be removed on May 23, 2018.Learn More..

parallax backgrounds

Parallax background is a scrolling technique using in 2D games to create an illusion of depth.
The Board→background scene action returns a background scene that allows to control a set of parallax layers.

quick use with the game library

The game library provides a helper that allows to easily set a horizontally or vertically scrolling background. In many cases, this is just good enough.
 game → set background scene( nature, "horizontal")
If you need more control over the background, keep on reading.

accessing the scene

The scene manages all the parallax layers. The scene is associated to a board.
var scene := board → background scene

creating layers

Each layer is basically defined by a distance and a picture. The higher the distance, the slower the layer will move.
var back layer := scene → create layer(100,  nature)
The order of creation does not matter, the scene will re-order the layers based on the distance.
var front layer := scene → create layer(0,  skyline)

updating the view

The scene maintains a position of the "view" as two actions scene→view x and scene→view y. You can update this value to move the view. The changes will be reflected once the board is updated on the wall.
  • move the view to the right
scene → set view x(scene → view x + 1)
  • move the view down
scene → set view y(scene → view y + 1)
That's it for basics!

customizing the layers

  • repeat horizontally (or not). The default is true.
back layer → set repeat x(true)
  • repeat vertically or not. The default is true.
back layer → set repeat y(false)
  • align horizontally the picture
back layer → set align x("right")
  • align vertically the picture
back layer → set align y("bottom")