Cesi RILA 2014 – Projet Java Julian Mauborgne Projet Frogger Cesi RILA 2014 – Projet Java Julian Mauborgne

Introduction Conception Développement Conclusion Plan 03 juin 2015

Frogger (1/3) Jeu d’arcade 1981 Konami Diriger des grenouilles Atteindre les maisons Eviter les obstacles Jeu original Introduction Conception Développement Conclusion 03 juin 2015

Objectifs (2/3) Reprise du jeu classique Langage JAVA Introduction Quatre grenouilles Deux espaces Chronomètre Niveau de difficulté Score Langage JAVA Introduction Conception Développement Conclusion 03 juin 2015

Environnement technique (3/3) Langage : JAVA 8 IDE : eclipse Système de gestion de version : git Librairie graphique : JavaFX Outil de mise en page : Scene builder Outil de build : Ant Introduction Conception Développement Conclusion 03 juin 2015

Introduction Conception Développement Conclusion Plan 03 juin 2015

Gestion de projet (1/5) Introduction Conception Développement IHM Prototype Conception globale Développement d’un prototype Moteur de jeu Boucle de jeu Déplacements Intégration des règles de jeu Score Vie Chronomètre Collisions Gameplay Introduction Conception Développement Conclusion 03 juin 2015

IHM (2/5) Quatre actions utilisateur : Introduction Conception Jouer Consulter les scores Modifier les options Quitter l’application IHM répondant aux cas d’utilisation demandées: Quitter l’application…. Consulter les high scores Modifier la difficulté Jouer au jeu IHM de l’application Introduction Conception Développement Conclusion 03 juin 2015

Cas d’utilisation principal : jouer une partie (p6) Lancer une partie (3/5) Début Déroulement Fin Une partie, ou tout jeu nécessite : Un début : déclenché par une action utilisateur <= qd il clique sur « lancer la partie » La partie proprement dit : dépends essentiellement des déplacements du joueur Une fin : qd le nombre de vie arrive à son terme Cas d’utilisation principal : jouer une partie (p6) Introduction Conception Développement Conclusion 03 juin 2015

Eléments du jeu (4/5) Obstacles (2) Joueur (2) Fin de partie (3) Chronomètre (3) Vies restantes (3) Boucle de jeu (1) 3 éléments principaux dans la partie : - La boucle de jeu : entité principale du jeu => met en relations les différents acteurs : les déplacements, les collisions, les règles du jeu… Le joueur et obstacles : objets graphiques soumis à des déplacements => par le joueur, ou moteur (constants, rectilignes, linéaires) <= sensibles aux collisions Les règles de jeu => nbre de vie, timer, zone d’arrivée (conditions qui vont impacter le déroulement du jeu, et selon lesquelles le joueur va devoir adapter son jeu) Introduction Conception Développement Conclusion 03 juin 2015

Déroulement d’une partie (5/5) :IHM :Game loop Joueur Déplacements Mouvement = true :Collisions :Règles Collisions ? Conséquence ? Mise à jour IHM :Gestion des déplacements Déplacements ? Diagramme de séquence mettant en exergue : Le joueur Le moteur de jeu Le moteur de collisions Le moteur de règles Interactions des entités principales d’un cycle de jeu (p8) Introduction Conception Développement Conclusion 03 juin 2015

Introduction Conception Développement Conclusion Plan 03 juin 2015

Les nœuds graphiques de JavaFX Librairie graphique (JAVA 8) Multi-plateforme CSS FXML Scene Builder Stage Scene Node Multiplateforme : desktop Linux, Mac OS X, Windows FXML : possibilité de décrire l’IHM dans des fichiers FXML, en XML… - Possibilité de binder directement le fichier à un contrôleur - Possibilité de créer ses propres composants graphiques (java) et de les utiliser (import) => définir des propriétés, directement renseignées dans le xml Scene builder = mise en forme graphique, accès aux composants personnalisés, y compris aux propriétés Les nœuds graphiques de JavaFX Introduction Conception Développement Conclusion 03 juin 2015

Principe des timelines Animations (2/5) Classes animations natives Effets Déplacements KeyFrames / KeyValues Timeline opacity 0% opacity 100% opacity 50% 500 1000 ms 90° 45° 0° Translation, Rotation, Fade, Blur… Principe : définir un état initial, un état final, et la durée en milli-secondes pour passer de l’un à l’autre - KeyFrames : étapes clés => les différents états transitoires (propriétés à un moment donné) - keyValues : la valeur des propriétés à ce moment Principe des timelines Introduction Conception Développement Conclusion 03 juin 2015

Boucle de jeu avec une timeline Game loop (3/5) Timeline(keyFrames) Ligne de temps répétable Accepte un liste d’étapes-clés KeyFrame(duration, event listener) Durée Gestionnaire d’événements Boucle de jeu avec une timeline MAJ Chronomètre Déplacer objets Déplacer joueur Vérifier les règles 30ms Introduction Conception Développement Conclusion 03 juin 2015

Objets graphiques : tuiles d’environnement et obstacles Collisions (4/5)     Objets graphiques : tuiles d’environnement et obstacles Deux niveaux de collisions : Grenouille vs Environnement Grenouille vs Obstacles Trois(+) types de collisions : Négative Positive Nulle A chaque nœuds graphiques (node javafx) correspond un nœud manipulable par le code, et chacun de ces nœuds est pourvu d’une propriété spécifiant le type de collisions auquel il appartient. - 1 = mort !!! => ok - 2 = objets statiques => ok - 3 = objets flottant => ok - 4 = accès interdit => no - 6 = maison => ok, puis no Introduction Conception Développement Conclusion 03 juin 2015

Processus du médiateur (p16) Collisions (5/5) Un déplacement = une notification des nœuds inscrits Une notification = un test entre le nœud émetteur et le receveur Au niveau du code : - calculs de collisions : cf developpez.com… (premier test sur les rectangle bounds, second avec des cercles. Plus le cas particulier obstacles : circle/rectangle). - détection de collisions : plus intéressant Première méthode : parcourir la liste de nodes et tester un à un.. A chaque tour de boucle… (long… risques de rater des collisions, différence entre les collisions effectives du début du test et celles de la fin (boucle de 33ms… pour >100 nodes)) Deuxième méthode : gérer différemment la détection selon le type d’objet et tester uniquement lors d’un déplacement ! -> la grenouille bouge > on teste la position qu’elle aura en testant la liste de node statiques > selon le retour, on autorise ou non, pour une mort ou non. -> oui mais la grenouille ne se jette pas forcément sous les roues des voitures… Pour les objets en mouvement : installer une discussion entre eux, et tester s’il y a déplacements = pattern mediator Processus du médiateur (p16) Introduction Conception Développement Conclusion 03 juin 2015

Introduction Conception Développement Conclusion Plan 03 juin 2015

Perspectives (1/4) Introduction Conception Développement Conclusion Revisiter les animations Déplacements Collisions améliorées Radar Objets autonomes Machine à état Collisions Règles Introduction Conception Développement Conclusion 03 juin 2015

Technique (2/4) Java Java 8 JavaFX POO UML Introduction Conception Développement Conclusion 03 juin 2015

Expérience (3/4) Gestion de projet Conception Technique Introduction Estimation du temps Gestion du temps Conception Cahier des charges Méthodologie Technique Introduction Conception Développement Conclusion 03 juin 2015

Bilan personnel (4/4) Logique de jeu Conception selon l’expérience et les connaissances (constante évo) 1er projet Pas une logique d’appli de gestion Je ne ferais pas aujourd’hui ce que j’ai fait au début du projet Introduction Conception Développement Conclusion 03 juin 2015

Merci. Questions ?