ntro.ca

        • Contrats de classe
        • Liens utiles
        • Calendrier
        • Calendrier groupe 2
        • Calendrier groupes 1, 3
        • Structure du cours
        • Évaluations
        • Matériel à se procurer
        • Les profs
          • Marc-Olivier Tremblay
          • Mathieu Bergeron
        • Module 1.1: installation + trier des cartes
        • Module 1.2: rappels POO
        • Module 1.3: tableau d'objets
        • Examen 1
        • Module 2.1: données JSON
        • Module 2.2: données en Java
        • Module 2.3: récursivité
        • Examen 2
        • Module 3.1: structure générique
        • Module 3.2: efficacité (1)
        • Module 3.3: efficacité (2)
        • Examen 3
        • Module 4.1: liste naïve
        • Module 4.2: liste par tableau
        • Module 4.3: liste chaînée
        • Examen 4
        • Module 5.1: mappage naïf
        • Module 5.2: mappage par hachage
        • Module 5.3: mappage par arbre
        • Examen 5
        • Équipes
          • Horaire groupe 1
          • Horaire groupe 2
          • Horaire groupe 3
          • Groupe 1
          • Groupe 2
          • Groupe 3
        • Projets vedettes 2022
        • Projets vedettes 2023
        • Projets vedettes 2024
        • Projets vedettes 2025
        • Survol
        • Structure
        • Calendrier
        • Calendrier des séances
        • Évaluations
        • Exemples de jeu
        • Exemples de pages
        • Réponses à vos questions
        • Module 1: créer le projet
        • Module 2: concevoir l'application
        • Module 3: vues NtroFx
        • Module 4: modèle et navigation
        • Module 5: ajouter le dorsal, modifier le modèle
        • Module 7: améliorer l'affichage
        • Module 8: jeu en 2d
        • Module 9: client/serveur
        • Module 10: plusieurs instances du même modèle
        • TP1
        • Examen 1
        • TP2
        • Examen 2
        • Projet de fin de session
        • Calendrier
        • Structure du cours
        • Évaluations
        • Contrat de classe
        • Le prof
        • 01: Windows et Word
          • Astuces et raccourcis
        • 02: Word
        • 03: Word
          • Exercice Word: insertion d'éléments spéciaux
          • Exercice Word: tableaux
        • 04: Word
          • Exercice Word: références
          • TP01: Word (15%)
        • 05: PowerPoint
          • TP02: PowerPoint (10%)
        • 06: Examen Word (20%)
        • 07: Excel
        • 08: Excel
        • 09: Excel
          • TP03: Excel (15%)
        • 10: Excel
        • 11: Examen Excel (20%)
        • 12: Access
        • 13: Access
        • 14: Access
        • 15: Examen Access
      • Sondage H2023 (dept. info)
      • Vision H2023 (dept. info)
      • P1) exercices interactifs de lecture
      • P2) transition Excel vers Python
        • Atelier 2: un exemple
      • Jquery
      • Jquery Ui
      • Point de vue sur l'IA
    Afficher Monde2d
    • Tutoriel: afficher le monde 2d
      • Créer une tâche pour l’affichage temps-réel
      • Coder l’affichage du monde 2d
      • Coder un compteur de FPS (images par seconde)

    Tutoriel: afficher le monde 2d #

    Créer une tâche pour l’affichage temps-réel #

    1. Ouvrir AfficherPartie et ajouter ce code

      public class AfficherPartie {
      
          public static void creerTaches(FrontendTasks tasks) {
      
              creerDonneesVuePartie(tasks);
      
              // ajouter le groupe de tâches suivant
              tasks.taskGroup("AfficherPartie")
      
                   .waitsFor(created(DonneesVuePartie.class))
      
                   .waitsFor("afficherVuePartie")
      
                   .contains(subTasks -> {
      
                      prochaineImagePartie(subTasks);
      
                   });
      
          }
      
          // ...
      
      
          // ajouter la méthode
          private static void prochaineImagePartie(FrontendTasks subTasks) {
      
              subTasks.task("prochaineImagePartie")
      
                       .waitsFor("afficherVuePartie")
      
                       .waitsFor(created(DonneesVuePartie.class))
      
                       .waitsFor(created(VuePartie.class))
      
                       .waitsFor(clock().nextTick())
      
                       .executes(inputs -> {
      
                          DonneesVuePartie donneesVuePartie = inputs.get(created(DonneesVuePartie.class));
                          VuePartie        vuePartie        = inputs.get(created(VuePartie.class));
                          Tick             tick             = inputs.get(clock().nextTick());
      
                          // TODO: afficher le monde 2d
                      });
          }
      }
      
      • NOTES
        • la tâche prochaineImagePartie sera appelée à chaque clock().nextTick()
        • ce qui veut dire: le plus souvent possible
        • (en JavaFx, typiquement 60 fois par secondes)
    2. S’assurer que AppPong s’exécute

      $ sh gradlew pong
      
    3. Vérifier le graphe de tâches du frontal

    Coder l’affichage du monde 2d #

    1. Dans la tâche prochaineImagePartie, ajouter l’appel suivant

      public class AfficherPartie {
      
          // ...
      
          private static void prochaineImagePartie(FrontendTasks subTasks) {
      
              subTasks.task("prochaineImagePartie")
      
                       .waitsFor("afficherVuePartie")
      
                       .waitsFor(created(DonneesVuePartie.class))
      
                       .waitsFor(created(VuePartie.class))
      
                       .waitsFor(clock().nextTick())
      
                       .executes(inputs -> {
      
                          DonneesVuePartie donneesVuePartie = inputs.get(created(DonneesVuePartie.class));
                          VuePartie        vuePartie        = inputs.get(created(VuePartie.class));
                          Tick             tick             = inputs.get(clock().nextTick());
      
                          // ajouter
                          donneesVuePartie.afficherSur(vuePartie);
      
                      });
          }
      
      }
      
    2. Utiliser Ctrl+.Eclipse: Ctrl+1 pour créer la méthode DonneesVuePartie.afficherSur

    3. Dans DonneesVuePartie, ajouter ce code pour la méthode afficherSur

      public class DonneesVuePartie implements ViewData {
      
          // ...
      
          public void afficherSur(VuePartie vuePartie) {
      
              vuePartie.viderCanvas();
              vuePartie.afficherImagesParSeconde("FPS " + fpsCourant);
              vuePartie.afficherPong2d(mondePong2d);
      
          }
      
    4. Utiliser Ctrl+.Eclipse: Ctrl+1 pour créer les méthodes suivantes:

      • VuePartie.viderCanvas
      • VuePartie.afficherImagesParSecondes
      • VuePartie.afficherPong2d
    5. Dans VuePartie, ajouter le code suivant

      public class VuePartie extends ViewFx {
      
          // ...
      
          public void viderCanvas() {
              canvasPartie.clearCanvas();
          }
      
          public void afficherImagesParSeconde(String fps) {
              canvasPartie.afficherFps(fps);
          }
      
          public void afficherPong2d(MondePong2d mondePong2d) {
              mondePong2d.drawOn(canvasPartie);
          }
      
    6. Utiliser Ctrl+.Eclipse: Ctrl+1 pour créer la méthode suivante:

      • CanvasPartie.afficherFps
    7. Dans CanvasPartie, ajouter le code suivant

      public class CanvasPartie extends ResizableWorld2dCanvasFx {
      
          // ...
      
          public void afficherFps(String fps) {
              drawOnCanvas(gc -> {
      
                  gc.fillText(fps, 0, 12);
      
              });
          }
      
      
      }
      
    8. S’assurer que AppPong s’exécute et affiche le monde 2d

      $ sh gradlew pong
      
      • NOTES
        • c’est normal que le compteur de FPS soit encore à 0

    Coder un compteur de FPS (images par seconde) #

    1. Ouvrir DonneesVuePartie et ajouter le code suivant:

      public class DonneesVuePartie implements ViewData {
      
          // ajouter
          private static long CALCULER_FPS_A_CHAQUE_X_MILLISECONDES = 200;
      
      
          // ajouter
          private long horodatageDernierCalculFps = NtroCore.time().nowMilliseconds();
          private long imagesAfficheesDepuisDernierCalculFps = 0;
      
      
          public void afficherSur(VuePartie vuePartie) {
              // ajouter
              calculerFpsSiNecessaire();
      
              vuePartie.viderCanvas();
              vuePartie.afficherImagesParSeconde("FPS " + fpsCourant);
              vuePartie.afficherPong2d(mondePong2d);
      
              // ajouter
              imagesAfficheesDepuisDernierCalculFps++;
          }
      
          // ajouter la méthode
          private void calculerFpsSiNecessaire() {
              long horodatageMaintenant = NtroCore.time().nowMilliseconds();
              long millisecondesEcoulees = horodatageMaintenant - horodatageDernierCalculFps;
      
              if(millisecondesEcoulees > CALCULER_FPS_A_CHAQUE_X_MILLISECONDES) {
                  calculerFpsMaintenant(millisecondesEcoulees);
      
                  imagesAfficheesDepuisDernierCalculFps = 0;
                  horodatageDernierCalculFps = horodatageMaintenant;
              }
          }
      
          // ajouter la méthode
          private void calculerFpsMaintenant(long millisecondesEcoulees) {
              double secondesEcoulees = millisecondesEcoulees / 1E3;
              double fps = imagesAfficheesDepuisDernierCalculFps / secondesEcoulees;
              fpsCourant = String.valueOf(Math.round(fps));
          }
      
      }
      
    2. S’assurer que AppPong s’exécute et affiche maintenant le compteur FPS

      $ sh gradlew pong
      
      • NOTE
        • La plupart des implentations de JavaFX bloque le FPS à 60
    Creative Commons License Creative Commons Attribution Creative Commons ShareAlike
    • Tutoriel: afficher le monde 2d
      • Créer une tâche pour l’affichage temps-réel
      • Coder l’affichage du monde 2d
      • Coder un compteur de FPS (images par seconde)