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。

到目前爲止，你應該已經熟悉了這些代碼。咱們剛剛建立了一些基本類型來開始。接下來，咱們將在遊戲畫布中填充一些塊。