La stack technique derrière Code Adventure

Vous souhaitez créer un jeu pour navigateur, en 3D ? Voici les technologies à utiliser !

Article publié le 23/09/2024, dernière mise à jour le 23/09/2024

Cet article fait référence à la conception du premier jeu vidéo d’aventure pour apprendre le code directement depuis son navigateur : Code-Adventure.

Si vous n’avez pas encore testé le jeu, foncez essayer la démo gratuite disponible sur : https://adventure.code-garage.com/

L’objectif ici est simplement de partager les technologies et les outils qui sont rentrées dans la conception du jeu, du moteur graphique, physique jusqu’au multijoueur !

Concernant les ressources 3D, elles ont été modélisées et texturées par le studio Synty, spécialisé dans les assets “low-poly”.

nicolasbrondinbernard_a_videogame_character_in_3D._100_white_ba_773bc621-7b11-488d-9ef7-ef0ea159c93e copy.jpg

Moteur Graphique

ThreeJS

ThreeJS est une bibliothèque + api qui permet d’afficher des éléments 3D dans une application web, basé sur le moteur de rendu WebGL.

Lorsque vous voulez afficher de la 3D dans le navigateur, ThreeJS est aujourd’hui LA solution vers laquelle se tourner.

https://threejs.org/

R3F

R3F pour “React Three Fiber” est un framework pour créer des scènes ThreeJS, directement dans une application React, avec tous les éléments 3D déclarés dans un template JSX.

C’est un outil qui facilite énormément la conception d’une telle application, et qui s’intègre parfaitement avec tout l’écosystème 3D actuel.

https://r3f.docs.pmnd.rs

Drei

Drei est une collection d’utilitaires et d’abstraction pour React Three Fiber, elle apporte de nombreux composants prêts à l’emploi qui vous ferons gagner des heures de travail.

https://github.com/pmndrs/drei

nicolasbrondinbernard_A_sphere._100_white_background._Style_16-_c00b3a82-3ae7-47ad-a4ac-c122d2001202 copy.jpg

Moteur Physique

Rapier (r3/rapier)

Rapier est un moteur physique écrit en Rust et compilé en un module WASM qui permet de gérer la gravité, les forces, la friction, les collisions, etc…

Le module spécifique react-three-rapier permet au moteur physique de s’intégrer parfaitement avec le moteur graphique de ThreeJS !

https://github.com/pmndrs/react-three-rapier

Ecctrl

Ecctrl est ce qu’on appelle un “contrôleur de capsule flottante”, c’est donc un contrôleur physique et graphique spécialement créé pour diriger un joueur et gérer facilement :

Le déplacement et les collisions
Le suivi de la caméra
Les animations (saut, course,…)

Et bien d’autres choses qui sont en général très fastidieuses à créer !

https://github.com/pmndrs/ecctrl

nicolasbrondinbernard_A_gamepad._100_white_background._Style_16_9ab440b3-c0fc-4566-9b41-82363fd411c7 copy.jpg

Moteur de jeu

JavaScript

L’objectif étant d’avoir un moteur de jeu le plus indépendant (et découplé) possible du reste du jeu, tout est géré par des évènements et des changements d’états, avec un gestionnaire d’évènements développé en JavaScript.

Un évènement peut être déclenché par : le moteur du jeu lui-même, un contrôleur (la souris), le moteur physique (déplacement, collision, etc…) ou bien un élément de l’interface graphique.

Une fois qu’un évènement est déclenché, il est envoyé tour à tour à chacun des écouteurs (en fonction d’une priorité qui leur est assignée) et chaque écouteur peut lui-même décider d’effectuer une action, et de continuer à laisser vivre l’évènement, ou bien le stopper.

nicolasbrondinbernard_a_computer_ui_small_window._100_white_bac_9d492f89-fb60-474a-9f44-068faacfbec0 copy.jpg

Interface Graphique (GUI)

React

Tous les éléments d’interfaces : les infos du joueur, les instructions, les quêtes, les popups, etc… sont gérées avec React.

La majorité des éléments graphiques et le déclenchement de leurs changements d’états sont liés aux évènement du moteur de jeu évoqué précédemment.

Bien que chez Code-Garage on adore VueJS, React était déjà présent pour faire fonctionner R3F, voilà pourquoi nous avons fait ce choix !

https://react.dev/

Framer Motion

Frame est une bibliothèque de gestion d’animation spécialement conçue pour React. Elle permet d’ajouter des effets et des transitions dans l’interface du jeu et des ordinateurs, ce qui améliore grandement l’expérience utilisateur.

https://www.framer.com/motion/

nicolasbrondinbernard_earth._100_white_background._Style_16-bit_4396730e-67bb-4722-9d61-1e00609287b2 copy.jpg

Serveur multijoueur

Arrivé dans le niveau de l’école, il est possible de croiser d’autres joueurs, qui se déplacent en temps réel dans le jeu.

Cette fonctionnalité est loin d’être finalisée, mais elle est actuellement fonctionnelle

Playroom

Playroom est un SaaS qui fourni un serveur de communication temps-réel spécialisé pour le développement de jeux multijoueur !

L’outil est très bien fait, super-puissant, et l’offre gratuite est largement suffisante pour des jeux de petite envergure.

https://joinplayroom.com/

Strapi

Strapi est un CMS Headless et permet aux joueurs de se connecter pour récupérer leur nom d’utilisateur lié à leur compte Code-Garage, et dans le futur de sauvegarder leur progression dans le jeu !

Pour en savoir plus sur la stack utilisée chez Code-Garage, voici un article dédié !

Vous avez terminé l'article ?

Aucun commentaire pour l'instant