J'ai créé un RPG 3D pour mon fils pour son anniversaire — et il tourne dans le navigateur

Cela n'a pas commencé comme un projet d'agence. Cela a commencé comme un cadeau. Je voulais offrir à mon fils quelque chose pour son anniversaire — quelque chose qui ne pourrait pas être acheté dans un magasin de jouets —, alors je me suis assis pour lui construire un monde entier : un RPG 3D où un chat esprit explore un royaume de style anime. Il s'appelle CHATTE — Le Royaume de Nekoheim, et le meilleur est qu'il tourne directement dans le navigateur, sans installation, gratuit, depuis l'ordinateur ou le mobile.

Je me suis amusé énormément à le créer, et techniquement, c'était un défi magnifique. Je vous raconte comment je l'ai créé.

Un monde 3D qui s'ouvre avec un clic

CHATTE est créé avec Three.js (WebGL) : rendu 3D en temps réel, dans le navigateur, sans plug-in ni téléchargement. Vous ouvrez un lien et vous êtes déjà à l'intérieur du monde, en cours d'exécution à 30-40 FPS même sur un mobile de milieu de gamme. C'est la partie que j'adore : un RPG avec un monde ouvert, un cycle jour/nuit et des personnages animés, qui se charge comme une page web.

Le protagoniste est un chat tuxedo avec un foulard et une tunique. Vous pouvez parcourir un village de style japonais, un bois de cerisiers en fleur, un lac et un château, et tout change en fonction de l'heure : il y a un cycle jour/nuit réel, avec le soleil, la lune et les lucioles.

D'un prototype grossier à un monde avec une âme

Comme tout, cela n'est pas sorti ainsi de nulle part. La première version du chat était, disons, avec du caractère (les moustaches partaient dans toutes les directions). J'ai itéré le modèle jusqu'à obtenir un modèle beaucoup plus poli : meilleure fourrure, meilleures proportions, un visage qui donne envie de l'embrasser.

Et le monde a grandi couche par couche : d'abord le terrain et le personnage, puis le château, le village, le bois d'automne et le lac. J'y ai ajouté une minicarte, une IHM avec des points de vie, de la mana et des étoiles, et des coordonnées en temps réel pour ne pas me perdre pendant que je le construisais.

Habitants et capacités

Un monde vide n'est pas un monde. Alors, les PNJ sont apparus : des villageois qui se déplacent dans le village et un magicien. Et le chat a gagné des capacités : des danses, un dash pour se déplacer rapidement, miauler et de la magie.

Pour que cela fonctionne sur le mobile

Rien de tout cela ne sert à rien si votre fils ne peut pas l'ouvrir sur son téléphone. Alors, je l'ai rendu réellement réactif : contrôles tactiles, IHM adaptée à l'écran vertical, joystick et boutons d'action à portée de main. Le même monde 3D, dans la poche.

Pourquoi je vous raconte cela (si vous êtes une entreprise)

Parce que c'est, en fin de compte, ce que nous faisons chez PairProgramming, même si l'exemple est un jeu : construire des produits réels, de bout en bout, qui tournent où ils doivent tourner. Si nous pouvons créer un RPG 3D jouable dans le navigateur — avec une optimisation des performances, un 3D en temps réel et une version mobile qui fonctionne —, imaginez ce que nous faisons lorsque l'objectif est votre produit numérique, votre SaaS ou votre plateforme.

CHATTE vit à l'intérieur de ModoJuego, un portail de jeux vidéo, et vous pouvez le jouer gratuitement dès maintenant. Si vous voulez voir la fiche technique, elle est dans notre portfolio. Et si vous avez une idée de produit numérique — aussi étrange qu'elle puisse paraître —, écrivez-nous : nous réalisons les meilleures idées.

Le détail qui ne se voit pas dans le code

Il y a un coin de Nekoheim qui n'est pas dans aucun journal des modifications : un endroit du monde dédié à la personne pour laquelle j'ai fait tout cela. Parce que, finalement, la meilleure technologie n'est pas celle qui impressionne, c'est celle qui dit quelque chose.

---

Par Esteban Aleart, Fondateur et Ingénieur en chef chez PairProgramming.