Side-project : XMoto en HTML5

Quand on est consultant et que l'on passe ses journées à développer les projets de ses clients, à un moment, on a envie de prendre un peu de recul et de se lancer dans le développement d'un petit side-project.

Les side-projects

J'ai toujours eu ces side-projects à côté de mon activité principale. En secondaires, je compensais déjà le manque d'intérêt pour les cours en apprenant à modéliser en 3D le soir pour un jeu vidéo qui n'est jamais sorti (le premier screenshot est de moi), et où j'apprenais à écrire des scénarios en cours de chimie… Ce sont ces petits projets qui me motivaient à me lever le matin.

Souvent, les side-projects n'ont pas de grandes ambitions. Pas besoin de viser une rentabilité ou un succès immédiat, il faut juste y prendre du plaisir et rechercher une certaine visibilité (c'est bon pour le moral !). Ils commencent par une impulsion soudaine suivie d'un week-end de développement « juste pour voir ». Puis, la plupart des projets s'épuisent par manque d'intérêt ou de temps. Parfois — peut-être une fois sur dix — il y a un projet qui sort du lot et que l'on prend beaucoup de plaisir à retrouver jour après jour.

C'est ce qui m'était arrivé avec des petits jeux comme PonGL, ISokoban ou plus récemment Sokoban, un petit jeu social en ligne qui a regroupé en quelques mois 2 000 joueurs qui ont déjà résolu plus de 60 000 niveaux (moyenne de 2 000 niveaux résolus par semaine).

Un nouveau side-project : XMoto

Boosté par l'impact, par la visibilité et par l'aspect communautaire des jeux sociaux, j'étais à la recherche d'un autre jeu à développer et à « sociabiliser ». Sodoku ? Frozen Bubble ? Démineur ? Rien de très excitant ni de très social. Et puis j'ai repensé à un jeu auquel on jouait à l'université, un jeu conçu pour être social, un jeu dont le but est de faire un parcours à moto et d'obtenir un meilleur temps que ses amis (représentés par des motos « fantômes ») : XMoto. Vu le succès immédiat qu'il avait eu dans ma classe, il était le candidat parfait pour ce side-project.

Petit souci, c'est un jeu nettement plus compliqué à développer qu'un simple sokoban ou sudoku… Même s'il est Open-Source, le code est en C et date de 2003. Si je voulais l'adapter au web, le plus simple était de tout redévelopper de zéro. Tout ? Pas vraiment. Avec le temps, des librairies dédiées à la gestion de la physique sont apparues. Parmi celles-ci, Box2D, connue pour être utilisée dans le jeu Angry Birds.

Avec HTML5 et la librairie Box2D, je me donnais quelques jours pour obtenir un résultat convaincant. Sans quoi je laissais tomber le projet.

Le résultat a dépassé toutes mes espérances. Après 2 jours de développement, je pouvais afficher un des 3 000 niveaux de XMoto dans mon navigateur. Une semaine de plus et je faisais rebondir une balle dans le niveau en fonction de son architecture (pour tester la physique). Deux semaines de plus et j'avais une moto qui roulait, suspensions réalistes comprises. Il ne restait que le pilote à ajouter, ce qui n'était plus qu'une question de temps et de calibration.

En moins d'un mois de travail sur mon temps libre, le jeu était déjà jouable (mais pas encore compatible avec tous les niveaux). Le développement m'a vraiment étonné par sa vitesse et sa facilité. Grâce à des librairies performantes, à aucun moment je n'ai eu l'impression d'avoir un problème insurmontable.

XMoto.io : suivez le développement

Cette « facilité » et la lisibilité du code m'ont poussé à écrire quelques articles décrivant les étapes successives de la création de XMoto. Ces tutoriaux, ainsi que la dernière version fonctionnelle du jeu, se trouvent sur http://xmoto.io

Je vais continuer à écrire des articles et à développer le jeu. L'idéal serait, ainsi, de pouvoir créer une communauté autour du projet.

Mes objectifs sont les suivants :

• Faire un jeu fonctionnel sur tous les niveaux avec une physique réaliste.
• Créer un jeu social où on peut affronter les fantômes de ses amis.
• Mettre en place un mode multijoueurs à la « TrackMania ».
• Créer un éditeur de niveau pour que chacun puisse créer les siens.

Vous pouvez trouver une version fonctionnelle du jeu ci-dessous (elle ne sera pas mise à jour). Elle se joue avec les flèches directionnelles et la barre d'espace pour changer de direction. En cas de chute, la touche Entrée permet de réinitialiser le niveau.

Pour les plus geeks, le code est Open-Source et se trouve sur GitHub

Si vous voulez rejoindre le projet (code, graphisme, son, communauté), n'hésitez pas à me contacter !

EDIT : J'avais fini d'écrire cet article depuis 10 minutes quand j'ai reçu un mail du créateur de XMoto.

It's amazing !
I can't believe it's pure html5.
Don't hesitate to contact me to make it official.

Nicolas Adenis-Lamarre

Ce side-project est bien parti :-)

---

Retour à l'édito