Chez ARCA Computing nous bénéficions de quelques jours de R&D dans l’année. Nous sommes libres de faire ce que l’on souhaite sur ces journées, du moment que c’est pour s’auto-former ou découvrir des choses.
Nous étions donc trois à prendre cinq jours ensemble pour bosser sur un même projet.

Il faut choisir

Le Thème

Nous avons envisagé plusieurs thèmes :

• un site web interactif sur la ville de Bordeaux
• continuer un projet démarré par deux d’entre nous avec l’API Twitter
• améliorer le site de www.kowork.fr
• faire quelque chose avec du hardware
• un jeu vidéo

Comme nous sommes un peu geek sur les bords, le jeu vidéo l’a vite emporté et la techno aussi : HTML5/JS.

Il a ensuite fallu trouver un thème pour le jeu, là encore plusieurs idées ont fusé :

• un jeu sur les développeurs avec des architectes fous (notre boulot de tous les jours finit par laisser des séquelles)
• un jeu de casse brique multi-joueur
• et d’autres encore

Nous sommes partis sur l’idée du casse-brique multi-joueur pour faire du websocket et pouvoir jouer à plusieurs. Jusqu’au matin du premier jour nous étions sur cette idée, mais tout allait changer … [roulement de tambour, sonnez les trompettes] pour un jeu multi-joueur de baston. De la baston rapide et efficace.

Le jeu

Le pitch est loin d’être compliqué : une arène fermée où chaque joueur incarne un personnage avec une épée qu’il peut utiliser pour taper sur les autres, des bonus comme des boules de feu ou des soins, des téléporteurs pour s’échapper rapidement et des ressorts pour faire l’oiseau.

Rien de très original mais un vrai challenge pour nous car il y a pas mal de choses à gérer : le réseau, les collisions, les dégâts, les points de vie, les bonus, les scores, etc.

La techno

Nous avons orienté notre choix autour de 3 axes : productivité, popularité et apprentissage. Le couple HTML5/javascript étant sur le devant de la scène, nous avons composé notre stack technique ainsi :

• Phaser : un framework pour développer un jeu en HTML/JS
• Node.js : le célèbre serveur javascript « event-driven »
• Socket.io : une librairie pour la gestions des websockets (et fallback)

Avant de choisir phaser.io de @photonstorm, nous avions exploré plusieurs pistes :

• Démarrer de rien
• Utiliser Turbulenz, plus puissant, mais plus compliqué et dépendant de l’éditeur
• Utiliser phaser.io mais avec la librairie de moteur physique P2.js, plus efficace sur les collisions mais moins facile à appréhender

Après plusieurs débats et recherches, notament sur le site html5gameengine, nous avons choisi phaser.io pour sa license MIT, son api facile et légère, ses belles démos afin de nous concentrer sur l’essentiel : le fun et le gameplay.

Pour les environnements de développement nous avions tous les trois notre machine (1 Mac et 2 Win) avec chacun ses préférences : Intellij IDEA, SublimeText. Nous étions tous sous Chrome (faut pas déconner, ça dépote pour le JS).

Mais où va-t-on pendant cette semaine ?

ARCA Computing a ouvert l’année dernière un espace de coworking : Kowork. C’était donc tout vu, nous irions dans cette tanière où sont déjà présents des développeurs, des architectes, une commerciale, Yupeek; on se ferait une petite place à trois sur une table en mode « je développe un truc dans mon garage avec des copains ».
Et puis il y a tout ce qu’il faut pour manger et boire autour de Kowork

Les problèmes inattendus

Les sprites

Pour faire notre jeu en 2D il nous faut des sprites, ces images qui en contiennent d’autres comme celle ci :

source : http://stackoverflow.com/a/22269672/1243048

L’avantage du sprite est qu’il est toujours bien intégré dans les frameworks. C’est une méthode vieille comme les jeux vidéos qui permet de gagner en poids (petite pensée pour les cartouches de Gameboy dont la capacité n’excédait pas les 4Mo) et animer un objet/personnage très facilement (quelques explications : sprites sur Wikipédia). Les sprites sont d’ailleurs souvent utilisés sur des sites webs pour épargner de la bande passante.

Donc notre problème a été de trouver des sprites libres. Nous ne voulions pas jouer les voleurs et prendre un sprite comme ça. Il y a bien quelques sites proposants des sprites mais ils étaient :

• pas de la bonne taille (trop petits)
• pas du bon style (nous n’avons pas la fibre artistique mais quand même)
• pas libres de droits

C’est pourquoi vous pouvez jouer à notre jeu avec Mario (et tous les joueurs ont le même sprite). Celui que nous avons trouvé a plusieurs animations et est libre, houra !
Pour l’épée et les niveaux c’était plus simple puisque ce sont des images statiques (nous aurions pu les dessiner nous même, mais nous avons manqué de temps). Le seul sprite maison est le ressort.

Le moteur physique

Phaser.io a intégré plusieurs moteurs :

• Arcade (built-in phaser)
• P2
• Ninja-physics

Les différences sont expliquées sur stackexchange.

Nous avons choisi le moteur classique : Arcade. Les collisions entre le personnage et le monde, ainsi que les overlaps (superposition d’éléments) sur les bonus fonctionnaient bien. Mais lors de l’ajout de l’épée, la hitbox n’était pas du tout celle souhaitée.

Souhaitée

 

Obtenue 

En effet, le moteur physique Arcade utilise un système de collision AABB (Axis Aligned Bounding Box), qui consiste à définir les éléments dans des boites (rectangles) afin de faciliter le test des intersections. Vous comprenez donc que quand on tape un autre joueur, si le joueur adverse est touché par le coin en bas à gauche ça va lui compter une touche, alors qu’il n’a pas été touché par l’image de l’épée.
Nous avions discuté d’un changement de moteur pour P2.js mais le coup d’entrée sur P2 était trop important, nous commencions à nous habituer à Arcade; Guillaume a donc trouvé la meilleure solution pour éviter les injustices : il a utilisé une méthode du sprite (getBounds) qui permet d’obtenir la hitbox souhaitée et peut donc tester la collision entre le joueur et l’épée. La gestion de la collision n’est pas automatique mais elle fonctionne et c’est pragmatique.

Conclusion

Nous vous ferons d’autres retours plus techniques sous peu, par exemple sur notre gestion du multijoueur, l’utilisation de requirejs ou encore sur quelques tips phaser.

Si vous voulez jouer à Baston, c’est par ici : http://powerful-escarpment-8180.herokuapp.com/

Nous avons fait pas mal de modifications après notre semaine mais nous ne sommes pas sûrs d’en refaire d’avantage. Nous allons ouvrir le repo pour que vous puissiez regarder le code et pourquoi pas, pour les plus motivés, faire des pull-requests.

Pour terminer voici un retour personnel de chacun de nous sur cette semaine.

Guillaume

Une vraie bouffée d’air frais!

Cette semaine de R&D a déjà permis de nous connaître un peu plus autant dans la façon de travailler qu’autour de bières ou de burgers… C’est une chose rare dans une SSII et ça m’a notamment permis d’échanger longuement sur nos missions respectives et de revenir sur mon projet actuel super motivé et avec des idées fraîches.

Ensuite, voir ce que peut donner un projet sans aucun cadre externe et en démarrant le développement dès la première heure de réflexion sur le jeu fut très enrichissant: une productivité au top d’autant que tout le monde était hyper motivé et beaucoup de temps passé à refactorer le code pour aboutir à une solution plus orientée objet.

Enfin, au point de vue technique, j’ai pu apprendre sur des technos hors de ma « zone de confort » dans un état d’esprit super positif. Ca aide à apprendre encore plus vite et c’est top!

Morgan

Cette semaine fut très enrichissante, humainement et professionnellement.

Le partage est pour moi une valeur essentielle dans notre métier, et c’est ce que nous permet ARCA durant ces jours de R&D. Bien entendu, il y a toujours les chats, les rencontres ponctuelles entre collègues… Mais ces 5 jours avec Mael et Guillaume m’ont permis d’apprendre, apprendre à les connaitre, comprendre leur façon de travailler et partager nos compétences.

Le jeu, super sujet, j’ai toujours voulu m’y frotter sans avoir le temps le courage de regarder de mon coté. Certes, nous étions conscients que nous n’allions pas développer Starcraft 2 ou League Of Legend, mais je reste persuadé qu’on apprend toujours mieux en s’amusant 😉

Enfin ravi de la techno choisie. Le javascript est un langage que nous cotoyons plus régulièrement en mission au travers des frameworks frontend (backbone, angular…).
Echanger sur le langage dans un autre context m’a apporté de nouvelles compréhensions, trucs et astuces… D’autant plus que j’avais une attente particulière sur le couple node.js/socket.io.

Une seul question, quand est-ce qu’on remet ça ?

Maelig

J’attendais cette semaine depuis longtemps, pouvoir travailler sur du nouveau avec des collègues d’ARCA dans le même espace un peu en mode forfait (on était les clients, c’était facile).

Je me suis bien éclaté sur ce projet, on a touché à beaucoup de choses : websocket, js, angular, phaser, animation de sprites (hey j’ai dessiné les ressorts), des sons, du multijoueur …

Chacun avait des idées sur le jeu mais aussi sur la technique, on a donc beaucoup refactoré mais c’était très instructif et si nous devions refaire un jeu, nous penserions un peu plus avant de nous lancer dans le dev.
Ce fut également une semaine où la diététique n’était pas avec nous et ça aussi c’était sympa.

J’ai vraiment hâte de remettre ça sur d’autres types de projet. C’est une vraie chance d’avoir ces jours chez ARCA, cela nous a permis de sortir du quotidien, de toucher à d’autres technos et de s’améliorer dans d’autres (le js par exemple).

J’ai tellement aimé cette expérience que j’entreprends la création d’un jeu – toujours avec phaser – où il y aura du zombie, des fleurs, de la couleur et du fun (non je ne refais pas Plants Vs Zombies).