Qt开发实例：如何建立游戏画布和块

QML高级教程1-建立游戏画布和块框架

Qt是一个跨平台框架，一般用做图形工具包，它不只建立CLI应用程序中很是有用。并且它也能够在三种主要的台式机操做系统以及移动操做系统（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式设备，Android（Necessitas）和iOS的端口上运行。如今咱们为你提供了免费的试用版。工具

下载Qt6最新试用版动画

Qt组件推荐：ui

QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
QtitanChart | 下载试用 :是一个C ++库，表明一组控件，这些控件使您能够快速地为应用程序提供漂亮而丰富的图表。而且支持全部主要的桌面

建立应用程序屏幕url

第一步是在您的应用程序中建立基本的QML项。操作系统

首先，咱们使用如下主屏幕建立咱们的Same Game应用程序：.net

这是由主应用程序文件定义的samegame.qml，以下所示：code

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?"
        }
    }
}

这为您提供了一个基本的游戏窗口，其中包括块的主画布，“新游戏”按钮和得分显示。教程

您在这里可能不认识的一项是SystemPalette项。这提供了对Qt系统选项板的访问，并用于使按钮具备更原始的外观。游戏

请注意为锚Item，Button和Text类型是使用组（点）表示法为可读性设置。

添加Button和Block组件

上面代码中的Button项定义在一个单独的组件文件中，名为Button.qml。为了建立一个功能按钮，咱们在一个矩形内使用QML类型Text和MouseArea。下面是Button.qml的代码。

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) }
    antialiasing: 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
    }
}

这本质上是定义了一个包含文本并能够被点击的矩形。MouseArea有一个onClicked()处理程序，实现了当该区域被点击时发出容器的clicked()信号。

在同一游戏中，当游戏开始时，屏幕上充满了小块。每一个块只是一个包含图像的项目。区块代码在单独的Block.qml文件中定义。

import QtQuick 2.0

Item {
    id: block

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

目前，块并无作任何事情，它只是一个图像。随着本教程的进展，咱们将为图块添加动画和行为。咱们尚未添加任何代码来建立块，咱们将在下一章中进行。

咱们已经使用anchors.fill: parent将图像设置为其父项的大小。这意味着，当咱们在教程的后面动态建立和调整块项的大小时，图像将自动调整为正确的大小。

注意Image类型的源属性的相对路径。这个路径是相对于包含Image类型的文件的位置而言的。另外，您也能够将Image源设置为绝对文件路径或包含图像的URL。

到目前为止，你应该已经熟悉了这些代码。咱们刚刚建立了一些基本类型来开始。接下来，咱们将在游戏画布中填充一些块。