Tutoriel avancé sur QML 1 - Création du canevas du jeu et des blocs

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

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

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

Celle-ci est définie par le fichier principal de l'application, samegame.qml, qui se présente comme suit :

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 comprenant le canevas principal pour les blocs, un bouton « New Game » et un affichage du score.

Un élément que vous ne reconnaissez peut-être pas ici est l’élément ` SystemPalette `. Celui-ci donne accès à la palette système de Qt et sert à conférer au bouton un aspect et une ergonomie plus « natifs ».

Notez que les ancrages des types ` Item`, ` Button ` et ` Text ` sont définis à l’aide de la notation par points (groupe) pour plus de lisibilité.

Ajout des composants « Button » et « Block »

L’élément Button du code ci-dessus est défini dans un fichier de composant distinct nommé Button.qml. Pour créer un bouton fonctionnel, nous utilisons les types QML Text et MouseArea à l’intérieur d’un Rectangle. Voici le code de l’ 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
    }
}

Cela définit essentiellement un rectangle contenant du texte et sur lequel on peut cliquer. L’ MouseArea dispose d’un gestionnaire onClicked() qui est implémenté pour émettre le signal clicked() de l’ container lorsque l’on clique sur la zone.

Dans Same Game, l’écran est rempli de petits blocs lorsque le jeu commence. Chaque bloc est simplement un élément contenant une image. Le code du bloc est défini dans un fichier « Block.qml » distinct :

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 du tutoriel, nous allons animer les blocs et leur attribuer des comportements. Nous n’avons pas encore ajouté de code pour créer les blocs ; nous le ferons dans le chapitre suivant.

Nous avons défini la taille de l’image pour qu’elle corresponde à celle de son élément parent à l’aide de la propriété ` anchors.fill: parent`. Cela signifie que lorsque nous créerons et redimensionnerons dynamiquement les éléments de bloc plus tard dans le tutoriel, l’image sera automatiquement mise à l’échelle à la taille appropriée.

Notez le chemin relatif de la propriété ` source ` du type `Image`. Ce chemin est relatif à l’emplacement du fichier contenant le type ` Image `. Vous pouvez également définir la source de l’image en utilisant un chemin de fichier absolu ou une URL pointant vers une image.

Vous devriez désormais être familiarisé avec le code présenté 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 sur code.qt.io