Ma première application Android avec Qt : partie 2

Comme je l'ai dit précédemment : ne nous précipitons pas. Souvent, on se lance dans le développement d'un jeu et c'est à la fin que l'on se pose ces questions toutes bêtes : « ah oui, comment implémenter l'écran de démarrage, le menu, etc. ? »

Dans le développement mobile, la question se pose sur la taille de l'écran : en effet, votre jeu pourra autant être joué sur une tablette 9 pouces qu'un smartphone d'à peine 5 pouces, mais pour autant l'expérience et le « gameplay » devront rester les mêmes.

Par exemple, notre jeu en mode portrait sur une tablette donnée aurait des pluies de trois ou quatre ennemis, occupant toute la largeur de l'écran. Si le joueur utilise une grande tablette, les mêmes ennemis, chacun ayant à la même taille en pixels, n'occuperait plus que le tiers de l'écran. La situation serait pire pour un smartphone, qui, avec un écran plus étroit encore, n'afficherait qu'un ou deux ennemis…

Vous comprenez mieux le souci : il faudrait penser le code du jeu en fonction de plusieurs tailles d'écran. Notre approche permet d'imaginer le jeu pour une résolution donnée et le code adaptera les dimensions des différents éléments (ennemis, nuage, score…) à l'écran en respectant les proportions.

Pour cela, nous utiliserons le principe suivant dans cet article et cette application : nous partirons d'une résolution de base (720 × 960) et nous adapterons/convertirons toutes les dimensions des éléments à l'écran.

Pour Qt Creator, un préfixe est en quelque sorte un répertoire virtuel permettant de mieux organiser vos fichiers dans l'arborescence du projet. J'ai bien dit « virtuel », car l'emplacement réel de vos fichiers peut être différent de leur emplacement virtuel. Cela permet également une indépendance de l'implémentation physique (qui peut varier entre un smartphone Android, un ordinateur sous Windows ou macOS…)

J'ai pris ici l'initiative ici d'ajouter ces « préfixes » pour mieux ordonner notre projet.

Voici la liste des préfixes créés pour notre projet :

• « images » qui contiendra les images du jeu ;
• « js » qui contiendra les fichiers JavaScript ;
• « pages » qui contiendra les fichiers QML des pages ;
• « items » qui contiendra les fichiers QML des éléments du jeu (ennemis, effets spéciaux…).

Éditez le fichier main.qml comme suit :

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import "/js/Game.js" as Game
Window {
    id: main
    visible: true
    color: "#224422"
    property var oGame
    contentOrientation :Qt.PortraitOrientation
    
    function initApplication(){
        this.oGame=Game;
        //oGame.start(Screen.width,Screen.height);
        this.oGame.start(300,750);
    }
    Component.onCompleted: initApplication()
}

Ce code recèle plusieurs choses intéressantes :

• l'identifiant « main » et sa propriété « oGame » ;
• l'appel à l'initialisation de l'application ;
• la possibilité de lancer le jeu en forçant la résolution.

La propriété oGame, qu'il faut bien garder en tête permettra d'utiliser les méthodes du moteur de jeu.

Enfin, vous voyez que, en fin de chargement du composant, on appelle une méthode initApplication permettant d'initialiser la taille réelle de l'écran.

Vous noterez que j'ai volontairement mis en commentaire l'appel de la méthode start avec les « vraies » valeurs de l'écran : ici, on force à 300 × 750 pour bien vérifier que l'adaptation de la résolution du jeu fonctionne bien.

Comme vu dans le précédent article, pour ajouter des fichiers au projet (ici, le code source du jeu), effectuez un clic droit sur « Ressources » pour ajouter un fichier JavaScript Game.js. Ensuite, copiez-y ce code :

//dimensions réelles de l'écran
var _width;
var _height;
//dimensions de base de notre jeu
var _virtualWidth=720;
var _virtualHeight=960;
//ratio permettant d'adapter à la résolution de l'écran
var _iRatio;
function getWidth(){
    return _width;
}
function getHeight(){
    return _height;
}
//fonction de démarrage du jeu
function start(width_,height_){
    if(width_> height_){
        _width=height_*(_virtualWidth/_virtualHeight);
    }else{
        _width=width_;
    }
    _height=_width*(_virtualHeight/_virtualWidth);
    _iRatio=_width/_virtualWidth;
    main.width=_width;
    main.height=_height;
    
}
//convertit une dimension à la taille de l'écran
function convert(size_){
    return size_*_iRatio;
}

Pour avoir un jeu qui s'adaptera à toutes les résolutions sans pour autant modifier le « gameplay », nous avons besoin de connaître la différence de ratio entre notre résolution de base (720 x 960) et celle réelle de l'écran de l'utilisateur.

Ainsi on évite d'avoir trois ennemis sur un smartphone et 14 sur une tablette 10 pouces.

Initialisées via la méthode start, ces propriétés permettent de calculer un ratio, utilisé dans la méthode convert pour adapter les dimensions des éléments à l'écran.

Créons maintenant nos pages, qui correspondent à chacune des étapes du joueur, depuis le lancement de l'application jusqu'à l'écran des scores.

Il faut créer un fichier QML pour chacune de nos pages :

• la page de démarrage « splashscreen » ;
• la page de menu du jeu « menu » ;
• la scène, qui contiendra les éléments de jeu « scene » ;
• enfin, la page de fin de jeu « gameOver ».

Ces pages utiliseront des images, que vous pouvez ajouter au projet.

Pour cela, cliquez droit sur l'élément ressources, sélectionnez « Ajouter des éléments existants » et choisissez les images à ajouter au projet.

Notre première étape est de coder les différentes pages du jeu, tout d'abord sans interaction entre elles.

Éditez votre fichier /pages/Splashcreen.qml, qui est la page de démarrage du jeu. Elle contient votre logo d'éditeur d'applications et disparaît au profit de la page « Menu » au bout d'un certain temps.

import QtQuick 2.0
Rectangle{
    visible:true
    color:'#d95e22'
    width:main.oGame.getWidth()
    height:main.oGame.getHeight()
        Image{
            width:main.oGame.convert(237)
            height:main.oGame.convert(105)
            source:"/images/pageLogoMobileDupot.jpg"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            smooth: true
        }
        Timer {
            id:timerSplashscreen
            interval: 4000;
            running: true
            repeat: false
            onTriggered: main.oGame.gotoMenu();
        }
}

Passons au menu maintenant, appelé automatiquement après le « Splashscreen ».

Éditez le fichier pour créer notre menu de démarrage /pages/Menu.qml.

import QtQuick 2.0
import QtQuick.Controls 1.5
Rectangle {
    visible:true
    color: "#1868b2"
    width:main.oGame.getWidth()
    height:main.oGame.getHeight()
    Image{
        source:"/images/pageStartGame.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width:main.oGame.convert(400)
        height:main.oGame.convert(650)
        Button {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            width: main.oGame.convert(291)
            height: main.oGame.convert(33)
            text: qsTr("Jouer!")
            onClicked:main.oGame.gotoScene()
        }
    }
}

Le bouton permet d'aller sur la « Scene », éditez le fichier /pages/Scene.qml.

import QtQuick 2.0
import QtQuick.Controls 1.5
Rectangle{
    visible:true
    color:'#1868b2'
    width:main.oGame.getWidth()
    height:main.oGame.getHeight()
    Button {
        width: main.oGame.convert(291)
        height: main.oGame.convert(33)
        text: qsTr("go gameover!")
        onClicked:main.oGame.gotoGameover()
    }
}

Pour le moment, cette page contient un simple bouton permettant de vérifier le bon fonctionnement de la navigation en lançant la page de fin de jeu.

Éditez le fichier /pages/GameOver.qml.

import QtQuick 2.0
import QtQuick.Controls 1.5
Rectangle {
    visible:true
    color: "#465973"
    width:main.oGame.getWidth()
    height:main.oGame.getHeight()
    Image{
        source:"/images/pageGameOver.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width:main.oGame.convert(400)
        height:main.oGame.convert(650)
        Button {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            width: main.oGame.convert(291)
            height: main.oGame.convert(33)
            text: qsTr("Re-jouer!")
            onClicked:main.oGame.gotoScene()
        }
        Button {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: 50
            width: main.oGame.convert(291)
            height: main.oGame.convert(33)
            text: qsTr("Retour au menu")
            onClicked:main.oGame.gotoMenu()
        }
    }
}

Une fois nos pages codées, il est temps d'écrire la partie qui permet de passer de l'une à l'autre.

Éditez le fichier main.qml pour ajouter l'objet StackView et les deux méthodes permettant d'afficher/fermer une page.

//le composant qui nous permettra de naviguer dans le jeu
    StackView {
        id: stack
        width: parent.width
        height:parent.height
    }
    function popPage(){
        stack.pop();
    }
    function launchPage(sView){
        return stack.push('qrc:/pages/'+sView+'.qml');
    }

Vous voyez ici les fonctions pour afficher une page (launchPage) et pour la fermer (popPage).

Ensuite, éditez le fichier Game.js pour faire le lien entre le composant QML et le code JavaScript en ajoutant les méthodes permettant d'afficher ces pages.

var _oPageScene;
//fonctions de navigation
function gotoSplashscreen(){
    main.launchPage('Splashscreen');
}
function gotoMenu(){
    main.launchPage('Menu');
}
function gotoScene(){
    _oPageScene=main.launchPage('Scene');
}
function gotoGameover(){
    main.launchPage('GameOver');
}

Comme vous le voyez, on peut facilement faire le lien entre les deux éléments : ici, à partir du code JavaScript, on appelle la méthode launchPage déclarée dans le composant QML main.qml.

Nous en profitons pour ajouter l'appel à cette page splashscreen dès la fonction start de notre fichier JavaScript ainsi :

//fonction de démarrage du jeu
function start(width_,height_){
    if(width_> height_){
        _width=height_*(_virtualWidth/_virtualHeight);
    }else{
        _width=width_;
    }
    _height=_width*(_virtualHeight/_virtualWidth);
    _iRatio=_width/_virtualWidth;
    main.width=_width;
    main.height=_height;
    //appel à la page splashscreen
    gotoSplashscreen();
}

Comme nous l'avons vu précédemment, nous allons utiliser ici un « Repeater » couplé à un « ListModel » : le modèle contiendra les ennemis affichés à l'écran, tandis que le composant « Repeater » se chargera de les afficher.

Modifiez votre fichier main.qml pour ajouter votre liste d'ennemis.

ListModel{
        id:modelEnemies
    }

Il est vide ! Nous l'alimenterons plus loin dans le fichier JavaScript.

Passons à notre pluie d'ennemis : créez un fichier items/Enemy.qml et écrivez-y :

import QtQuick 2.0
Repeater{
    model:modelEnemies
    Rectangle{
        width:main.oGame.convert(100)
        height:main.oGame.convert(100)
        color:"#770000"
        x:model.x
        y:model.y
        PropertyAnimation on y {
            to:main.oGame.getHeight()
            duration: 5000
            onStopped: die();
        }
    }
    function die(){
        modelEnemies.remove(model.index);
    }
}

Quelques explications : premièrement, vous voyez un composant « Repeater » (vu plus haut) connecté à notre « ListModel » modelEnemies. Ce « Repeater » contient un rectangle rouge dont les coordonnées sont des propriétés de « model ».

En effet, chaque « répétition » de notre rectangle utilisera comme cordonnées les propriétés fournies dans le modèle des ennemis.

Ensuite, on voit un composant « PropertyAnimation », qui permet d'ajouter une animation sur ce rectangle : on lui indique ainsi de modifier l'ordonnée de notre élément jusqu'à la hauteur de l'écran pour donner l'impression de chute.

Nous indiquons que, à la fin de cette animation, il faut appeler la méthode die() (pour supprimer cet ennemi).

Il nous faut ajouter ce composant « Enemy » sur notre scène. Éditez le fichier /pages/Scene.qml pour y ajouter ce composant fraîchement écrit.

Vous devez simplement ajouter le nom du composant, comme si c'était un composant natif ; ici, pour Enemy.qml, il suffira d'ajouter :

Enemy{}

Voici à quoi ressemble votre page avec ces deux ajouts (imports et Enemy) :

import QtQuick 2.0
import QtQuick.Controls 1.5
import "qrc:/items/"
Rectangle{
    visible:true
    color:'#1868b2'
    width:main.oGame.getWidth()
    height:main.oGame.getHeight()
    Button {
        width: main.oGame.convert(291)
        height: main.oGame.convert(33)
        text: qsTr("go gameover!")
        onClicked:main.oGame.gotoGameover()
    }
    Enemy{}
}

Maintenant, retournons à notre fichier JavaScript pour écrire le code permettant d'ajouter des ennemis.

Éditez /js/Games.js pour ajouter la fonction addEnemy, qui permettra d'ajouter des ennemis à l'écran en ajoutant un élément au modèle.

function addEnemy(){
    modelEnemies.append({"x":convert(20),"y":0});
}

Si vous ajoutez un bouton sur notre scène appelant cette fonction, vous pourrez tester que, en appuyant dessus, un nouvel ennemi apparaîtra et tombera.

Vous pouvez le faire en ajoutant le code suivant sur le fichier /pages/Scene.qml :

Button {
        y:main.oGame.convert(200)
        width: main.oGame.convert(291)
        height: main.oGame.convert(33)
        text: qsTr("ajouter enemie")
        onClicked:main.oGame.addEnemy()
    }

Ce qui nous intéresse, c'est de voir régulièrement un ennemi s'ajouter à l'écran. Pour cela, nous allons utiliser le composant « Timer ».

Il vous faut modifier ce même fichier de scène pour y ajouter ce « Timer » via le code :

Timer {
        id:timerEnemy
        interval: 1000;
        running: true
        repeat: true
        onTriggered: main.oGame.addEnemy();
    }

Détaillons un peu ce code :

• « id » : l'identifiant qui permettra d'arrêter ce « Timer » en cas de fin de jeu ;
• « interval » : l'intervalle entre chaque itération ;
• « running » : indique si le « Timer » est actif ;
• « onTriggered » : le code à appeler à chaque fois ; ici, notre fonction d'ajout d'ennemi.

Commençons par le score. Ajoutons un nouveau composant /items/Score.qml avec le code suivant :

import QtQuick 2.0
Item{
    anchors.right: parent.right
    Text{
        id:"txt"
        text:'000000'
        anchors.right: parent.right
        font.pixelSize: main.oGame.convert( 30)
        font.bold: true
        color:"white"
    }
    function setText(sText_){
        sText_='0000000'+sText_;
        txt.text=sText_.substr(-6);
    }
}

Deux choses ici :

• un composant « Text » qui permet d'afficher le score aligné à droite ;
• une fonction « setText » qui permet de mettre à jour ce score en conservant les « 0 ».

Comme nous l'avons fait précédemment pour le composant « Enemy » en incluant le nom du composant fraîchement développé, on fait de même pour le score. Ajoutons le code suivant dans notre page /pages/Scene.qml :

Score{
        id:"oScore"
    }

Puis, afin de mettre à jour le texte du score, ajoutons une fonction :

function setScore(sText_){
        oScore.setText(sText_);
    }

Dans un premier temps, il faut ajouter une variable qui contiendra ce score, puis une méthode pour le mettre à jour à l'écran.

Ajoutez une propriété du score à votre fichier JavaScript /js/Game.js :

var _iScore=0;

Puis la méthode pour le mettre à jour :

function scoreUp(){
    _iScore++;
    _oPageScene.setScore(_iScore);
}

La fonction permet ici d'incrémenter notre score puis de le mettre à jour à l'écran.

La démarche reste la même que pour le score, à la différence que, pour nos vies, nous n'afficherons pas dans un champ texte, mais plutôt une succession d'éléments (des cœurs ou toute icône de votre choix…).

Comme pour le score, commençons par créer un composant /items/Lifes.qmlpour afficher nos vies restantes :

import QtQuick 2.0
Repeater{
    model:4
    delegate: Rectangle {
        visible:true
        width: main.oGame.convert(80)
        height: main.oGame.convert(80)
        color:"#ff0000"
        x:main.oGame.convert(80+5)*model.index
        y:0
    }
    function setLifes(nb_){
        model=nb_;
    }
}

Ici, vous voyez une autre utilisation du composant « Repeater » : on indexe cette fois la répétition de rectangle à un simple nombre (un modèle comme un autre, dans le cas où chaque élément n'a pas plus de données qu'un nombre) et l'on permet via la fonction setLifes de changer le nombre de répétitions.

Même chose que pour le score, en ajoutant cette fois le code suivant à votre page de scène :

Lifes{
        id:"oLife"
    }

Et la fonction associée :

function setLifes(iNb_){
        oLife.setLifes(iNb_);
    }

Ajoutez comme pour le score, une variable contenant le nombre de vies à votre fichier JavaScript /js/Game.js :

var _iLife=4;

Et la fonction associée :

function lifeDown(){
    _iLife--;
    _oPageScene.setLifes(_iLife);
    if(_iLife < 0){
        _oPageScene.stopTimer();
        modelEnemies.clear();
        _xEnemy=0;
        _iLife=4;
        _iScore=0;
        _oPageScene.setLifes(_iLife);
        gotoGameover();
    }
}

On profite pour vérifier le nombre de vies restantes et ainsi renvoyer à la page de fin de jeu lorsque le joueur n'a plus de vie.

Vous lisez également que l'on réinitialise les variables du jeu afin de préparer la prochaine partie (quatre vies, un score à zéro…).

Vous noterez l'appel pour stopper le « Timer » que vous pouvez ajouter ainsi dans votre fichier /pages/Scene.qml :

function stopTimer(){
        timerEnemy.stop();
    }