Développement de ‘Junk Wars’ : Création d’un jeu de prop hunt en deathmatch avec Vibe Coding

Aujourd’hui, je vais vous emmener dans les coulisses du développement de ‘Junk Wars’, un jeu de type prop hunt avec des mécaniques de deathmatch que je crée dans le cadre du défi Vibe Jam. Ce projet combine la programmation assistée par IA (ce que j’appelle « Vibe Coding ») et des technologies web modernes pour créer une expérience de jeu unique.

État actuel du projet

J’ai réalisé d’importants progrès depuis ma première diffusion en direct. Laissez-moi vous montrer où en est le jeu actuellement.

Le jeu se présente comme une décharge où les joueurs incarnent différents objets (des « junk items »). L’une des principales avancées a été la configuration de la carte de hauteur (height map), qui a considérablement simplifié la création du terrain de jeu. Si vous envisagez de développer un jeu avec Three.js, je vous recommande vivement d’explorer les height maps – elles m’ont permis de configurer l’ensemble du terrain beaucoup plus rapidement que mes tentatives précédentes.

J’ai également ajouté des ennemis qui sont actuellement des PNJ (personnages non-joueurs). L’objectif final est d’intégrer un mode multijoueur, ce qui est l’une des fonctionnalités prévues pour aujourd’hui.

Fonctionnalités déjà implémentées

Voici un récapitulatif des fonctionnalités que j’ai développées jusqu’à présent :

Height maps pour la génération du terrain

Mécaniques de tir permettant aux joueurs d’attaquer
Divers objets de décharge (« junk assets ») pour représenter les joueurs
Mécaniques de caméra pour une bonne perspective de jeu

Billboarding des objets pour qu’ils s’orientent toujours vers la caméra
Skybox pour l’arrière-plan
Sols texturés avec différentes apparences selon les zones

Nouvelles fonctionnalités à développer

Pour la suite du développement, j’ai prévu d’ajouter :

Des explosions plus impressionnantes
Des effets sonores

Un mode multijoueur avec serveur et communication par WebSockets
Des contrôles mobiles pour permettre de jouer sur smartphone
Une mécanique de changement de forme pour les joueurs

Implémentation du changement de forme

L’une des premières fonctionnalités que je souhaite ajouter est la possibilité pour le joueur de changer d’apparence en appuyant sur la touche Contrôle. Cette mécanique aura un temps de recharge de 15 secondes, qui sera communiqué visuellement à travers l’interface utilisateur.

Cette mécanique est particulièrement intéressante car elle permet une dimension stratégique : si vous ramassez des munitions et alertez d’autres joueurs de votre position, vous pouvez vous cacher puis appuyer sur Contrôle pour devenir un objet différent, brouillant ainsi les pistes.

Amélioration de l’éclairage

J’aimerais également améliorer l’éclairage du jeu pour donner plus de profondeur à la scène, en illuminant davantage les objets proches de la caméra. J’ai extrait le code d’éclairage dans un fichier séparé pour faciliter les modifications.

Processus de développement avec Vibe Coding

Ma méthode de travail consiste à développer plusieurs fonctionnalités en parallèle en utilisant l’IA pour accélérer le processus. Je travaille sur deux instances de code simultanément, en passant de l’une à l’autre pendant que l’IA génère du code.

Cette approche me permet d’être productif même pendant les temps d’attente. Pendant qu’une fonctionnalité est en cours de développement sur une instance, je peux travailler sur une autre fonctionnalité sur la seconde instance.

Exemple : Développement de la mécanique de changement de forme

Pour la mécanique de changement de forme, j’ai demandé à l’IA de créer une fonctionnalité permettant au joueur de se transformer en appuyant sur la touche Contrôle, avec un temps de recharge de 15 secondes. L’IA a généré le code nécessaire, mais j’ai dû lui demander d’ajouter la détection de la touche Contrôle car cela manquait dans la première version.

J’ai également demandé de déplacer les éléments d’interface utilisateur dans un fichier séparé et d’améliorer l’apparence du bouton de transformation pour le rendre plus esthétique, avec un effet de pulsation lorsque le temps de recharge est presque terminé.

Mort et réapparition du joueur

Une autre fonctionnalité importante est le mécanisme de mort et de réapparition. Quand le joueur est touché, il doit voir un écran de superposition et avoir la possibilité de réapparaître à un endroit aléatoire sur la carte.

J’ai également ajouté une période d’invincibilité et d’invisibilité de 5 secondes après la réapparition, avec un compte à rebours affiché au centre de l’écran. Pendant cette période, le joueur ne peut pas tirer, et les ennemis ne devraient pas pouvoir le voir ou lui tirer dessus.

Déploiement du jeu

Une étape importante était de déployer le jeu pour que vous puissiez y jouer. J’ai utilisé Vite comme outil de build moderne pour optimiser le code et les assets, puis j’ai déployé le jeu sur Cloudflare Pages.

J’ai rencontré quelques difficultés lors du déploiement, principalement liées à la façon dont le canvas était dimensionné, mais après quelques ajustements, le jeu est maintenant accessible à l’adresse junkwars.net.

Processus de déploiement

Installation de Vite : npm create vite@latest

Configuration du projet pour utiliser Three.js
Adaptation des imports d’assets pour utiliser la syntaxe Vite
Construction du projet : npm run build

Configuration de Cloudflare Pages pour se connecter au dépôt GitHub
Configuration de l’intégration continue pour déployer automatiquement à chaque push sur la branche principale

Gestion des branches et des conflits

Travailler sur plusieurs fonctionnalités en parallèle nécessite une bonne gestion des branches Git. J’ai dû fusionner les branches à plusieurs reprises et résoudre les conflits qui en résultaient.

Par exemple, après avoir développé la fonctionnalité de changement de forme dans une branche et la mécanique de mort/réapparition dans une autre, j’ai dû fusionner ces changements. Cela a créé des conflits dans les fichiers de contrôle et de jeu, que j’ai résolus en m’assurant que les éléments d’interface utilisateur étaient correctement intégrés dans le nouveau fichier UI.

Prochaines étapes

Bien que le jeu soit maintenant jouable en solo, il reste encore beaucoup à faire :

Finaliser le mode multijoueur

Ajouter des effets sonores
Améliorer les hitboxes pour qu’elles correspondent mieux aux différents types d’objets
Créer un mécanisme anti-camping pour encourager le mouvement

Améliorer la logique de visée pour rendre le tir plus intuitif
Ajouter plus d’objets de décharge variés

Conclusion

Le développement de Junk Wars illustre parfaitement comment l’approche « Vibe Coding » peut accélérer le processus de création de jeux. En travaillant avec l’IA pour générer du code tout en gardant le contrôle créatif, j’ai pu développer un prototype jouable en très peu de temps.

N’hésitez pas à essayer le jeu sur junkwars.net et à me faire part de vos commentaires. Je prévois de continuer à améliorer le jeu et à ajouter de nouvelles fonctionnalités dans les prochains jours.

Si vous êtes intéressé par le développement de jeux avec Three.js ou par l’utilisation de l’IA dans le processus de développement, restez à l’écoute pour d’autres streams et vidéos sur ces sujets.

Featured image by Ryan Quintal on Unsplash