Qu'est-ce que la boucle de jeu?

Boucle de jeu, coeur de tout jeu-vidéo

Une boucle de jeu est un petit programme qui implémente trois fonctions essentielles à l'exécution d'un jeu vidéo: une fonction d'initialisation, une fonction de mise à jour, et une fonction de dessin.

Dans le cadre des explications nous prendrons pour exemple les éléments du jeu Pong.

Initialisation

La fonction d'initialisation est appelée au lancement du jeu, cette fonction n'est exécutée qu'une seule fois. Elle permet d'initialiser les différentes données du jeu: les positions initiales des raquettes des deux joueurs, la position initiale de la balle qu'ils vont s'échanger, et les scores, ainsi que leur position à l'écran.

Mise à jour

La fonction de mise à jour contrôle l'état des événements système et mets à jour les différents éléments du jeu.
Certains éléments seront mis à jour automatiquement sans événement du clavier, c'est le cas par exemple de la balle qui est sans cesse en mouvement.
Au contraire certains éléments nécessiterons que l'utilisateur effectue une action pour qu'ils soient mis à jour, c'est le cas de la raquette dont la position ne sera modifié que si le joueur appuies sur les touches flêche haute ou flêche basse.

Dessin

La fonction de dessin comme son nom l'indique, dessine en permanence les différents éléments du jeu à leurs états actuels:

elle dessine des rectangles blancs aux positions respectives des raquettes pour les représenter
elle dessine un disque blanc pour représenter la balle à sa position
elle dessine les scores au format texte en haut de l'écran.

La fonction de dessin ne doit jamais modifier aucune données du jeu.
Elle peut éventuellement intégrer des conditions, comme par exemple ne pas afficher les scores avant le premier lancement de la balle, mais jamais modifier une donnée, toute modification de donnée doit être effectuée dans la fonction de mise à jour.

En quoi est-ce une boucle?

La raison pour laquelle cela est une boucle de jeu est que les deux fonctions de mise à jour et de dessin sont appelés en boucle, perpétuellement jusqu'à la fermeture du jeu.
Voici la représentation de base du process d'exécution de ces trois fonctions:

Installation du kit de démarrage

Même s'il est possible d'implémenter par nous-même cette boucle de jeu, comme nous le verrons plus tard, nous commencerons avec le kit de démarrage de Game-Dev.Ninja.
Ce kit de démarrage comprends différentes choses:

L'exécution de la boucle de jeu de base.
Des fonctions utiles dans les jeux vidéos comme la fonction distance codée lors de la vidéo précédente.
Un exemple de base d'utilisation de la boucle de jeu.

Pour télécharger le kit de démarrage, rendez vous sur la page https://github.com/GameDev-Ninja/starter-kit, cliquez sur le bouton "Code" et ensuite "Download ZIP".

Une fois l'archive téléchargée, vous pouvez l'extraire n'importe où sur votre ordinateur.
Dans le dossier créé par l'extraction de l'archive, vous y trouverez un certain nombre de fichiers nécessaire au bon fonctionnement du kit. Nous nous concentrerons uniquement sur les fichiers index.html et script.js.

Vous pouvez d'ores et déjà ouvrir le fichier index.html avec votre navigateur, et ainsi visualiser votre première boucle de jeu fonctionnelle: en haut à droite de l'écran de jeu sont affichés les FPS, ce qui représente le nombre de fois que les fonctions de mise à jour et de dessin sont appelés par seconde!.
Vous pouvez directement visualiser cette démo ci-dessous:

Squelette du fichier `script.js`

En ouvrant le dossier avec votre éditeur de code, vous pouvez vous rendre sur le fichier script.js, ce fichier comprends le squelette de votre jeu, avec les trois fonctions qui seront appelées automatiquement par la boucle de jeu:

LoadGame qui est la fonction d'initialisation
UpdateGame qui est la fonction de mise à jour
DrawGame qui est la fonction de dessin

/**
 * Exécutée une seule fois, au chargement
 */
function LoadGame(canvas, context) {

}

/**
 * Exécutée perpétuellement pour mettre à jour les données
 */
function UpdateGame(deltaTime) {

}

/**
 * Exécutée perpétuellement pour dessiner la frame actuelle
 */
function DrawGame(context) {

}

Gestion du clavier

En haut de ce fichier se trouve quelques lignes de script qui permettent le chargement et le positionnement du logo, nous nous intéresseront de plus près à cette variable:

let logo = {
    image: new Image(),
    x: 0,
    y: 0
}

Cette variable, de type objet contient le fichier image du logo Game-Dev.Ninja, sa position horizontal x et sa position verticale y.

Nous reviendrons plus tard sur comment afficher charger et dessiner une image car ce n'est pas un pré-requis pour le jeu Pong qui n'en a pas, mais sachez que cette variable est utilisée dans la fonction DrawGame pour dessiner à l'écran le logo à sa position actuelle:

context.drawImage(logo.image, 0, 0, logo.image.naturalWidth, logo.image.naturalHeight, logo.x, logo.y, logo.image.naturalWidth, logo.image.naturalHeight)

Ainsi si nous souhaitons modifier la position du logo à l'écran, il nous suffis de modifier logo.x et logo.y dans UpdateGame, pour que la fonction DrawGame le dessine à sa nouvelle position.

Le kit de démarrage intègre une fonction isKeyDown, qui prends en paramètre le nom d'une touche clavier à vérifier et retourne un booléen true ou false si cette touche est enfoncée. A l'aide de cette fonction, nous pouvons donc regarder si la touche ayant pour nom ArrowLeft est enfoncée lors de la mise à jour, si tel est le cas, nous modifions la coordonnées x de notre logo:

function UpdateGame(deltaTime) {
    if (isKeyDown('ArrowLeft')) { // Si Flĉhe Gauche est enfoncé
        logo.x = logo.x - 1 // On retire 1 pixel à la position horizontale
    }
}

Une fois codé, vous pouvez recharger la page index.html dans votre navigateur, et visualiser comme dans la démo ci-dessous qu'il est désormais possible de déplacer le logo vers la gauche en pressant la touche Flèche Gauche de votre clavier.

Une fois que nous avons codé la fonction de déplacement vers la gauche, il nous suffis de reproduire ce bout de code pour les 4 flèches de notre clavier, en modifiant en positif ou négatif les coordonnées x et y de notre logo:

function UpdateGame(deltaTime) {
    if (isKeyDown('ArrowLeft')) { // Si Flĉhe Gauche est enfoncé
        logo.x = logo.x - 1 // On retire 1 pixel à la position horizontale
    }
    if (isKeyDown('ArrowRight')) { // Si Flĉhe Droite est enfoncé
        logo.x = logo.x + 1 // On ajoute 1 pixel à la position horizontale
    }
    if (isKeyDown('ArrowUp')) { // Si Flĉhe Haute est enfoncé
        logo.y = logo.y - 1 // On retire 1 pixel à la position verticale
    }
    if (isKeyDown('ArrowDown')) { // Si Flĉhe Basse est enfoncé
        logo.y = logo.y + 1 // On ajoute 1 pixel à la position verticale
    }
}

Ainsi avec ces 4 gestionnaires d'évènements, vous pouvez désormais modifier la position du logo Game-Dev.Ninja dans les 4 directions, comme le montre la démo suivante.

Dessiner à l'écran

Le kit de démarrage dessin déjà le logo à l'aide de la fonction context.drawImage que nous détaillerons plus tard. Nous allons nous afficher du texte à l'écran à l'aide de la fonction context.fillText. Cette fonction prends trois paramètres obligatoires: le texte à afficher, sa position horizontale et sa position verticale. Ainsi, nous affichons les textes des coordonnées x et y de notre logo:

function DrawGame(context) {
    // Affichage du logo Game-Dev.Ninja
    context.drawImage(logo.image, 0, 0, logo.image.naturalWidth, logo.image.naturalHeight, logo.x, logo.y, logo.image.naturalWidth, logo.image.naturalHeight)

    // Affichage des coordonnées du logo
    context.fillText('X: '+ logo.x, 5, 30)
    context.fillText('Y: '+ logo.y, 5, 50)
}

Les coordonnées étant mises à jour perpétuellement par la fonction UpdateGame, si vous enfoncez une touche pour déplacer votre logo, vous verrez aussi vos textes variés selon celles-ci.