Plateau de jeu graphique

2.1.1. Frange

2.1.2. Occupants

2.1.3. Jetons d'annulation

3.1.1. Graphe de scène

Le graphe de scène construit par la méthode create — et par les auditeurs qu'elle installe — est visible dans la figure ci-dessous.

Comme les occupants et les marqueurs d'une case dépendent de la tuile qui s'y trouve, seules les cases contenant une tuile possèdent des occupants et des jetons d'annulation.

3.1.2. Conseils de programmation

1. Construction du plateau
   

   Comme nous l'avons vu plus haut, le plateau de jeu est représenté par une instance de GridPane qui possède un enfant par case du plateau, donc 625 enfants si la portée de ce dernier est de 12.

   La construction du graphe de scène se fait donc assez facilement au moyen de deux boucles imbriquées, l'une parcourant les index x des cases, l'autre les index y. À chaque itération de cette boucle, le petit graphe de scène correspondant à la case à la position (x, y) est construit, et ajouté à l'instance de GridPane au moyen de sa méthode add.

   Initialement, le graphe de scène d'une case consiste en une instance de Group contenant une unique instance de ImageView, qui montre une image « vide ». Un auditeur attaché à une valeur observable dont le contenu est la tuile du plateau à la position (x, y) augmente ce graphe de scène initial avec les nœuds correspondants aux jetons d'annulation et aux occupants au moment où une tuile est ajoutée au plateau à cette position.

   Afin que la position (0,0) soit initialement au centre de l'écran, il faut appeler les méthodes setHvalue et setVvalue de l'instance de ScrollPane contenant le plateau avec la valeur 0.5.

2. Image de fond
   

   L'image de fond d'une case — celle qui est affichée par l'instance de ImageView — est soit « vide », soit l'image d'une tuile.

   Il faut toutefois faire attention à ce que l'on entend par « image vide ». On pourrait penser que cela signifie que la propriété imageProperty de l'instance de ImageView contient simplement null. Malheureusement, lorsque c'est le cas, l'instance de ImageView est considérée comme vide par JavaFX, de même que le groupe qui la contient. Cela implique, entre autres, qu'il est impossible de savoir quand le curseur de la souris survole la case, ce qui est problématique pour nous.

   Dès lors, quand une case du plateau est vide, l'instance de ImageView qui lui correspond affiche une image de couleur uniforme, presque blanche. Cette image, qui peut être créée une seule fois et ensuite utilisée dans toutes les cases vides, s'obtient ainsi :

   WritableImage emptyTileImage = new WritableImage(1, 1);
   emptyTileImage
     .getPixelWriter()
     .setColor(0, 0, Color.gray(0.98));
   

   Notez que cette image a une taille de 1×1 unités, mais cela n'est pas problématique car les instances de ImageView que nous utilisons sont configurées pour redimensionner leur image à une taille de 128×128 unités. Cette minuscule image occupera donc la totalité de la case, comme attendu.

   Lorsqu'une case contient une tuile, son image de fond est simplement celle de la tuile, qui s'obtient facilement de la classe ImageLoader écrite à l'étape 8. Pour des raisons d'efficacité, il est toutefois nécessaire de stocker toutes les images des tuiles obtenues de ImageLoader dans une table les associant à l'identifiant de leur tuile. Cette table, que l'on nomme un cache en informatique, permet de garantir que l'image d'une tuile donnée sera chargée au plus une fois durant l'exécution du programme. Sachant que le chargement est une opération relativement lente, le cache permet d'améliorer les performances du programme.

3. Occupants et jetons d'annulation
   

   Une fois ajoutés au graphe de scène, les nœuds JavaFX correspondant aux jetons d'annulation et aux occupants y restent ensuite définitivement, dans un soucis de simplicité. Toutefois, ils sont rendus visibles ou non en fonction de l'état du jeu.

   Un jeton donné est visible lorsque l'identifiant de l'animal auquel il correspond fait partie des animaux annulés de l'état du jeu courant. Un occupant donné est quant à lui visible lorsqu'il fait partie de l'ensemble des occupants visibles passés à create. Cet ensemble contiendra tous les occupants effectivement posés sur le plateau ainsi que tous les occupants potentiels de la dernière tuile lorsque celle-ci doit être occupée.

   Comme illustré à la figure 2, l'identité d'un nœud JavaFX représentant un jeton d'annulation est la concaténation de la chaîne marker_ avec l'identifiant de l'animal auquel le jeton correspond. De même, l'identité d'un nœud JavaFX représentant un occupant est la concaténation de la chaîne pawn_ (pour un pion), ou de la chaîne hut_ (pour une hutte), avec l'identifiant de la zone qu'il occupe.

   Les nœuds JavaFX représentant les occupants — mais pas ceux représentant les jetons — subissent une rotation de manière à apparaître toujours verticaux à l'écran, même si la tuile qu'ils occupent est tournée.

   Finalement, un clic sur un nœud JavaFX représentant un occupant provoque toujours l'appel de la méthode accept du troisième gestionnaire d'événements passé à create, avec l'occupant lui-même en argument.

4. Rotation
   

   Les tuiles posées sur le plateau peuvent être tournées d'un nombre quelconque de quarts de tour. Bien entendu, cela implique que leur image doit également l'être.

   Toutefois, tourner uniquement l'image de la tuile, par exemple en appliquant une rotation à l'instance de ImageView qui la contient, ne suffit pas. En effet, les éventuels jetons d'annulation et les occupants doivent également être tournés, faute de quoi ils ne sont pas positionnés correctement.

   Dès lors, lorsqu'une tuile a été tournée avant d'être posée sur le plateau, la rotation doit être appliquée à l'instance de Group qui représente la case qui la contient. C'est pour cette raison que les occupants doivent subir la rotation inverse de celle appliquée au groupe les contenant.

   Appliquer une rotation à un nœud est très simple avec JavaFX, puisqu'il suffit de modifier le contenu de sa propriété rotateProperty.

5. Voile
   

   Comme nous l'avons dit dans l'introduction, les cases sont parfois recouvertes d'un voile coloré, c.-à-d. d'une image semi-transparente de couleur uniforme. Il y a trois situations dans lesquelles c'est le cas :

   1. si la case contient une tuile, et que certaines tuiles sont mises en évidence mais pas celle de la case, alors elle est recouverte d'un voile noir qui l'assombrit,
   2. si la case fait partie de la frange mais quelle n'est pas survolée par le curseur de la souris, alors elle est recouverte d'un voile de la couleur du joueur courant,
   3. si la case fait partie de la frange, que le curseur de la souris la survole et que la tuile courante, avec sa rotation actuelle, ne peut pas y être placée, alors elle est recouverte d'un voile blanc.

   Avec JavaFX, le voile peut être représenté par un effet graphique attaché à l'instance de Group qui représente la case, au moyen de sa propriété effectProperty. L'effet qui convient ici est un mélange (Blend) de type SRC_OVER entre l'image du voile, à l'avant plan, et l'image de la tuile, à l'arrière-plan. L'image du voile peut être créée au moyen d'une instance de ColorInput de la taille d'une tuile, dont l'opacité est de 0.5 et la couleur est celle du voile.

6. Représentation d'une case
   

   Comme expliqué dans les sections qui précèdent, la représentation graphique d'une case est paramétrée par trois éléments :

   1. l'image de fond de la case,
   2. l'éventuelle rotation appliquée à la case,
   3. la couleur de l'éventuel voile recouvrant la case.

   Ces trois éléments dépendent d'un assez grand nombre de valeurs qui changent au cours du temps, comme le contenu du plateau, la frange, la rotation appliquée à la tuile à poser, le fait que le curseur de la souris survole la case, etc.

   Pour représenter ces trois éléments, nous vous conseillons vivement de définir un enregistrement privé, nommé p. ex. CellData, les regroupant. Cela fait, vous pouvez définir, pour chaque case du plateau, une valeur observable contenant l'instance de cet enregistrement correspondant à la case. Comme cette valeur observable dépend de plusieurs autres valeurs observables, et pas d'une seule, il n'est pour une fois pas possible d'utiliser map pour la définir. Au lieu de cela, il vous faut utiliser la méthode createObjectBinding de la classe Bindings, que l'on peut voir comme une variante de map généralisée à plusieurs arguments.

   Le premier argument passé à createObjectBinding est une lambda sans argument dont le but est de calculer la valeur observable à créer, généralement en fonction de plusieurs autres valeurs observables. Les autres arguments de createObjectBinding sont toutes les valeurs observables utilisées dans la lambda.

   Par exemple, admettons que l'on dispose de deux valeurs observables, string1O et string2O, contenant des chaînes de caractères, et que l'on désire créer une autre valeur observable contenant la concaténation de ces chaînes. Cela peut se faire ainsi :

   ObservableValue<String> string1O = …;
   ObservableValue<String> string2O = …;
   
   ObservableValue<String> string12O = Bindings
     .createObjectBinding(() -> {
         return string1O.getValue() + string2O.getValue();
       },
       string1O,
       string2O);
   

   Comme cet exemple l'illustre, createObjectBinding permet de faire quelque chose de similaire à ce que l'on fait dans un tableur lorsqu'on place une formule dans une cellule, la formule en question étant le corps de la lambda. Une différence importante est qu'un tableur peut lui-même déterminer les dépendances de la formule (ici string1O et string2O), alors qu'elles doivent être passées explicitement à createObjectBinding.

   Notez que, comme dit plus haut, l'une des choses dont dépend la représentation d'une case est le fait que le curseur de la souris la survole ou non. Cette information est disponible sous la forme d'une propriété nommée hoverProperty que tout nœud JavaFX possède.