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

QML高级教程1-创建游戏画布和块

Qt是一个跨平台框架，通常用作图形工具包，它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式设备，Android（Necessitas）和iOS的端口上运行。现在我们为你提供了免费的试用版。

下载Qt6最新试用版

Qt组件推荐：

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

创建应用程序屏幕

第一步是在您的应用程序中创建基本的QML项。

首先，我们使用以下主屏幕创建我们的Same Game应用程序：

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

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。

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

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

猜你喜欢