Home · All Classes · All Functions · Overviews

[Previous: QML Advanced Tutorial] [QML Advanced Tutorial] [Next: QML Advanced Tutorial 2 - Populating the Game Canvas]

QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks

The first step is to create the items in your application. In Same Game we have a main game screen and the blocks that populate it.

Here is the QML code for the basic elements. The game window:

 import Qt 4.6

 Rectangle {
     id: screen
     width: 490; height: 720

     SystemPalette { id: activePalette }

     Item {
         width: parent.width; anchors.top: parent.top; anchors.bottom: toolbar.top

         Image {
             id: background
             anchors.fill: parent; source: "pics/background.png"
             fillMode: Image.PreserveAspectCrop
         }
     }

     Rectangle {
         id: toolbar
         color: activePalette.window
         height: 32; width: parent.width
         anchors.bottom: screen.bottom

         Button {
             id: btnA; text: "New Game"; onClicked: console.log("Implement me!");
             anchors.left: parent.left; anchors.leftMargin: 3
             anchors.verticalCenter: parent.verticalCenter
         }

         Text {
             id: score
             text: "Score: Who knows?"; font.bold: true
             anchors.right: parent.right; anchors.rightMargin: 3
             anchors.verticalCenter: parent.verticalCenter
         }
     }
 }

This gives you a basic game window, with room for the game canvas. A new game button and room to display the score. The one thing you may not recognize here is the SystemPalette item. This item provides access to the Qt system palette and is used to make the button look more like a system button (for exact native feel you would use a QPushButton). Since we want a fully functional button, we use the QML elements Text and MouseArea inside a Rectangle to assemble a button. Below is the code which we wrote to do this:

 import Qt 4.6

 Rectangle {
     id: container

     signal clicked
     property string text: "Button"

     color: activePalette.button; smooth: true
     width: txtItem.width + 20; height: txtItem.height + 6
     border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;

     gradient: Gradient {
         GradientStop {
             id: topGrad; position: 0.0
             color: if (mr.pressed) { activePalette.dark } else { activePalette.light } }
         GradientStop { position: 1.0; color: activePalette.button }
     }

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

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

Note that this Button component was written to be fairly generic, in case we want to use a similarly styled button later.

And here is a simple block:

 import Qt 4.6

 Item {
     id:block

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

Since it doesn't do anything yet it's very simple, just an image. As the tutorial progresses and the block starts doing things the file will become more than just an image. Note that we've set the image to be the size of the item. This will be used later, when we dynamically create and size the block items the image will be scaled automatically to the correct size.

You should be familiar with all that goes on in these files so far. This is a very basic start and doesn't move at all - next we will populate the game canvas with some blocks.

[Previous: QML Advanced Tutorial] [QML Advanced Tutorial] [Next: QML Advanced Tutorial 2 - Populating the Game Canvas]


Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0