Sakina Douiou - Hilary Emboulé - L3

Dans le cadre de ce projet de dispositif interactif, nous avons voulu réaliser un jeu inspiré des jeux en ligne pour enfants, ou encore des pêches aux canards des fêtes foraines. Ainsi nous avons choisi de mettre en scène un petit renard, qui constitue le personnage principal et a pour mission d’attraper le plus de poissons possibles avec sa canne à pêche, dans un temps imparti.

En ce qui concerne le visuel du projet, nous avons dessiné un décor frontal représentant un environnement de montagne avec un lac qui s’étend jusqu’au premier plan. Le renard est lui, assis sur une barque en train de pêcher  avec sa canne à pêche dans cet environnement naturel. Pour compléter ce décor et surtout mettre en oeuvre le jeu, nous avons décidé de faire défiler des poissons sous l’eau, eux aussi dessinés avec différentes formes et couleurs. Ces poissons doivent être attrapés par le renard en faisant descendre ou remonter la ligne de sa canne à pêche. L’objectif du jeu est donc pour le renard Prouprou d’attraper un maximum de poissons en 40 secondes, afin de faire ses provisions pour l’hiver. Il doit cependant faire attention à ne pas trop descendre sa ligne car celle-ci risque de remonter brusquement et de laisser échapper le poisson ! 

La mission du renard est réalisée par l’utilisateur à l’aide d’un seul capteur : un potentiomètre rotatif permettant de descendre ou remonter la ligne, à la manière du moulinet d’une canne à pêche. Une fois que le bout de la ligne est positionné sur les coordonnées correspondantes au poisson, ce dernier est attrapé et l’utilisateur gagne 1 point. L’idée du déplacement de la ligne pour attraper le poisson pourrait s’apparenter au fonctionnement des machines à pinces à la fête foraine. Nous avons également ajouté un bouton afin de pouvoir lancer plus facilement le jeu au début. Alors le branchement s’est fait de cette façon : 

Pour ce qui est du côté sonore, nous n’avions pas pour projet de travailler le son dans Max comme un paramètre variable, mais seulement d’apporter une musique d’ambiance et des bruitages en lien avec le jeu et les actions de l’utilisateur. Pour éviter une ambiance sonore trop importante, nous avons limité notre choix de sons à une musique d’ambiance enfantine, qui rejoint l’ambiance visuelle du projet, et un bruitage de bulles lorsque le poisson est attrapé. Cela vient compléter le visuel du projet et donner plus d’interactivité au jeu que si nous l’avions laissé dans le silence. 

En ce qui concerne les logiciels que nous avons utilisés, nous avons travaillé exclusivement sur Max en ce qui concerne la partie « code », tandis que l’aspect visuel du projet a été principalement réalisée sur des logiciels de la suite Adobe tels que Photoshop, Illustrator ou encore After Effects pour les animations. L’idée était donc de mixer images/vidéos externes à Max tout en apportant directement sur l’image des variations réalisées sur Max. Ainsi, nous avons superposé l’image de fond, qui représente le décor de montagne avec le renard assis sur sa barque, avec une image à l’avant sur laquelle les poissons défilent, mais aussi ajouter l’animation de la canne à pêche qui descend ou remonte, en fonction des données envoyées par le capteur rotatif. En terme de fonctionnement, les poissons ont chacun des coordonnées x, y en fonction de leur déplacement sous la ligne de la canne à pêche, et ce sont ces coordonnées qui doivent être atteintes par l’utilisateur en faisant varier la longueur de la ligne. Il y a également un minuteur qui limite la durée du jeu et un compteur de points. 

Enfin, en ce qui concerne la présentation du jeu dans l’espace, nous n’avons pas spécialement pensé à une mise en scène particulière, car le principe d’un jeu sur ordinateur avec des capteurs nous convient assez, mais cela pourrait s’étendre à un jeu sur télévision ou même projeté en grand. Sinon, cela pourrait être un jeu que l’on installe dans une borne ; les capteurs prendraient alors tout leur sens en étant à part entière dans le jeu, et non pas simplement ajoutés à un ordinateur. 

Avant de commencer à réaliser le patch final, nous avons réalisé un schéma fonctionnel afin de définir les différentes étapes du jeu et son fonctionnement global, de façon à ne rien oublier et que cela fasse sens dans notre esprit pour pouvoir le retranscrire avec le patch. Nous partons donc d’un écran d’accueil suivi d’une transition vidéo qui amène au début du jeu. Une fois le jeu commencé l’utilisateur a globalement 2 possibilités : attraper le poisson ou le laisser s’échapper. S’il attrape le poisson en positionnant correctement sa ligne, ce même poisson disparaît immédiatement et laisse place au poisson suivant. S’il n’attrape pas le poisson, ce dernier continue sa route, ce qui peut durer 6 ou 7 secondes en fonction de sa vitesse, ce qui ralentit le joueur dans sa progression puisque le minuteur est toujours en marche. Il est donc pénalisé en n’attrapant pas le poisson puisqu’il doit attendre que celui-ci ait fini de traverser avant d’avoir une nouvelle chance d’attraper le poisson suivant. Ce dispositif de changements de poissons se poursuit jusqu’à la fin du jeu.

En ce qui concerne l’aspect technique, et donc le patch, la première étape a été de trouver comment faire varier la longueur d’un trait, d’une ligne avec des paramètres variables. Avec quelques recherches nous avons trouvé l’objet « lcd » qui nous permettait de définir une ligne avec des coordonnées x, y et ainsi de faire varier les coordonnées y avec les données du capteur. Il y avait également la possibilité d’un fond blanc ou d’une transparence, ce qui était intéressant avec ce qu’on voulait faire.

En ayant réussir à créer une ligne variable, il fallait maintenant voir comment superposer cette ligne interactive avec l’image de fond du renard et les images des poissons qui défilent. Pour superposer la ligne et le fond avec le renard, nous avons créé un jit.movie avec l’image de fond afin de mixer les deux avec un jit.op. Nous avons aussi essayé  de mixer le jit.movie du renard avec un jit.lcd du poisson, pour que le tout se mixe dans le jit.op final.

Si la technique semblait fonctionner, il fallait cependant réussir à faire bouger le poisson, nous avons donc essayé de le faire dans le lcd, comme cela avait été fait pour la ligne.

Le résultat n’était pas très propre malgré toutes les recherches sur ces objets qu’on ne connaissait pas, le résultat était très saccadé voire ne s’affichait plus du tout. Nous avons ensuite découvert jit.gl.layer qui nous a permis de réaliser ce qu’on voulait. Il fallait donc d’abord activer un jit.movie pour lire l’image de fond, l’image du poisson et une image png d’une ligne noire. Cette dernière ligne est alors animée selon sa taille avec tex_scale_y qui varie en fonction des données du capteur qui s’adaptent au projet grâce à un scale. En ce qui concerne le déplacement du poisson, on utilise un offset_x qui fait varier la position du poisson sur l’axe des x, qu’on applique ensuite à un jit.rota pour permettre le mouvement. Les 3 images se rejoignent en 3 calques avec le jit.gl.layer dans le jit.world qui affiche l’image finale.

Tous les patchs présentés étaient des patchs de test au début afin d’obtenir le fonctionnement qu’on recherchait. Le patch avec le jit.gl.layer est celui qui a le mieux fonctionné et qui était le plus facile d’utilisation pour faire varier la ligne et le déplacement du poisson. Nous l’avons alors repris pour réaliser le patch final qui se découpe en plusieurs parties : captation, début et retour au début, étapes à partir de l’état initial, étapes avec changements de poissons, compteur de point et minuteur. Nous pouvons avoir une vision d’ensemble du patch qui est assez étendu :

On retrouve l’insertion des images dans une première partie avec le jit.movie auquel toutes les images en rapport avec le fond sont reliées pour être affichées. Les images qui se superposent au fond ont leur propre jit.movie, mais tout est relié en calques avec le jit.gl.layer. Il y a également un coll pour les différents poissons qui vont apparaître, de façon à faciliter les changements.

Le patch fonctionne avec différentes étapes à commencer par le lancement. On retrouve alors un loadbang qui active en boucle la musique de fond et permet de déclencher l’étape 0, à savoir l’écran d’accueil qui donne la consigne du jeu, et nécessite le déclenchement du bouton pour amener une transition qui se poursuit automatiquement par un décompte, jusqu’au lancement du jeu. L’arrivée à l’étape 2 qui correspond au lancement du jeu permet de déclencher et d’afficher le compteur de points ainsi que le minuteur de 40 secondes. 

En ce qui concerne le compteur de points et le minuteur de 40 secondes, ayant du mal à obtenir le résultat que nous recherchions, nous avons pu avoir l’aide de Xuan. Pour le minuteur le décompte et l’affichage sont divisés entre les dizaines et les unités, les chiffres sont des images en png affichées grâce à un coll dont le nombre change en fonction du counter. À la fin du décompte le minuteur envoie un message qui stoppe le compteur de points ainsi que tout le défilement des poissons. Le jeu repose alors sur ce décompte des secondes puisque tout s’arrête lorsque le temps est écoulé. Concernant le compteur de points, le principe des dizaines et des unités se répète, avec le principe du coll pour afficher des images png avec les valeurs demandées. À la fin du minuteur ou pour relancer le jeu, il fallait cacher les chiffres affichés, c’est pour cela on envoie une image vide dans l’affichage des images des chiffres afin de les cacher, sans pour autant les supprimer pour qu’ils soient à nouveau visible lorsque le jeu est relancé.

Si le jeu repose sur le minuteur pour définir le temps d’affichage du jeu, le principe en lui-même repose sur les coordonnées des poissons, pour permettre au joueur de gagner des points. La ligne ayant toujours les mêmes coordonnées x, ce sont les coordonnées y qui varient avec les données envoyées par le capteur. Nous voyons ci-dessous que les données du capteur sont distribuées avec les cordes rouges sur les différents poissons et leurs coordonnées. En ce qui concerne les coordonnées de la canne à pêche, on fixe (en jaune) un minimum et un maximum pour sa position y, la valeur envoyée par le capteur devra donc être comprise entre ces deux valeurs. Ce n’est pas tout, la valeur du capteur devra aussi être comprise entre les valeurs (en rose) de la position x du poisson. Les coordonnées du poisson sont récupérées avec le receive Xpoisson** dont le send est dans l’autre partie du patch. Il y a donc plusieurs conditions qui entrent en jeu pour que le point soit validé. Si les coordonnées de la canne à pêche correspondent aux coordonnées demandées en y, et au même moment les coordonnées du poisson correspondent aux coordonnées demandées ; cela envoie un bang qui ajoute 1 point, déclenche le son des bulles et transmet le bang vers le reste du patch pour changer de poisson.

Une fois que le bang est envoyé, on arrive dans la partie du patch où on procède au changement de poisson. On retrouve le send Xpoisson** en turquoise, dont le receive Xpoisson** était présent dans l’explication précédente. En changeant de poisson grâce au « r poisson0* » (en vert), cela désactive le mouvement et la position du poisson précédent grâce au message 0 envoyé sur le « line ». Le receive permet aussi de déclencher la position et le mouvement du nouveau poisson, ainsi que de supprimer le delay 6000 ou 7000 imposé si jamais le poisson n’est pas attrapé. Ainsi, le poisson suivant apparaît immédiatement sans attendre la fin de son passage, envoyant un message pour choisir l’image dans le coll et en déclenchant le metro qui gère le passage du nouveau poisson.

Alors, l’enchaînement des poissons fonctionne un peu comme un enchaînement d’étapes puisque la fin du passage d’un poisson envoie le poisson suivant. 

En ce qui concerne la fin du minuteur et donc la fin du jeu, un bang est envoyé qui se retrouve dans le « receive fin » (en jaune fluo) qui coupe le metro de tous les poissons pour s’assurer qu’on puisse revenir à zéro pour recommencer normalement le jeu.

En ce qui concerne la répartition du travail, nous avons globalement travaillé ensemble même si Sakina s’est davantage occupée du patch et du visuel d’arrière-plan, et Hilary s’est davantage occupée de tester le patch, d’enregistrer les données du capteur en playback selon les situations voulues et a réalisé les poissons.

Voilà la présentation vidéo du dispositif !