QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks

Adding Button and Block components

The Button item in the code above is defined in a separate component file named Button.qml. To create a functional button, we use the QML elements Text and MouseArea inside a Rectangle. Here is the Button.qml code:

 import QtQuick 1.0

 Rectangle {
     id: container

     property string text: "Button"

     signal clicked

     width: buttonLabel.width + 20; height: buttonLabel.height + 5
     border { width: 1; color: Qt.darker(activePalette.button) }
     smooth: true
     radius: 8

     // color the button with a gradient
     gradient: Gradient {
         GradientStop {
             position: 0.0
             color: {
                 if (mouseArea.pressed)
                     return activePalette.dark
                 else
                     return activePalette.light
             }
         }
         GradientStop { position: 1.0; color: activePalette.button }
     }

     MouseArea {
         id: mouseArea
         anchors.fill: parent
         onClicked: container.clicked();
     }

     Text {
         id: buttonLabel
         anchors.centerIn: container
         color: activePalette.buttonText
         text: container.text
     }
 }

This essentially defines a rectangle that contains text and can be clicked. The MouseArea has an onClicked() handler that is implemented to emit the clicked() signal of the container when the area is clicked.

In Same Game, the screen is filled with small blocks when the game begins. Each block is just an item that contains an image. The block code is defined in a separate Block.qml file:

 import QtQuick 1.0

 Item {
     id: block

     Image {
         id: img
         anchors.fill: parent
         source: "../shared/pics/redStone.png"
     }
 }

At the moment, the block doesn't do anything; it is just an image. As the tutorial progresses we will animate and give behaviors to the blocks. We have not added any code yet to create the blocks; we will do this in the next chapter.

We have set the image to be the size of its parent Item using anchors.fill: parent. This means that when we dynamically create and resize the block items later on in the tutorial, the image will be scaled automatically to the correct size.

Notice the relative path for the Image element's source property. This path is relative to the location of the file that contains the Image element. Alternatively, you could set the Image source to an absolute file path or a URL that contains an image.

You should be familiar with the code so far. We have just created some basic elements to get started. Next, we will populate the game canvas with some blocks.