Blog

Comment un jeu vidéo m'a mené à construire l'Unreal Engine du web

J'ai créé un jeu multijoueur avec Unreal Engine et découvert les Blueprints. Des années plus tard, c'est devenu Luna Park : le visual scripting pour le web.

En 2018, j'ai créé un jeu vidéo avec Unreal Engine : Starxium 2084.

Un jeu multijoueur en 4 contre 4 à l'esthétique rétro-futuriste des années 80 : néons, autoroutes de nuit et synthwave. Deux équipes de voitures se disputent un convoi lancé sur l'autoroute, et chaque joueur règle sa voiture pièce par pièce.

Starxium 2084, créé avec Unreal Engine
Une voiture de Starxium 2084 sur l'autoroute, de nuit.

Je me suis éclaté à apprendre à créer tout ça. J'ai modélisé les voitures et les objets 3D dans Blender, composé la musique dans FL Studio, et assemblé le tout dans Unreal Engine.

La découverte des Blueprints

J'ai appris le moteur en chemin, et c'est comme ça que j'ai découvert les Blueprints : le visual scripting d'Unreal. Au lieu d'écrire du code, on connecte des nœuds. Les fils d'exécution donnent l'ordre, les fils de données portent les valeurs.

Un graphe Blueprint dans Unreal Engine
Le script de construction d'un Blueprint de tremplin. Source : Epic Games, Blueprint Foundations

Ce qui m'a frappé, c'est tout ce que ça enlève : pas d'erreur de syntaxe, pas de types incompatibles, pas de flux d'exécution caché, pas de page blanche.

Le visual scripting n'est pas propre à Unreal : Unity l'utilise aussi. J'y ai trouvé un outil exceptionnel, et je l'ai gardé dans un coin de ma tête.

Une idée folle

Je n'ai jamais réussi à financer le jeu. En 2022, j'ai eu une idée folle : construire l'Unreal Engine, mais pour le web.

J'avais vu ce que des passionnés sans formation en développement arrivaient à construire avec les Blueprints. Ils sortaient des jeux : physique en temps réel, rendu 3D, 60 images par seconde.

Une application web n'a rien de tout ça : ce sont des pages, des formulaires, des listes, un backend et une base de données. Si on pouvait sortir des jeux en visual scripting, une application web devait être à portée.

C'est comme ça que Luna Park est né, à Station F.

Le hall principal de Station F
Station F, à Paris, où Luna Park a commencé.

Des graphes aux applications full-stack

Au tout début, Luna Park n'était que du visual scripting. Contrairement aux Blueprints, qui tournent sur une machine virtuelle, chaque nœud se compilait en JavaScript dès le premier jour : il a toujours été pensé pour le web.

La logique du clic de la liste d'attente Sunset Park
Un graphe Luna Park : des ancres typées, chaque nœud compilé en JavaScript.

Un graphe seul ne fait pas une application, alors l'éditeur s'est construit autour. D'abord la construction d'interface, où chaque page se compile en composant Vue. Puis un backend, avec des routes écrites dans les mêmes graphes que l'interface. Puis PostgreSQL, interrogé directement depuis ces routes. Puis un débogueur, les plugins, les paquets npm, les builds desktop et mobile, et l'export du code.

Sunset Park dans l'éditeur Luna Park
Sunset Park, un site de démonstration construit avec Luna Park.

Le visual scripting a un travers bien connu : les « Blueprints from hell », des graphes si grands que plus personne ne peut les lire. La réponse est la même qu'en code : sélectionner un groupe de nœuds et le transformer en fonction, et écrire en TypeScript ce qui est plus simple à taper qu'à dessiner.

Dans l'application desktop, un projet est un simple dossier sur le disque, qui se versionne avec Git comme n'importe quel code.

L'objectif, c'est de pouvoir construire n'importe quelle application web. Quand quelque chose ne peut pas encore être construit, on fait évoluer l'éditeur. En attendant, une fonction TypeScript ou un plugin comble le manque.

Ce qu'il a gardé d'Unreal

Unreal EngineLuna Park
Éditeur de niveaux et viewportBuilder : la page, rendue en direct
BlueprintsGraphes de logique, front et back
C++Fonctions en code TypeScript, paquets npm
Play In EditorAperçu : l'application tourne dans l'éditeur
Débogueur BlueprintPoints d'arrêt, pas à pas, valeurs en direct
Plugins et FabPlugins : composants, nœuds, tokens, hooks backend
Packaging par plateformeWeb, PWA, desktop, Android, iOS

Puis l'IA est arrivée

Quand j'ai commencé Luna Park, l'IA ne savait pas construire d'applications. Puis elle a appris, vite. L'éditeur a donc gagné Sidekick, un assistant qui fonctionne avec l'IA de votre choix. Il construit et teste des pages, des routes et des tables, et le résultat, ce sont les mêmes graphes que ceux que vous feriez à la main. C'est tout l'intérêt : vous comprenez chaque modification de l'IA, et vous pouvez la reprendre vous-même.

Sidekick dans l'éditeur Luna Park
Sidekick : modes Build, Plan, Review et Guide, avec le modèle de votre choix.

Essayer

Luna Park tourne dans le navigateur, et vous pouvez l'essayer sans créer de compte.

J'aimerais beaucoup avoir votre avis, surtout si vous avez utilisé les Blueprints ou un autre outil de visual scripting.

Luna Park est un éditeur visuel qui crée des applications web full-stack et exporte du code Vue et Node.js lisible. Essayer dans le navigateur · GitHub