Comment un jeu vidéo fait bouger les choses
Un jeu vidéo repose sur une boucle de jeu. C'est un petit morceau de code qui se répète sans fin et qui dessine une nouvelle image à chaque tour. Une image, c'est une photo du jeu à un instant précis.
Comprendre cette boucle permet de prévoir où sera chaque objet dans une seconde, et de régler la vitesse d'un personnage sans tâtonner.
À la fin de cette leçon
Remarque
Je peux expliquer ce que fait une boucle de jeu à chaque image et calculer la position d'un objet après plusieurs images.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Image | une photo du jeu, dessinée plusieurs dizaines de fois par seconde | |
| Boucle de jeu | le code qui se répète : mise à jour, puis dessin | |
| Mise à jour | le calcul des nouvelles positions et du score | |
| Dessin | l'étape qui peint l'image à l'écran | |
| Vitesse | le nombre de pixels dont un objet avance à chaque image | 5 |
| Constante | un nombre nommé, écrit en haut du code, que l'on règle en un seul endroit | PLAYER_SPEED |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Un jeu redessine l'écran 60 fois par seconde
Un dessin animé donne l'impression du mouvement avec des images qui se suivent vite. Un jeu fait pareil. Sur un écran ordinaire, il dessine 60 images par seconde.
Plus il y a d'images par seconde, plus chacune doit être calculée vite. Le tableau donne le temps dont le jeu dispose pour une image.
Exemple : le temps dont dispose une image
| Images par seconde | Calcul | Temps pour une image |
|---|---|---|
| 30 | 1000 ms divisées par 30 | environ 33 ms |
| 60 | 1000 ms divisées par 60 | environ 17 ms |
| 120 | 1000 ms divisées par 120 | environ 8 ms |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Chaque tour : mettre à jour, puis dessiner
À chaque image, le jeu suit toujours le même ordre. Il lit les touches et calcule les nouvelles positions. Puis il efface l'écran et dessine tout à sa nouvelle place.
Le calcul s'appelle la mise à jour. La peinture s'appelle le dessin. Les séparer évite de mélanger les règles du jeu et son apparence.
Exemple : une boucle de jeu en JavaScript
<canvas id="jeu" width="300" height="60"></canvas>Avant de lancer les Run
Remarque
Démarrez le labo et ouvrez le terminal. Le jeu s'appelle « Catch the stars » et ses trois fichiers sont dans le dossier game. Les scripts écrivent leurs mots en anglais : constants et functions ne sont pas des erreurs.
Lire les constantes et les fonctions du jeu
docker exec jupyter python3 steps/loop.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Lister les fichiers du jeu
docker exec jupyter ls gameAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Ce que le script a lu
Le premier Run écrit neuf constantes, une par ligne. On y trouve GRAVITY = 0.15, PLAYER_SPEED = 6 et SPAWN_EVERY = 50. Puis il écrit uses requestAnimationFrame: True : la boucle existe bien.
La dernière ligne liste huit fonctions, dont update, draw et loop. Le second Run liste les trois fichiers : game.js, index.html et style.css.
La vitesse compte des pixels par image
Si un personnage avance de 6 pixels à chaque image, il avance de 360 pixels en une seconde à 60 images par seconde. Pour savoir où il est, on ajoute la vitesse une fois par image.
Un jeu bien fait garde cette vitesse dans une constante nommée. Pour le rendre plus rapide, on change un seul nombre en haut du code.
Une erreur fréquente
Attention
Beaucoup pensent que le jeu dessine l'écran une seule fois, puis déplace les formes déjà dessinées. Faux : à chaque image, il efface tout et redessine tout à la nouvelle position. Si l'on oublie d'effacer, l'objet laisse une traînée.