Experiment #2 – Surway, a social experiments game

Auteur(s) de l'article

Après une première expérience mêlant cartographie 3D et intelligence artificielle, nous sommes fiers de vous présenter notre nouvelle réalisation : surway.

Hors zone

La première fois, nous étions en terrain connu, forts de nombreuses années d'expérience avec la cartographie web. Cette fois, nous avions envie de sortir de notre zone de confort et de nous mettre au défi d'aborder un segment du développement peu exploré en interne : le développement de jeux vidéo. Au premier abord, cela peut sembler radicalement différent de ce que nous faisons au quotidien en développant des sites et applications web, et dans un sens cela peut l'être selon la technologie et le moteur de rendu choisi. Par exemple, Unreal Engine utilise C++ comme langage de programmation, très loin de nos langages web. Dans notre cas et malgré l'envie de repousser nos limites, nous avons opté pour une approche plus raisonnable avec les huit jours que nous avions à disposition pour la prise en main et la réalisation design et développement.

Des technologies web

Nous sommes avant tout une agence web qui a à cœur d'évoluer au sein de la plateforme. Cela n'aurait donc fait aucun sens de vous demander de télécharger notre jeu sur Steam pour pouvoir l'essayer. Nous avons donc opté pour une approche combinée de TypeScript comme langage de programmation, de React pour gérer l'interface utilisateur, de Phaser comme moteur de jeu et du Grid Engine pour gérer la physique et les déplacements. Avec ces technologies partiellement connues, livrer une première version semblait déjà plus réaliste.

L'IA jamais très loin

Même s'il n'y a pas de composante d'intelligence artificielle dans cette expérience, rien n'aurait été possible sans le développement agentique. En effet, rien que l'apprentissage de Phaser aurait absorbé les cinq jours de développement disponibles. Donc après avoir mis en place l'architecture technique du jeu, nous avons appliqué systématiquement, pour chaque fonctionnalité, le même processus : élaboration d'un plan de développement (ARD), exécution et réalisation du plan par l'agent de développement et revue du code par l'humain responsable de la partie technique. Cette approche présente le gros avantage d'être capable de livrer sans devoir totalement maitriser l'écosystème technique dans lequel s'inscrit un projet. En revanche, le gros inconvénient c'est qu'il faut avoir déjà de solides connaissances en développement pour être en mesure de juger le résultat produit et les concepts appliqués.

Le concept

Durant la phase de recherche, nous avons exploré plusieurs pistes, toutes menant vers l'idée de laisser une trace dans un monde virtuel, mais social, le web en soi. Maintenant, imaginez le résultat de laisser un tableau d'affichage à disposition des internautes sans processus lourd de modération, voilà... L'idée était de proposer un jeu avec différents niveaux où le joueur, dès la fin du premier niveau, prend conscience que les actions des autres restent inscrites et rendues visibles à tous. Nous avions envie de jouer avec cette dualité : le joueur n'agit plus seulement pour lui-même, mais aussi en conscience de la trace qu'il laissera. Chaque niveau propose une idée différente, avec pour but d'observer les actions des uns et des autres, conscients que leurs actions seront vues.

Aussi mobile

Un autre défi, comme pour tout projet web qui se respecte, était de proposer une expérience mobile aussi bonne que sur desktop. On oublie donc le clavier physique ou même les horribles boutons émulés dans l'interface; nous avons mis en place un système de déplacement relativement permissif, à la fois point'n click et/ou drag and drop. Cela permet au joueur de se déplacer de manière fluide à l'aide d'un seul doigt, en restant au format vertical, beaucoup plus confortable à l'usage.

Esthétique

L'interface assume pleinement son parti pris esthétique : elle renoue avec le langage visuel des premières interfaces numériques, celles de l'ère 2-bit, où chaque pixel comptait et où le minimalisme n'était pas un choix de style mais une contrainte technique. Pas d'animations superflues, juste une typographie monospacée et une palette de couleurs restreinte. Le visuel devient presque un protocole, un espace neutre qui rend les choix humains d'autant plus saillants.

Sky's the limit

Antistatique est (re)connue pour ses réalisations institutionnelles et médias pour lesquelles nous avons de grandes compétences. L'idée ici était de proposer une expérience pour laquelle on ne nous connait pas, aux antipodes de nos réalisations habituelles. Aussi pour démontrer qu'avec la plateforme Web il est possible de tout faire et que nous sommes capables de répondre et de réaliser tout ce qui s'inscrit dans cet écosystème plein de promesses et de possibilités, même sur des terrains pour lesquels nous ne sommes pas encore (re)connus.