Skip to content

Latest commit

 

History

17 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blablaland Remake HTML5

Blablaland, jouable directement dans le navigateur, sans Flash. Un remake technique non officiel du monde virtuel, reconstruit sur une stack web moderne, conçu et développé par Phinolex.

Unofficial fan-made technical showcase. Not affiliated with, endorsed by, or presented as an official Blablaland project.

Le jeu tourne, dans le navigateur, sans rien installer. Un compte suffit pour entrer.

Le jeu dans le navigateur : la salle Accueil, le tchat, les smileys, l'inventaire et le classement sur un seul écran

Aperçu en ligne · Voir le jeu en mouvement · Les outils de création · L'écosystème web · Statut du projet

In English. Blablaland Remake HTML5 is an unofficial fan remake of Blablaland, the French Flash virtual world, rebuilt as an HTML5 browser game: a PixiJS / TypeScript client, a TypeScript game server compatible with the historical binary protocol over WebSocket, a Nuxt community site and a set of no-code content editors. It runs in any modern browser, on desktop and phone, with no Flash and nothing to install: blablalandremake.phinolex.com. A personal project; the source code is private and this repository documents it.

Blablaland, mais sur une stack web moderne

Blablaland était un monde virtuel en Flash : des salles illustrées, un avatar qu'on habille, un tchat en bulles au-dessus des têtes, des pouvoirs, des mini-jeux. Flash s'est arrêté, pas le jeu.

Ce projet reprend l'expérience historique et la réimplémente pour le navigateur d'aujourd'hui. Le rendu passe par WebGL avec PixiJS, le client et le serveur sont en TypeScript, le protocole historique a une implémentation compatible, vérifiée par des tests de référence, et les contenus des salles sont préparés une fois pour toutes au moment du build. À l'exécution, il n'y a ni Flash, ni émulateur, ni plugin : une page web.

Marcher, sauter et discuter dans une salle, capture en jeu

Jouable directement dans le navigateur

Une adresse, un pseudo, et on est dans la salle. Le même serveur sert le navigateur de bureau et le téléphone, avec des commandes tactiles sur ce dernier.

Ce que le joueur retrouve :

  • les salles d'origine, à leur vraie taille, avec leurs décors animés, leurs passages et leurs téléporteurs ;
  • la physique du jeu : gravité, saut, nage dans l'eau, escalade sur les échelles, plateformes mobiles ;
  • le tchat de salle, les messages privés, les groupes, les bulles au-dessus des têtes et 15 packs de smileys ;
  • 677 personnages, chacun avec dix zones à colorier ;
  • 289 pouvoirs, avec leur objet, leur geste et leur durée ;
  • un cycle jour et nuit, la pluie, la neige, l'orage, le brouillard, et des évènements météo à l'échelle d'une salle (tornade, ouragan, tsunami) ;
  • 45 personnages non joueurs qui s'allument au survol et ouvrent un dialogue à pages ;
  • une carte du monde cliquable, une case par salle, qui sert aussi à retrouver ses amis.

Deux personnages se croisent dans la salle Accueil : Lila arrive, lance un salut et un smiley, Morgane répond

Île Tortue en plein jour Le Phare à la nuit tombée
L'Île Tortue, de jour. Le Phare, la nuit. Le cycle jour et nuit est calculé par le serveur, le même pour tout le monde.
La carte du monde ouverte en jeu La Plage des 3 Parasols de nuit
La carte du monde, ouverte depuis le jeu. La Plage des 3 Parasols, sous les étoiles.

Plus qu'un simple remake

Reproduire Blablaland était le point de départ. La plus grande partie du travail est ce qui n'existait pas.

Une progression. Un niveau et une route des trophées avec un coffre à chaque palier, des missions quotidiennes et hebdomadaires, des titres, des badges, une monnaie (les blabillions) et une boutique de personnages, de packs de smileys et de pouvoirs.

Des saisons et des classements. Tous les trois mois, les classements des jeux repartent à zéro ; les totaux de toujours restent. Huit tableaux : niveau, blablas, forum, bataille navale, donjon, pyramide, arène, Fury.

Une vie sociale. Amis, groupes de discussion, cadeaux envoyés depuis la salle, unions entre joueurs, échanges d'objets au comptoir ou à la machine, tombola. Chaque don et chaque échange passe par un registre.

Des mini-jeux, chacun avec son module côté serveur. Bataille navale, Tic Tac Boom, Blind Dessin, la pêche, le Donjon, Battle Royale, Fury Tournament, Mysthoriä, la Pyramide, le chariot du Manoir, la machine à pince, le chaudron, la chasse au trésor, l'arène, l'Escouade, la nuit des monstres. Certains se jouent dans n'importe quelle salle, avec les gens présents, sans quitter le monde : la bombe de Tic Tac Boom passe d'un avatar à l'autre au-dessus du décor, et les mots se tapent dans le tchat habituel.

Une manche de Tic Tac Boom à deux dans la salle Accueil : la syllabe imposée, chacun répond dans le tchat, la bombe change de mains

La pêche : la canne, le lancer, la touche, le moulinet, et ce qui remonte, ici une vieille chaussette

Une modération outillée. Une console en jeu, le miroir des conversations des mini-jeux, les signalements et une liste noire par joueur.

Le tableau de quêtes Les saisons
La boutique Les échanges

Des outils de création intégrés

Le jeu n'est pas seulement joué, il est fabriqué. Dix-huit ateliers no-code, dans le site, écrivent les fichiers que le jeu relit sans redémarrer. Ce n'est pas un jeu avec un éditeur en bonus : c'est une chaîne de production de contenu, pensée pour que quelqu'un qui dessine, sans écrire une ligne de code, puisse poser une salle, un personnage ou un pouvoir dans le jeu.

Le Map Studio : les outils de dessin, les décors de la salle, la liste des calques

Le Map Studio. On peint le sol, l'eau et les prises d'escalade au pinceau, on empile les décors en calques, on pose les sorties vers les salles voisines, les téléporteurs et les personnages, puis on teste dans le jeu en un clic. Les comportements (ce qui tue, ce qui pousse, ce qui téléporte, ce qui bouge sur une timeline) se règlent en phrases plutôt qu'en champs techniques.

Le Map Studio sur la salle Trésor

La carte du monde et les connexions. Le plateau que les joueurs ouvrent en jeu se réorganise à la souris, une tuile par salle, un monde par onglet. Un graphe à part montre les 437 salles et leurs 1 054 passages, et signale en rouge les portes qui ne mènent nulle part.

L'éditeur de la carte du monde Le graphe des connexions entre salles

Les autres ateliers. Un Skin Studio pour les 677 personnages, leurs zones de couleur et leurs poses animées. Un atelier de smileys, avec un calque animé par élément. Un éditeur de pouvoirs qui assemble un pouvoir en trois briques et traduit le résultat en clair. Un éditeur de personnages non joueurs et de leurs dialogues. Un éditeur de son, avec une bibliothèque, une table de mélange par salle et un curseur d'heure pour faire céder les cigales aux grillons. Et un atelier par système : mini-jeux, saisons, cadeaux, chaudron, spectacles, aéro, calendrier de l'avent, Battle Royale, Fury, nuit des monstres.

Le Skin Studio L'atelier de smileys
L'éditeur de pouvoirs L'éditeur de personnages non joueurs

L'accueil du studio et ses dix-huit ateliers

Un écosystème web complet

Autour du jeu, un site : compte et connexion unique vers le jeu, profil avec une page personnelle à décorer, classements, forum, amis, boutique, missions, saisons, cadeaux, échanges, calendrier de l'avent, tournois, et une page qui publie ce que le projet coûte chaque mois.

Profil, classement et forum

La page d'accueil L'accueil une fois connecté
Le profil Le classement

Quelques chiffres

Comptés sur les fichiers du projet le 28 août 2026.

437 salles, reliées par 1 054 passages
1 780 décors animés, posés dans 247 salles
677 personnages, dix zones de couleur chacun
289 pouvoirs
15 packs de smileys
45 personnages non joueurs avec un dialogue
16 mini-jeux, chacun avec son module côté serveur
18 ateliers no-code
189 fichiers de tests automatisés
≈ 450 000 lignes de TypeScript et de Vue, hors dépendances et hors assets

Le détail, page par page et atelier par atelier, est dans docs/inventaire.md.

Architecture

                      navigateur (bureau, téléphone)
      ┌──────────────────────────────────────────────────────────┐
      │  client de jeu            │  site                        │
      │  PixiJS 8 · TypeScript    │  Nuxt 4 · Vue 3 · TypeScript │
      │  rendu WebGL, tchat DOM   │  rendu serveur               │
      └───────────┬───────────────┴───────────────┬──────────────┘
                  │ WebSocket                     │ HTTP
                  │ protocole historique, compat. │
      ┌───────────▼───────────────┐   ┌───────────▼──────────────┐
      │  serveur de jeu           │◄─►│  serveur du site         │
      │  Node · TypeScript        │   │  Nitro · SQLite          │
      │  salles, physique,        │   │  comptes, SSO, forum,    │
      │  mini-jeux, météo         │   │  boutique, progression   │
      └───────────────────────────┘   └──────────────────────────┘
                  ▲
      ┌───────────┴───────────────┐
      │  préparation des contenus │   au build, une fois pour toutes
      │  aucun Flash à l'exécution│   salles rendues à leur taille, en 2×
      └───────────────────────────┘
  • Un seul protocole. Une implémentation compatible du protocole binaire historique, bits serrés, dans un paquet partagé par le client et le serveur. Des tests de référence vérifient la compatibilité de l'encodage.
  • Une physique fidèle. Le moteur de déplacement (collisions, pentes, eau, échelles) est une réimplémentation indépendante qui vise le comportement historique, testée à part.
  • Des contenus préparés au build. Chaque salle est rendue une fois, à sa vraie taille et en double résolution, avec sa couche de collision. Le jeu livré ne contient que du HTML, du JavaScript, des images, du JSON et de l'audio.
  • Du contenu piloté par des fichiers. Salles, pouvoirs, smileys, mini-jeux, météo, saisons : tout est décrit dans des fichiers de configuration que les ateliers écrivent et que le jeu relit à chaud.
  • Un site et un jeu qui se parlent. Connexion unique du site vers le jeu, inventaire et soldes synchronisés, résultats des mini-jeux réglés côté site.
  • Vérifié en vrai navigateur. En plus des tests unitaires, des harnais Playwright rejouent les scénarios à deux joueurs, sur bureau et sur mobile, et mesurent la fluidité.

Pourquoi PixiJS et pas Phaser

Phaser est un moteur de jeu complet : une physique, des scènes, une boucle, un moteur de rendu. Pour ce jeu, trois de ces quatre pièces étaient inutilisables, et la quatrième est exactement le métier de PixiJS.

La physique était injouable telle quelle. Le sol d'une salle n'est pas un quadrillage de cases : c'est une image peinte, où la couleur d'un pixel dit si on marche dessus, si on nage ou si on grimpe. Les moteurs de Phaser raisonnent en boîtes, en cercles, en cases ou en corps rigides ; aucun ne sait lire une image pour trouver le sol. Le moteur de déplacement est donc écrit pour ce jeu, et c'est lui qui mène le temps : la boucle et les scènes de Phaser n'auraient plus été que des passagers à contourner.

Ce qui restait est le vrai travail : composer l'image. Une salle, ce sont treize calques empilés, les joueurs glissés entre deux plans du décor, une teinte posée sur toute l'image selon l'heure, des avatars recolorés à la volée en dix zones, un contour dessiné par un shader écrit pour le jeu, la pluie par-dessus. PixiJS est fait pour ça et pour rien d'autre : on empile des conteneurs, on branche un filtre sur n'importe lequel, on écrit son propre shader quand il en manque un, et tout part à la carte graphique en un minimum d'appels.

Et sous le capot, ce n'est pas la même génération. PixiJS 8 embarque un rendu WebGPU et WebGL 2. Le fichier publié de Phaser, y compris dans sa version 4.2.1 de juillet 2026, ne demande que webgl et experimental-webgl : WebGL 1, sans une seule occurrence de WebGPU (vérifié le 28 août 2026 dans les paquets publiés des deux bibliothèques). Pour un monde qui empile des centaines de sprites, des filtres et des teintes à chaque image, on veut le moteur le plus récent, pas celui d'avant.

Le poids finit de trancher. 348 Ko compressés pour Phaser 4.2.1, 226 Ko pour PixiJS 8.20 : 54 % de plus à télécharger, pour n'en garder qu'un quart.

Le résultat est à l'écran. Dans la salle la plus animée du monde, décors qui bougent, avatars et bulles, teinte du ciel sur toute l'image, sur un écran à deux fois la définition : 16,7 ms pour dessiner une image, 16,8 ms au 95e centile. Le budget d'une image à 60 par seconde est de 16,7 ms. Le jeu s'y tient sans en sauter une seule sur les 490 mesurées.

Pourquoi ce projet existe

Blablaland a été dessiné pour les machines de son époque, et c'est Flash qui s'est arrêté, pas lui. Le projet est né pendant des vacances, avec une question à régler d'abord pour soi : un jeu Flash de cette taille peut-il revivre tel quel dans un navigateur moderne ? Puis il a imaginé la suite : ce que ce monde serait devenu s'il avait continué à évoluer techniquement jusqu'à aujourd'hui, écrit pour le web, un navigateur, un téléphone, et de la place pour en mettre plus.

La seconde idée, c'est de casser la barrière entre la technique et la création visuelle. Tout ce qui fait le jeu, les salles, les personnages, les pouvoirs, les smileys, les mini-jeux, se règle dans des ateliers sans code : la personne qui dessine n'a pas besoin de la personne qui programme.

Projet inspiré du Blablaland original et du travail de ses créateurs, artistes, développeurs et contributeurs historiques.

Intention du projet

Blablaland Remake HTML5 est une initiative personnelle et non officielle, née de l'envie de contribuer à la communauté Blablaland et d'explorer ce que l'expérience aurait pu devenir avec les technologies web d'aujourd'hui.

Le projet ne se présente pas comme un Blablaland officiel, et ne cherche ni à dévaloriser ni à remplacer les projets communautaires existants. Cette vitrine documente un travail technique indépendant, et rend hommage au jeu, à ses créateurs historiques et à la communauté qui continue de le faire vivre.

Statut

Projet personnel, en développement actif depuis fin juin 2026. Le projet n'est pas exploité comme un serveur public permanent. Un aperçu jouable est disponible à des fins de démonstration et de test, sur blablalandremake.phinolex.com.

Ce dépôt est une vitrine : il documente le projet, son évolution et ses capacités techniques. Le code source est actuellement privé et n'est pas distribué par ce dépôt. Le jeu, son serveur, son site et ses outils ne sont placés sous aucune licence de redistribution.

Source code is currently private and is not distributed through this repository.

Auteur

Conçu et développé par Phinolex.

Pour en parler, anciens joueurs, développeurs ou membres de l'équipe historique : Telegram @phinolex, Discord @phinolex.

Droits et mentions

Le nom Blablaland, ses personnages, ses graphismes, ses sons, ses salles et les autres contenus issus du jeu d'origine ne sont pas revendiqués par Phinolex et restent la propriété de leurs détenteurs de droits respectifs. Les développements originaux réalisés pour ce projet (logiciel, outils, composants d'interface, documentation, médias de présentation) sont © 2026 Phinolex, tous droits réservés sauf mention contraire. Le détail est dans NOTICE.md.

Unofficial fan-made technical showcase. Not affiliated with, endorsed by, or presented as an official Blablaland project.

About

Remake HTML5 non officiel de Blablaland, jouable directement dans le navigateur, sans Flash. Client TypeScript, serveur TypeScript, site Nuxt, éditeurs de contenu no-code. Vitrine technique : le code source reste privé. Développé par Phinolex

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors