Time for action – scene for an action game

Create a new Qt Quick UI project. In the project directory, make a subdirectory called images and from the game project that we have created using Graphics View copy grass.png, sky.png, and trees.png. Then, put the following code into the QML document:

import QtQuick 2.1

Image {
  id: root
  property int dayLength: 60000 // 1 minute
  source: "images/sky.png"

  Item {
    id: sun
    x: 140
    y: root.height-170
    Rectangle {
      id: sunVisual
      width: 40
      height: width
      radius: width/2
      color: "yellow"
      anchors.centerIn: parent
    }
  }
  Image {
    source: "images/trees.png"
    x: -200
    anchors.bottom: parent.bottom
  }
  Image {
    source: "images/grass.png"
    anchors.bottom: parent.bottom
  }
}

When you run the project now, you will see a screen similar to this one:

What just happened?

We set up a very simple scene consisting of three images stacked up to form...