• Home
• Felgo
• ParallaxItem

ParallaxItem

The ParallaxItem allows to create parallax movement effects. More...

• List of all members, including inherited members

Properties

• parallaxPositionTarget : Item
• ratio : point

Detailed Description

This component allows to create a parallax movement effect on all its children when the parallaxPositionTarget moves. The children will be moved faster / slower than the parallaxPositionTarget (parent by default) according the the parallax ratio.

Parallax Background Example

The following example shows the parallax effect using background images. The levelitem scrolls continuously and the parallax items move with different speed dependent on the ratio.

 import Felgo
 import QtQuick

 GameWindow {

   Scene {

     // The levelItem will be moved into the right direction to demonstrate the parallax effect.
     Item {
       id: levelItem

       // move the level item with constant speed to demonstrate the parallax effect
       MovementAnimation {
         target: levelItem
         property: "x"
         velocity: 10
         running: true
       }

       // First background image consists of an images moving slower than the level item
       ParallaxItem {
         ratio: Qt.point(0.8, 1.0)

         Image {
           source: "img/background-mountains-sd.png"
         }
       }

       // Second background image consists of 2 different images moving with the same speed as the level item
       ParallaxItem {
         ratio: Qt.point(1.0, 1.0)

         Image {
           x: -width
           source: "img/background-hills-sd.png"
         }

         Image {
           source: "img/background-hills2-sd.png"
         }
       }

       // Third background image consists of 1 image used twice moving faster than the level item
       ParallaxItem {
         ratio: Qt.point(1.3, 1.0)

         Image {
           x: -width
           source: "img/background-lawn-sd.png"
         }

         Image {
           id: grass2
           source: "img/background-lawn-sd.png"
         }
       }
     }

   } // end of Scene

 } // end of GameWindow

This code results in following image:

Also see the Parallax Test for more information about the correct usage of the ParallaxItem and how to use a ParallaxScrollingBackground.

Property Documentation