Pixel

L’histoire du Coding Game 9 Weeks développé en 48 heures

12/10/2018

Lors des deux jours réservés pour le lancement de 9 Weeks (voir l’article complet des 2 jours ici), Eric et Guillaume ont décidé de choisir parmi les sujets proposés l’amélioration du recrutement chez Frianbiz grâce à un coding game.

Notre idée : Développer un jeu de rôle en 2D qui pourrait immerger le/la futur.e candidat.e dans l’ambiance Frianbiz en l’amusant, nous permettant de tester ses connaissances et ses compétences en essayant de lui faire oublier le côté évaluation souvent lourd et stressant. L’évaluation se ferait via des questions libres, à choix multiples ou des challenges de code. Plan des bureaux

L’histoire du jeu

Notre idée était que le/la candidat.e, dans la peau de “Super Dev”, viendrait en aide de l’équipe Frianbiz pour soutenir chaque “Super Dev” face aux technologies qui tentent de s’échapper des locaux pour semer le chaos. Il/elle rentre dans nos locaux accueilli par Frédéric “Super Normandie” qui lui suggère d’aider l’équipe.

Pour ajouter une touche d’humour au jeu, chaque développeur de l’équipe s’est vu attribué un héro basé sur un trait exagéré qui le caractérise et une technologie en fonction du domaine où il est le plus à l’aise dans son travail. Par exemple, Eric étant le plus vieux de l’équipe est devenu “Super Vieux” et fait face au Javascript/Typescript, et étant le maigre de l’équipe, je suis devenu “Super Maigre” et je fais face à Android.

En parlant aux personnages, le/la candidat.e aura alors le choix de répondre aux questions des technologies qu’il préfère. Illustration de Super Vieux Après avoir répondu à quelques questions, il serait proposé au/à la candidat.e de postuler via un formulaire où il pourrait donner toutes informations nécessaires à sa candidature (nom, email, téléphone, CV, liens utiles, un avis sur le jeu, etc…).

Modélisation

Avant même de commencer la journée, et avant même d’écrire la moindre ligne de code, nous avions besoin d’imaginer vraiment quelle tête le jeu aurait. Je l’avoue, j’ai passé quelques heures avant les 2 jours de code à préparer les visuels du jeu (C’est un peu tricher, c’est vrai, mais nous n’aurions pas pu sortir le jeu avec 10 heures de développement en moins). J’ai utilisé le logiciel aseprite, un outil vraiment puissant pour ce genre de tâche. La maquette finale du jeu

Le moteur du jeu

Nous avions tout ce qu’il nous fallait pour commencer les 48 heures de code dans de bonnes conditions, une idée, une maquette, et deux développeurs motivés à sortir un projet. La première journée était donc essentiellement du développement technique, nous permettant de faire marcher le jeu mais sans son contenu.

L’environnement

J’ai commencé par intégrer dans le jeu les visuels, grâce à PixiJS qui est un moteur de rendu 2D simple et puissant. Puis j’ai développé le système de déplacement avec le clavier et les collisions pour rendre l’expérience un minimum réaliste, ce serait bête de pouvoir se déplacer sur les murs, les tables ou même les personnages.

Pour vous épargner des lignes de code, j’ai ajouté des événement sur les touches du clavier Z.Q.S.D, et tant qu’elles sont appuyées je modifie les coordonnées (x,y) du joueur dans l’environnement. Si ces coordonnées rentrent en collision avec les coordonnées d’un personnage, d’une table ou d’un mur, alors tout déplacement est annulé.

Les intéractions

Eric s’est occupé de développer l’interface de discussion avec les personnages, c’est à dire une fenêtre d’introduction devant afficher une phrase d’introduction du “Super Dev”, le choix des sujets, puis les différents types de questions : questions ouvertes, QCM, challenges de code. Une discussion avec un personnage se découpe de la façon suivante :

  • Introduction + choix des sujets
  • (au clic sur un sujet) Question/problème + champ de réponse En appuyant sur la touche ESPACE du clavier et grâce au système de collision, il a pu savoir quelle conversation lancer. Par exemple si je rentre en collision avec le personnage “Super Vieux” et que j’appuie sur ma touche espace, voici la fenêtre qui s’affiche sur mon écran : Fenêtre d’introduction du personnage “Super Vieux”

Les questions

Le lendemain matin nous avions un jeu fonctionnel mais vide, notre objectif était de le remplir de quelques questions drôles et pertinentes permettant d’évaluer les différents sujets :

  • Son appréhension du métier de développeur, avec des questions ouvertes.
  • Sa connaissance des différents domaines proposés, avec des questions de code et QCM.
  • Sa capacité d’autonomie, de recherche, avec tout type de question, plus ou moins difficile, sachant que les réponses se trouvent sur internet.
  • Sa curiosité, un peu relié à sa capacité de recherche, et des questions libres sur sa façon d’effectuer sa veille techno.
  • Son humour, via les phrases et les situations absurdes ou exagérés que proposent les personnages. Interface d’un challenge de code

Par faute de temps et d’expertise sur certains domaines, nous n’avons rempli que quelques questions à titre d’exemple pour que l’équipe Frianbiz nous aide à remplir le jeu. (Aujourd’hui le jeu comporte 35 questions qui ont été proposées et relues par l’équipe)

Au fur et à mesure que le/la candidat.e répond aux questions, les réponses sont mémorisées et seront formatées avant d’être envoyées avec sa candidature.

L’évaluation

Pour finir notre journée de code, nous devions intégrer la fin du jeu, c’est à dire la dernière interaction avec le personnage de Frédéric Salley “Super Normandie”, et l’ouverture du formulaire pour postuler qui nous sera envoyé par email.

Au bout d’un certain nombre de réponse, une fenêtre s’ouvre indiquant qu’il est possible d’aller lui parler pour postuler, mais qu’il est conseillé d’aider un maximum de “Super Dev” (pour avoir une meilleure candidature) : Super Normandie accepte maintenant les candidatures En allant voir “Super Normandie”, le formulaire suivant s’ouvre Formulaire de candidature Grace à l’email qui nous est envoyé, nous pouvons avoir un premier aperçu des compétences du/de la candidat.e et de le/la contacter pour un potentiel entretient ou pour l’encourager à continuer ses recherches si son profil ne correspond pas à nos attentes.

Bilan

Le développement du jeu était un excellent défi, que ce soit visuellement ou techniquement. Nous avons beaucoup rigolé en modélisant nos locaux et l’équipe en personnages exagérés avec des phrases d’introduction absurdes.

Aujourd’hui le jeu est en ligne à l’adresse suivante http://coding-game.frianbiz.com.

Nous avons reçu plusieurs candidatures avec de bons retours sur le côté amusant, ce qui est très encourageant pour l’améliorer et gratifiant pour notre travail.

#9weeks
#Continuous Improvement
red pixel blue pixel