SAÉ - Développement IHM

1°/ Attendus techniques

NB 1 : ces attendus viennent en sus de ceux qui ont été précisés dans l'article général : Présentation générale (objectifs, attendus, organisation)

NB 2 : ces attendus sont pour la plupart les mêmes que pour la version en mode texte, certains sous une forme différente grâce au côté graphique et aux interactions via la souris

1.1°/ Interface

• L'interface graphique doit comporter un menu permettant au minimum de lancer un nouvelle partie et de quitter le jeu (cf. "The Hole")
• Le visuel de tous les éléments du jeu ainsi que leur disposition dans la fenêtre principale est laissé libre, pourvu qu'il corresponde au format du jeu choisi.

1.2°/ Choix du mode de jeu

• Le mode de jeu représente qui joue : 2 humains, 2 ordinateurs, ou 1 humain+1 ordinateur. Ce choix doit être effectué via une boîte de dialogue s'ouvrant sur un clic bouton/menu/..., ... avant ou au moment de commencer une partie.
• Le nom des joueurs est par défaut joueur1/joueur2 (ou ordi1/ordi2 si l'IA est utilisée) mais il peut être changé via la boîte de dialogue mentionnée ci-dessus.

1.3°/ Faire des actions de jeu

• Lorsqu'un joueur humain doit jouer, la saisie de son (ou ses) coup doit se faire via la souris, en sélectionnant un pion (ou tout autre élément sélectionnable).
• Bien entendu, il ne doit pas être possible de sélectionner un élément non valide (par ex. le pion d'un adversaire)
• Le visuel de l'élément sélectionné doit changer et si on reclique sur ce pion, il est désélectionné.
• Pour certains types d'éléments comme par exemple les pions, on peut ensuite cliquer sur une destination et si elle est valide, le pion est déplacé vers celle-ci via une animation (comme dans le tutoriel "The Hole")

Les optionnels (=> bonus) lorsqu'un pion est sélectionné :

• les destinations possibles changent de visuel,
• on peut cliquer sur un autre pion valide pour sélectionner ce dernier à la place. 

1.4°/ Fin de partie

• Au minimum, un message doit apparaître affichant le résultat de la partie.
• Ce message peut être dans une boîte de dialogue comme dans "The Hole", ou bien directement dans la fenêtre comme dans le casse-brique.

1.5°/ Tests unitaires

• Comme pour la version en mode texte, cette version graphique doit être couverte par des tests unitaires.
• Normalement, tous les tests concernant la partie modèle ainsi que la prise de décision ont déjà été écrits pour la version texte, puisque la version graphique utilise les mêmes classes.
• Si ce n'est pas le cas, ou bien si la partie modèle/prise de décision a changé, il faut compléter/modifier l'écriture des tests pour tendre vers 100% de couverture.
• D'autre part, la partie contrôle change radicalement et il y a également matière a tester certaines partie du contrôle, notamment dans la gestion de la souris.

2°/ Méthodologie

Les phases de développement se font globalement dans le même ordre que pour la version texte, avec toujours la possibilité de développer les parties vue et contrôle plus ou moins en parallèle. Bien entendu, la partie contrôle reste primordiale puisque c'est elle qui permet à l'utilisateur d'interagir avec le jeu et de jouer. Il vaut donc mieux un aspect visuel simple, voire moche, et une totale jouabilité, plutôt que de beaux graphismes avec une jouabilité fastidieuse, voire déficiente.

2.1°/ découverte de boardifier

Pour cela, un tutoriel est disponible : Tutoriel 4 : créer un jeu de plateau en mode graphique avec Boardifier

Chaque étudiant DOIT le suivre. Ce tutoriel permet de comprendre comment adapter un jeu en mode texte, créé à partir de boardifier-console, en mode graphique avec boardifier.

2.2°/ conception de la partie modèle

Après avoir suivi le tutoriel sur boardifier, vous devriez être capable de déterminer les classes du modèle qui vont nécessiter quelques rares modifications pour passer en mode graphique. Normalement, cela ne concerne que des élément de jeu qui ne sont pas présent en mode texte, comme par exemple des noms/messages/icônes/... à afficher dans la fenêtre de jeu. 

2.3°/ conception de la prise de décision

Les seuls changements sont la modification des actions qui sont crées pour représenter les coups à jouer. Il faut en effet leur ajouter une animation afin que les éléments de jeu concernés se déplacent visuellement à l'écran.

2.4°/ conception de la partie vue

Comme pour la version texte, la conception et le codage de la partie vue repose sur la création des maquettes précises du visuel du jeu. Cela implique notamment de définir :

• l'apparence de chaque zone, avec notamment leur taille 2D, les couleurs utilisées, le design,
• la position 2D de ces zones,
• l'apparence des autres éléments (pions, murs, ...), et ce pour chacun de leur état possible.

Au minimum, il est demandé de créer un visuel à taille et structuration constante, donc qui respecte les maquettes. Cependant, il est possible de définir le visuel pour plusieurs tailles possibles. Dans ce dernier cas, cela complexifie grandement le codage de la partie vue et n'est donc pas vraiment conseillé. Comme pour les autres parties optionnelles, cela comptera comme un bonus dans l'évaluation. 

Le principal challenge pour implémenter les classes de la vue est de bien comprendre la structuration et le fonctionnement d'une Scene javafx et de tous les types de noeuds qui peuvent être inclus dans celle-ci : Group, Pane, Shape, ImageView, ... Le second challenge est de comprendre comment boardifier représente et gère le visuel des éléments du jeu au travers de la classe ElementLook et ses sous-classes. Pour ces deux points, le tutoriel est la façon la plus simple et directe pour trouver des exemples d'implémentation de pion, plateau, ... ainsi que la façon de gérer l'animation d'un élément.

2.5°/ conception de la partie contrôle

La partie contrôle est ce qui change le plus entre la version texte et la version graphique. Même si boardifier contient presque toute la mécanique permettant de gérer la mise à jour du modèle et de la vue à intervalle régulier, il faut entièrement implémenter la gestion des événements utilisateur, notamment la souris et les menus. Cependant, tous les jeux proposés se basent sur le même principe de tour de jeu : sélection d'un pion et déplacement de ce pion à une destination. Ce principe est également celui du tutoriel "The Hole". Comprendre comment est géré la sélection/déplacement dans le tutoriel permet de le réutiliser et de l'adapter facilement aux autres jeux.