QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks¶
Creating the application screen¶
The first step is to create the basic QML items in your application.
To begin with, create a main screen like this:
This is defined by the main application file, samegame.qml
, which looks like this:
import QtQuick 2.0
Rectangle {
id: screen
width: 490; height: 720
SystemPalette { id: activePalette }
Item {
width: parent.width
anchors { top: parent.top; bottom: toolBar.top }
Image {
id: background
anchors.fill: parent
source: "../shared/pics/background.jpg"
fillMode: Image.PreserveAspectCrop
}
}
Rectangle {
id: toolBar
width: parent.width; height: 30
color: activePalette.window
anchors.bottom: screen.bottom
Button {
anchors { left: parent.left; verticalCenter: parent.verticalCenter }
text: "New Game"
onClicked: console.log("This doesn't do anything yet...")
}
Text {
id: score
anchors { right: parent.right; verticalCenter: parent.verticalCenter }
text: "Score: Who knows?"
}
}
}
It gives a basic game window that includes the main canvas for the blocks, a “New Game” button, and a score display.
One item you may not recognize here is the SystemPalette item. This provides access to the Qt system palette and is used to give the button a more native look-and-feel.
Notice the anchors for the Item
, Button
, and Text
items are set using
group notation for readability.
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, use the Text and MouseArea QML types inside a Rectangle.
Here is the Button.qml
code:
import QtQuick 2.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 an item that contains an image. The block
is defined in the Block.qml
file:
import QtQuick 2.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, you will animate and give behaviors to the blocks. You have not added any code yet to create the blocks; this will be done in the next chapter.
You have set the image to be the size of its parent Item using anchors.fill: parent
.
This means that when you 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 item’s source
property.
It is relative to the location of the file that contains the Image item.
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, as you have created some basic items to get started. In the next chapter, you will populate the game canvas with some blocks.
[Previous QML Advanced Tutorial] [Next QML Advanced Tutorial 2 - Populating the Game Canvas]
© 2018 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.