Tutoriel QML Advanced 1 - Créer le canevas et les blocs du jeu

Création de l'écran de l'application

La première étape consiste à créer les éléments QML de base dans votre application.

Pour commencer, nous créons notre application Same Game avec un écran principal comme celui-ci :

Celui-ci est défini par le fichier principal de l'application, samegame.qml, qui ressemble à ceci :

import QtQuick

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

Vous obtenez ainsi une fenêtre de jeu de base qui comprend le canevas principal pour les blocs, un bouton "Nouvelle partie" et un affichage du score.

Un élément que vous ne reconnaîtrez peut-être pas ici est l'élément SystemPalette. Il permet d'accéder à la palette système de Qt et est utilisé pour donner au bouton un aspect plus natif.

Remarquez que les ancres des types Item, Button et Text sont définies à l'aide de la notation de groupe (point) pour plus de lisibilité.

Ajout des composants Button et Block

L'élément Button dans le code ci-dessus est défini dans un fichier de composant distinct appelé Button.qml. Pour créer un bouton fonctionnel, nous utilisons les types QML Text et MouseArea à l'intérieur d'un fichier Rectangle. Voici le code Button.qml:

import QtQuick

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

Il définit essentiellement un rectangle qui contient du texte et peut être cliqué. Le MouseArea possède un gestionnaire onClicked() qui est mis en œuvre pour émettre le signal clicked() du container lorsque la zone est cliquée.

Dans Same Game, l'écran est rempli de petits blocs lorsque le jeu commence. Chaque bloc est simplement un élément qui contient une image. Le code du bloc est défini dans un fichier Block.qml séparé :

import QtQuick

Item {
    id: block

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

Pour l'instant, le bloc ne fait rien ; il s'agit simplement d'une image. Au fur et à mesure de la progression du tutoriel, nous animerons les blocs et leur donnerons des comportements. Nous n'avons pas encore ajouté de code pour créer les blocs ; nous le ferons dans le prochain chapitre.

Nous avons donné à l'image la taille de son élément parent à l'aide de anchors.fill: parent. Cela signifie que lorsque nous créerons et redimensionnerons dynamiquement les blocs plus tard dans le tutoriel, l'image sera automatiquement redimensionnée à la bonne taille.

Remarquez le chemin relatif pour la propriété source du type Image. Ce chemin est relatif à l'emplacement du fichier qui contient le type Image. Vous pouvez également définir la source Image sur un chemin de fichier absolu ou une URL contenant une image.

Le code devrait vous être familier jusqu'à présent. Nous venons de créer quelques types de base pour commencer. Ensuite, nous allons remplir le canevas du jeu avec quelques blocs.

Exemple de projet @ code.qt.io