Tutoriel QML avancé, deuxième partie - peupler le canevas du jeu

Fichiers :

• declarative/tutorials/samegame/samegame2/Block.qml ;
• declarative/tutorials/samegame/samegame2/Button.qml ;
• declarative/tutorials/samegame/samegame2/samegame.js ;
• declarative/tutorials/samegame/samegame2/samegame.qml.

Génération des blocs en JavaScript

Maintenant que l'on a écrit les éléments basiques, on commence l'écriture proprement dite du jeu.

La première tâche est de générer les blocs. Chaque fois que le bouton New Game est appuyé, le canevas du jeu est peuplé avec un nouvel ensemble, aléatoire, de blocs. Comme on doit générer dynamiquement ces blocs pour chaque nouvelle partie, on ne peut pas utiliser Repeater afin de définir les blocs. À la place, on va créer les blocs en JavaScript.

Voici le code JavaScript pour générer les blocs, contenu dans un nouveau fichier, samegame.js. Le code est expliqué en dessous.

 var blockSize = 40;
 var maxColumn = 10;
 var maxRow = 15;
 var maxIndex = maxColumn * maxRow;
 var board = new Array(maxIndex);
 var component;
 
 // Fonction index utilisée à la place d'un tableau 2D
 function index(column, row) {
     return column + (row * maxColumn);
 }
 
 function startNewGame() {
     // Supprime les blocs de l'ancienne partie
     for (var i = 0; i < maxIndex; i++) {
         if (board[i] != null)
             board[i].destroy();
     }
 
     // Calcule la taille de la zone de jeu
     maxColumn = Math.floor(background.width / blockSize);
     maxRow = Math.floor(background.height / blockSize);
     maxIndex = maxRow * maxColumn;
 
     // Initialise la zone de jeu
     board = new Array(maxIndex);
     for (var column = 0; column < maxColumn; column++) {
         for (var row = 0; row < maxRow; row++) {
             board[index(column, row)] = null;
             createBlock(column, row);
         }
     }
 }
 
 function createBlock(column, row) {
     if (component == null)
         component = Qt.createComponent("Block.qml");
 
     // Notez que, si le fichier Block.qml n'était pas un fichier local, component.status aurait été
     // chargé et on aurait dû attendre le signal statusChanged() du composant afin
     // de savoir quand le fichier aurait été téléchargé et prêt, avant d'appeler createObject().
     if (component.status == Component.Ready) {
         var dynamicObject = component.createObject(background);
         if (dynamicObject == null) {
             console.log("error creating block");
             console.log(component.errorString());
             return false;
         }
         dynamicObject.x = column * blockSize;
         dynamicObject.y = row * blockSize;
         dynamicObject.width = blockSize;
         dynamicObject.height = blockSize;
         board[index(column, row)] = dynamicObject;
     } else {
         console.log("error loading block component");
         console.log(component.errorString());
         return false;
     }
     return true;
 }

La fonction startNewGame() supprime les blocs créés durant la partie précédente et calcule le nombre de lignes et colonnes requises pour remplir la fenêtre de jeu. Ensuite, elle crée un tableau pour contenir tous les blocs et appelle la fonction createBlock() pour créer assez de blocs pour remplir la fenêtre de jeu.

La fonction createBlock() crée un bloc à partir du fichier Block.qml et déplace le nouveau bloc à sa position dans le canevas du jeu. Cela se déroule en plusieurs étapes :

• Qt.createComponent() est appelée pour générer un élément à partir de Block.qml. Si le composant est prêt, on peut appeler createObject() pour créer une instance de l'élément Block ;
• si createObject() retourne null (c'est-à-dire s'il y a eu une erreur lors du chargement de l'objet), on affiche les informations de l'erreur ;
• on place le bloc à sa position dans le jeu et définit sa largeur et hauteur ; de plus, le bloc est conservé dans le tableau des blocs pour référence future ;
• finalement, on affiche les informations de l'erreur sur la console si le composant n'a pas pu être chargé (par exemple, si le fichier est manquant).

Connecter les composants JavaScript au QML

Maintenant, nous devons appeler le code JavaScript du fichier samegame.js à partir des fichiers QML. Pour ce faire, on ajoute cette ligne dans samegame.qml, pour l'importation du fichier JavaScript comme module :

 import "samegame.js" as SameGame

Cela permet de référencer n'importe quelle fonction du fichier samegame.js en utilisant le préfixe « SameGame » ; par exemple, SameGame.startNewGame() ou SameGame.createBlock(). Cela signifie que l'on peut connecter le gestionnaire de signal onClicked du bouton New Game à la fonction startNewGame(), comme ceci :

         Button {
             anchors { left: parent.left; verticalCenter: parent.verticalCenter }
             text: "New Game"
             onClicked: SameGame.startNewGame()
         }

Donc, lorsque l'on clique sur le bouton New Game, la fonction startNewGame() est appelée et génère un champ de blocs, comme ceci :

Maintenant, on a un écran rempli de blocs et on peut commencer à ajouter les mécaniques du jeu.

[ Précédent : tutoriel QML avancé, première partie - créer le canevas du jeu et les blocs ] [ Suivant : tutoriel QML avancé, troisième partie - implémenter la logique du jeu ]

Remerciements

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