Imagine que tu joues à un jeu vidéo ( parce que c’est quand même l’objectif final que l’on recherche ici 😁 ). Quand tu appuies sur une touche, par exemple pour faire sauter ton personnage, tu vois immédiatement ton personnage sauter, puis redescendre. Tu vois aussi l’ennemi qui se déplace ou ton score qui change.

Et bien tout ça, c’est grâce à la boucle de jeu ! 🎮

Et si je ne veux pas réaliser cette boucle de jeu ?

Sans la boucle de jeu, il serait impossible de répéter les actions nécessaires pour rendre un jeu interactif. En programmation impérative, chaque instruction est exécutée une seule fois, dans l’ordre où elle apparaît, puis c’est la fin du programme. Par exemple, si tu veux que ton personnage se déplace sans arrêt, tu aurais besoin d’une manière de répéter ce mouvement encore et encore à chaque seconde.

Mais comment répéter le mouvement le bon nombre de fois ?

Bonne question, on ne peut pas 🙂 Par exemple, si on utilise la boucle « for » pour répéter l’instruction, il nous faut un compteur pour déterminer quand arrêter de répéter l’action. Or, on ne sait pas à l’avance ce que choisira le joueur de faire, ni quand. Nous avons donc besoin de résoudre cette problématique.

C’est là qu’intervient la boucle de jeu ! Elle permet de répéter tout ce qui doit être fait en continu, pour que le jeu réagisse instantanément et de manière fluide. La boucle de jeu s’assure que les actions du joueur (comme appuyer sur une touche ou déplacer un personnage) sont répétées à chaque fois que le joueur le demande. Elle permet donc de contourner la limitation de la programmation impérative en offrant un mécanisme de répétition continu.

1. Comment fonctionne la boucle de jeu ?

La boucle de jeu est une boucle qui se répète sans fin, par exemple une boucle « while ». Elle fait tout ce qui est nécessaire pour que ton jeu fonctionne à chaque tour de boucle. Elle réalise donc plusieurs tâches à chaque fois :

Vérifier ce que fait le joueur :

  • Est-ce que tu appuies sur une touche pour avancer ?

  • Est-ce que tu fais sauter ton personnage ?

  • Est-ce que tu as cliqué quelque part ?

  • etc.

C’est comme un détecteur de mouvements. Chaque fois que la boucle de jeu se répète, elle vérifie à nouveau ce que fait le joueur.

Mettre à jour ce qui se passe dans le jeu :

Une fois que la boucle a vérifié ce que fait le joueur, elle passe à l’action suivante : mettre à jour le jeu. Par exemple :

  • Si tu appuies sur une touche, la boucle va déplacer la position de ton personnage.

  • Elle va également déplacer automatiquement les autres personnages non joueurs ou leur faire réaliser des actions

  • Elle va aussi faire changer le score ou mettre à jour l’écran.

  • etc.

C’est un peu comme si la boucle de jeu donnait des ordres à tous les éléments du jeu : « Déplace-toi, saute, avance, change de direction ! »

Réactualiser l’écran :

Ensuite, après avoir mis à jour ce qui se passe dans le jeu, la boucle de jeu doit montrer ce qui vient de changer. Cela veut dire qu’elle actualise ce qui est visible à l’écran. On dit que l’on rafraîchi l’affichage. Par exemple :

  • Le score peut augmenter si le joueur gagne des points.

  • Le personnage a sauté et doit maintenant apparaître plus haut.

  • Un ennemi est peut-être tombé et doit disparaître de l’écran.

Attends, attends… tu me parles de réactualiser l’écran, c’est quoi ça ?

L’affichage dans la boucle de jeu, c’est comme réaliser un tableau avec de la peinture 🎨

L’affichage dans un jeu vidéo, c’est un peu comme peindre sur une toile à chaque tour de la boucle de jeu. Imagine que tu aies un grand tableau blanc devant toi. Au début de chaque tour de boucle, tu prends tes pinceaux et tes couleurs pour peindre la scène du jeu.

  • Le tableau vide : Quand tu commences à afficher le jeu, l’écran est comme un tableau tout propre, sans rien dessus.

  • Effacer pour recommencer : Avant de commencer à peindre, à chaque tour de boucle, il faut effacer ce qui était déjà affiché à l’écran. Cela permet de ne pas laisser de traces des anciennes scènes, sinon on obtiendrais un effet de particules de notre personnage, un peu comme le personnage de « Flash » avec sa vitesse. Du coup, c’est comme si tu passais un coup de pinceau blanc pour effacer l’ancienne peinture avant de recommencer avec une nouvelle couche.

    Aperçu de l’effet « flash »
  • Peindre les éléments du jeu : Une fois l’écran « effacé », la boucle de jeu prend le relais pour dessiner ou « peindre » les éléments du jeu. Elle commence à placer tous les objets à leurs nouvelles positions : ton personnage, les ennemis, les éléments du décor, etc. Elle peint la scène comme un artiste qui ajuste chaque détail pour correspondre au nouvel état actuel du jeu.

    Déplacement du personnage avec rafraîchissement
  • Rafraîchir régulièrement : Après avoir peint la scène du jeu, il est crucial de tout rafraîchir rapidement pour que le joueur voie les changements de manière fluide. C’est comme si l’artiste mettait des touches de peinture sur son tableau, mais devait aussi le montrer à chaque étape, pour que les spectateurs puissent suivre l’évolution du travail, comme le motion design.

En résumé, à chaque tour de la boucle de jeu, c’est comme si tu créais un nouveau tableau : tu effaces les anciennes couches, tu peins les nouveaux éléments et tu actualises l’affichage pour montrer le résultat au joueur. C’est ce processus constant qui permet au jeu de rester dynamique et interactif !

3. Frames Per Seconds (FPS)

On appelle chacun de ces tableaux une « frame » et donc nous pouvons appeler Frames Per Seconds (FPS) le nombre de fois que l’on réaffiche le tableau par seconde. Plus cette mesure est élevée plus nous aurons un affichage fluide à l’écran

Lorsque l’on affiche 5 frames par secondes, on peux distinguer comme un effet de motion design, le mouvement est extrêmement saccadé.

5 fps

À 30 FPS, les mouvements sont visibles et acceptables dans la plupart des jeux. Tu peux commencer à voir les images individuelles se succéder, mais l’animation reste généralement fluide. C’est aussi le minimum pour les vidéos en streaming et les films

30 fps

À 60 FPS, l’animation devient bien plus fluide. Les mouvements des personnages, les objets et les animations sont perçus de manière très naturelle. C’est le standard pour les jeux modernes et les vidéos sur certaines plateformes. Les différences entre 30 et 60 FPS sont assez perceptibles pour un joueur attentif, surtout dans les jeux rapides où les mouvements sont très dynamiques (comme les jeux de tir ou de course).

60 fps

Cependant, au-delà de 60 FPS, l’amélioration visuelle est plus subtile. À partir de 120 FPS, la différence devient de plus en plus difficile à percevoir, sauf pour les joueurs particulièrement attentifs ou ceux qui utilisent des moniteurs à haute fréquence de rafraîchissement.

En résumé

La boucle de jeu répète plusieurs étapes en continu pour afficher l’état du jeu et lui permettre d’être interactif et dynamique :

  • Vérifier ce que fait le joueur : La boucle vérifie en permanence les actions du joueur (appuie-t-il sur une touche ? déplace-t-il un personnage ?).

  • Mettre à jour les actions dans le jeu : Les personnages se déplacent, les ennemis réagissent, le score change, etc.

  • Rafraîchir l’écran : La boucle efface l’affichage précédent et dessine les nouveaux éléments pour refléter les changements.

Chaque cycle de la boucle est appelé une frame, et le nombre de frames affichées par seconde (FPS) détermine la fluidité visuelle du jeu :

  • À 30 FPS, l’animation est fluide et acceptable, souvent utilisée pour les films et certains jeux.

  • À 60 FPS, les mouvements deviennent très fluides, ce qui est idéal pour les jeux modernes.

  • À 120 FPS ou plus, la différence devient difficile à percevoir pour la plupart des joueurs, sauf sur des écrans haute fréquence.

Grâce à la boucle de jeu et à une gestion des FPS optimisée, le jeu offre une expérience fluide et agréable. 🎮

Plan du chapitre Liste des aperçus

Introduction

Les bases de Phaser

Les textures et sprites
Les animations
Les caméras et scrolling
Les groupes et objets dynamiques
Les textes

Le moteur physique

Introduction à la physique dans Phaser
Gestion des collisions
Gestion de la gravité et des rebonds
Gestion des forces et impulsions

Système de gameplay

Création d’un personnage jouable
Création des ennemis
Création des objets interactifs
Création d’un HUD (interface utilisateur)

Effets spéciaux et finitions

Particules et effets visuels
Effets sonores avancés
Transitions et effets de caméra

Système de niveaux et de mondes

Système de cartes
Génération procédurale de niveaux
Gestion des checkpoints et sauvegardes

Projet final : Création d’un mini-rpg

Projet final – Présentation
Projet final – Initialisation du projet
Projet final – Création du monde
Projet final – Création du personnage
Projet final – Déplacement du personnage
Projet final – Changement de carte
Projet final – Création de l’environnement
Projet final – Création d’un HUD
Projet final – Interactions avec l’environnement
Projet final – Création de l’inventaire – Partie 1
Projet final – Création de l’inventaire – Partie 2
Projet final – Création de sauvegardes
Projet final – Création d’un système de combat – Partie 1
Projet final – Création d’un système de combat – Partie 2
Projet final – Création d’un système de combat – Partie 3
Projet final – Conclusion
Projet final – Pour aller plus loin

Exporter et publier son jeu

Optimisation des performances
Exporter et héberger son jeu
Monétisation et publicité

Conclusion

Bilan : Le mot de la fin
Ressources & Communauté
Pour aller plus loin : Conventions de nommage
Pour aller plus loin : Techniques avancées pour la création de jeux vidéo en JavaScript avec Phaser
Statut des chapitres :
Disponible
Partiellement disponible
Bientôt disponible

Les bases de Phaser

Le moteur physique

Système de gameplay

Effets spéciaux et finitions

Système de niveaux et de mondes

Projet final : Création d’un mini-rpg

Projet final – Présentation

Exporter et publier son jeu

Conclusion

Statut des chapitres :
Disponible
Partiellement disponible
Bientôt disponible

📌 Bienvenue dans l’espace Questions & Réponses !

Tu as une question sur un concept du chapitre ? Une explication te semble un peu floue ? 🤔 Cet espace est là pour toi ! Pose tes questions et échange avec les autres étudiants pour mieux comprendre le contenu.

Avant de poser une question, pense à :

  • Vérifier si quelqu’un n’a pas déjà posé la même question.
  • Donner un maximum de détails pour obtenir une réponse précise.
  • Être respectueux et clair dans ta demande.

L’entraide est la clé de l’apprentissage ! Alors, n’hésite pas à partager tes doutes ou à aider les autres si tu as la réponse. 🚀

Liste des réponses

Les questions / réponses sont disponibles uniquement pour les membres Premium.

Poser une question

L’ajout de questions est disponible uniquement pour les membres Premium.