Time for action – revisiting parallax scrolling

We will implement parallax scrolling with a set of layers that move in the direction opposite to the one the player is moving in. Therefore, we will need a definition of the scene and a moving layer.

Create a new QML Document (Qt Quick 2). Call it ParallaxScene.qml. The scene will encompass the whole game "level" and will expose the position of the player to the moving layers. Put the following code in the file:

import QtQuick 2.2

Item {
  id: root
  property int currentPos
  x: -currentPos*(root.width-root.parent.width)/width
}

Then, create another QML Document (Qt Quick 2) and call it ParallaxLayer.qml. Make it contain the following definition:

import QtQuick 2.2

Item {
  property real factor: 0
  x: factor > 0 ? -parent.currentPos/factor - parent.x : 0
}

Now, let's use the two new element types in the main QML document. We'll take elements from the earlier scene definition and make them into different parallax...