The tech stack behind Code Adventure

This article refers to the design of the first adventure video game to learn code directly from your browser: Code-Adventure.

If you haven't tried the game yet, go ahead and try the free demo available at: https://adventure.code-garage.com/

The goal here is simply to share the technologies and tools that went into the design of the game, from the graphics engine, physics engine, right through to multiplayer!

Regarding the 3D resources, they were modeled and textured by Synty studio, which specializes in "low-poly" assets.

Graphics Engine

ThreeJS

ThreeJS is a library + API that allows you to display 3D elements in a web application, based on the WebGL rendering engine.

When you want to display 3D in the browser, ThreeJS is today THE solution to turn to.

https://threejs.org/

R3F

R3F, standing for "React Three Fiber", is a framework for creating ThreeJS scenes directly within a React application, with all 3D elements declared in a JSX template.

It's a tool that greatly simplifies the design of such an application, and integrates perfectly with the entire current 3D ecosystem.

https://r3f.docs.pmnd.rs

Drei

Drei is a collection of utilities and abstractions for React Three Fiber, bringing numerous ready-to-use components that will save you hours of work.

https://github.com/pmndrs/drei

Physics Engine

Rapier (r3/rapier)

Rapier is a physics engine written in Rust and compiled into a WASM module that handles gravity, forces, friction, collisions, etc…

The specific react-three-rapier module allows the physics engine to integrate perfectly with the ThreeJS graphics engine!

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

Ecctrl

Ecctrl is what's called a "floating capsule controller", it's a physics and graphics controller specially created to control a player and easily handle:

• Movement and collisions
• Camera tracking
• Animations (jumping, running,…)

And many other things that are generally very tedious to create!

https://github.com/pmndrs/ecctrl

Game Engine

JavaScript

Since the goal is to have a game engine that is as independent (and decoupled) as possible from the rest of the game, everything is managed through events and state changes, with an event manager developed in JavaScript.

An event can be triggered by: the game engine itself, a controller (the mouse), the physics engine (movement, collision, etc…) or a graphical interface element.

Once an event is triggered, it is sent in turn to each of the listeners (according to a priority assigned to them) and each listener can itself decide to perform an action, and to let the event continue to live, or to stop it.

Graphical User Interface (GUI)

React

All the interface elements: player info, instructions, quests, popups, etc… are managed with React.

Most of the graphical elements and the triggering of their state changes are tied to the game engine's events mentioned above.

Although at Code-Garage we love VueJS, React was already present to make R3F work, which is why we made this choice!

https://react.dev/

Framer Motion

Framer is an animation management library specially designed for React. It allows adding effects and transitions in the game's interface and computers, which greatly improves the user experience.

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

Multiplayer server

Once you reach the school level, it's possible to run into other players, who move around in real time in the game.

This feature is far from finished, but it is currently functional

Playroom

Playroom is a SaaS that provides a real-time communication server specialized for multiplayer game development!

The tool is very well designed, super powerful, and the free tier is more than enough for small-scale games.

https://joinplayroom.com/

Strapi

Strapi is a Headless CMS and allows players to log in to retrieve the username linked to their Code-Garage account, and in the future to save their progress in the game!

To learn more about the stack used at Code-Garage, here's a dedicated article!