Tutoriel QML avancé, première partie - créer le canevas du jeu et les blocs

Fichiers :

• declarative/tutorials/samegame/samegame1/Block.qml ;
• declarative/tutorials/samegame/samegame1/Button.qml ;
• declarative/tutorials/samegame/samegame1/samegame.qml.

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

La première étape est de créer les éléments QML de base pour l'application.

Pour commencer, on crée une application Same Game avec un écran principal :

Il est défini par le fichier principal, samegame.qml :

 import QtQuick 1.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?"
         }
     }
 }

Cela donne une fenêtre basique de jeu, qui inclut le canevas principal pour les blocs, un bouton « New Game » (nouvelle partie) et un affichage pour le score.

Un élément que vous pouvez ne pas reconnaître ici, le SystemPalette : il fournit un accès au système de palettes de Qt et est utilisé pour donner au bouton un rendu plus natif.

Les ancres pour les éléments Item, Button et Text sont définies en utilisant la notation de groupe pour des questions de lisibilité.

Ajout des composants ''Button'' et ''Block''

L'élément Button dans le code ci-dessus est défini dans un fichier séparé, nommé Button.qml. Pour créer un bouton fonctionnel, on utilise les éléments QML Text et MouseArea à l'intérieur d'un Rectangle. Voici le code de Button.qml :

 import QtQuick 1.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) }
     smooth: true
     radius: 8
 
     // on colore le bouton avec un dégradé
     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 un rectangle contenant du texte et qui peut être cliqué. La MouseArea possède un gestionnaire onClicked(), implémenté pour émettre le signal clicked() à partir du conteneur container lorsque la zone est cliquée.

Dans le jeu Same Game, l'écran est rempli de petits blocs lorsqu'une partie démarre. Chaque bloc n'est qu'un élément contenant une image, le code étant défini dans le fichier Block.qml :

 import QtQuick 1.0
 
 Item {
     id: block
 
     Image {
         id: img
         anchors.fill: parent
         source: "../shared/pics/redStone.png"
     }
 }

Pour l'instant, le bloc ne fait rien, c'est juste une image. Dans la suite du tutoriel, on va animer et donner un comportement aux blocs. On n'a pas encore ajouté le code pour créer les blocs, on le fera dans le prochain chapitre.

On a défini la taille de l'image à la taille de l'élément parent en utilisant les ancres anchors.fill: parent. Cela signifie que, lorsque l'on crée dynamiquement les blocs et qu'on les redimensionne, l'image sera redimensionnée automatiquement à la taille adéquate.

Notez le chemin relatif pour la propriété source de l'élément Image. Ce chemin est relatif à l'emplacement du fichier qui contient l'élément Image. Alternativement, on peut définir la source de l'image avec un chemin absolu ou en utilisant une URL qui contient l'image.

Vous devriez être familier avec le code jusque-là. On a juste créé quelques éléments basiques. Prochainement, on va peupler le canevas de jeu avec des blocs.

[ Précédent : tutoriel QML avancé ] [ Suivant : tutoriel QML avancé, deuxième partie - peupler le canevas de jeu ]

Remerciements

Merci à Alexandre Laurent pour la traduction ainsi qu'à Thibaut Cuvelier, Jonathan Courtois et Claude Leloup pour leur relecture !