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
    Monde2d
    • Tutoriel: créer un monde 2d
      • Créer le monde et les objets
      • Initialiser le CanvasPartie
      • Initialiser la VuePartie

    Tutoriel: créer un monde 2d #

    Créer le monde et les objets #

    1. En VSCode, créer le paquet pong.commun.monde2d

    2. Dans le paquet monde2d, créer les classes suivantes

      • MondePong2d
      • ObjetPong2d
      • Balle2d
    3. En VSCode, s’assurer d’avoir l’arborescence suivante

    4. Ouvrir MondePong2d et ajuster la signature

      public class MondePong2d extends World2dFx {
      
    5. Ouvrir Objet2d et ajuster la signature

      public abstract class ObjetPong2d extends Object2dFx<MondePong2d> {
      
      • ATTENTION: c’est une classe abstraite
    6. Ouvrir Balle2d et ajuster la signature

      public class Balle2d extends ObjetPong2d {
      
    7. Utiliser Ctrl+.Eclipse: Ctrl+1 pour ajouter les import et les méthodes obligatoires

    8. Ajouter le code suivant dans MondePong2d

      public class MondePong2d extends World2dFx {
      
          public static final double LARGEUR_MONDE = 640;
          public static final double HAUTEUR_MONDE = 360;
      
          private Balle2d balle;
      
          @Override
          protected void initialize() {
              setWidth(LARGEUR_MONDE);
              setHeight(HAUTEUR_MONDE);
      
              balle = new Balle2d();
      
              addObject2d(balle);
          }
      
          @Override
          public void drawOn(ResizableWorld2dCanvasFx canvas) {
              canvas.drawOnWorld(gc -> {
                  dessinerTerrain(gc);
              });
      
              super.drawOn(canvas);
          }
      
          private void dessinerTerrain(GraphicsContext gc) {
              gc.save();
              gc.setStroke(Color.LIGHTGREY);
              gc.setLineWidth(1);
      
              gc.strokeRect(0, 0, getWidth(), getHeight());
      
              gc.restore();
          }
      }
      
    9. Ajouter le code suivant dans Balle2d

      public class Balle2d extends ObjetPong2d {
      
          public Balle2d() {
              super();
          }
      
          @Override
          public void initialize() {
              setWidth(10);
              setHeight(10);
              setTopLeftX(100);
              setTopLeftY(100);
          }
      
          @Override
          public void drawOnWorld(GraphicsContext gc) {
              gc.fillArc(getTopLeftX(),
                         getTopLeftY(),
                         getWidth(), 
                         getHeight(), 
                         0, 
                         360, 
                         ArcType.CHORD);
          }
      
          @Override
          protected boolean onMouseEvent(World2dMouseEventFx mouseEvent) {
              return false;
          }
      
          @Override
          public String id() {
              return "balle";
          }
      }
      

    Initialiser le CanvasPartie #

    1. Ouvrir CanvasPartie et ajouter le code suivant

      public class CanvasPartie extends ResizableWorld2dCanvasFx {
      
          @Override
          protected void initialize() {
              // ajouter
              setInitialWorldSize(MondePong2d.LARGEUR_MONDE, MondePong2d.HAUTEUR_MONDE);
          }
      

    Initialiser la VuePartie #

    1. Ouvrir VuePartie et ajouter le code suivant

      public class VuePartie extends ViewFx {
      
          // ...
      
          // ajouter
          @FXML
          private CanvasPartie canvasPartie;
      
      
          @Override
          public void initialize() {
      
              // ...
      
              // ajouter
              Ntro.assertNotNull(canvasPartie);
      
          }
      
          // ...
      
    2. Utiliser Ctrl+.Eclipse: Ctrl+1 pour corriger les erreurs de compliation

    3. S’assurer que l’application s’exécute sans erreur

      $ sh gradlew pong
      
      • NOTES:
        • c’est normal si le canvas n’affiche rien
        • on a pas encore appelé la méthode drawOn pour que le monde2d se dessine sur le canvas
    Creative Commons License Creative Commons Attribution Creative Commons ShareAlike
    • Tutoriel: créer un monde 2d
      • Créer le monde et les objets
      • Initialiser le CanvasPartie
      • Initialiser la VuePartie