Présentation
Afin de gagner en compétence sur React en BDDI aux Gobelins, j’ai reçu la consigne de réaliser une petite application avec cette technologie. Ce projet s’est fait en binôme avec Théo Lemoine. Je souhaitais aussi gagner en compétence sur ThreeJs et nous voulions réaliser un jeu. Nous avons ainsi décidé de faire un Tic Tac Toe (ou morpion) en 3D.
Ergonomie
Un des principaux défis a été l’ergonomie. Comment sélectionner la case sur laquelle on souhaite jouer ? C’est évident en 2D, mais ça l’est moins en 3D avec notamment la cellule centrale qui est piègée entre les 26 autres cellules. N’ayant que quelques jours pour ce projet, j’ai penché pour une solution qui n’augmentait pas beaucoup le temps de développement : l’utilisateur sélectionne une tranche horizontale puis une case précise. Cette sélection s’opérant avec plusieurs actions, j’ai jugé nécessaire de le guider via des feedbacks placés sur le curseur.
Gestion des données
Du côté gestion des données, nous n’avons pas jugé nécessaire d’utiliser Redux pour une si petite application. A la place, nous avons simplement mis à profit les hooks de reducer et de context pour mutualiser et manipuler le contexte de la « grille » de jeu et du jeu en lui-même.
Interface 3D
Pour intégrer ThreeJs à React, nous avons utilisé react-three-fiber, cela a permis de gérer de manière simple les modifications d’affichage des objets 3D. De plus, react-three-fiber dispose d’un wrapper autour du raycast reprenant la syntaxe des événements de souris. Enfin, react-three-fiber supportant les animations react-spring, j’ai pu animer les comportements des objets 3D avec beaucoup de facilité.
Intelligence Artificielle
Théo Lemoine s’occupait principalement du modèle de données, ainsi lorsqu’il avait fini le gros du travail, il s’est attelé à l’implémentation d’une intelligence artificielle. L’algorithme qu’il a choisi est le minimax. Un morpion 3D possédant 3 fois plus de case qu’un morpion 2D, l’algorithme nécessite beaucoup plus de puissance de calcul que d’habitude. Il a donc réduit les itérations sur seulement 4 tours. Afin de ne pas bloquer le thread principal et les rendus WebGL, le script a été exporté sur un WebWorker qui notifie le thread principal lorsqu’il a fini de calculer son coup.
Pour la suite ?
Pour un travail réalisé sur un peu plus d’une semaine, nous sommes satisfait de notre travail. Néanmoins, si le projet était à amélioré, j’ai déjà quelques évolutions en tête. Premièrement, il me semble pertinent de pousser le principe des feedbacks sur le curseur en ajoutant par exemple un indice sur la navigation de l’espace 3D. D’autre part, les performances sont à améliorer. Il serait aussi intéressant d’ajouter un troisième joueur pour rendre le jeu moins prévisible et l’intelligence artificielle pourrait être un joueur à part entière. Enfin, je ne suis pas satisfait de l’apparence finale de ce projet. Bien qu’il s’agît d’un projet à vocation d’apprentissage technique, j’aurais aimé créer un visuel abouti.