escape-game-360-maker

🧩 Éditeur - Escape Game 360° (No-Code Builder)

🌍 🇬🇧 Click here for the English Version

Un générateur visuel gratuit et open-source pour créer des “Escape Games” ou des visites virtuelles interactives en images 360°. Conçu spécifiquement pour être utilisé dans le cadre d’ateliers d’initiation au numérique (EPN).

L’outil génère un jeu complet sous la forme d’un simple fichier index.html, jouable directement dans n’importe quel navigateur, sans aucune connaissance en programmation requise !

🛠️ Comment ça marche ?

Ouvrez l’éditeur : LANCER L’ÉDITEUR FR
Ajoutez des scènes (Pièces) et renseignez le nom de vos images 360° (format équirectangulaire).
Ajoutez des “Points d’interaction” (Hotspots) pour créer des portes, des objets à ramasser ou des messages.
Cliquez sur “Générer mon jeu”. Le navigateur téléchargera votre jeu prêt à jouer !

💡 Conseils importants d’utilisation

Images et liens (CORS) : Lors de la conception et des tests, il est fortement recommandé d’utiliser des URL d’images hébergées en ligne (ex: via PostImages, Imgur, etc.) commençant par http:// ou https://. Si vous utilisez des images locales (ex: salle.jpg), les navigateurs bloquent souvent l’affichage 3D par mesure de sécurité si le jeu n’est pas hébergé sur un serveur web.
Sauvegarde : Le bouton “Sauvegarder le projet” génère un fichier .json. Pensez à l’utiliser régulièrement ! Vous pourrez recharger ce fichier plus tard pour reprendre votre travail là où vous l’avez laissé.

Documentation technique (développeurs & IA)

docs/ARCHITECTURE.md — fonctionnement du code, flux de données, JSON, Pannellum, audio.
docs/CONTRIBUTING.md — synchronisation FR/EN, bonnes pratiques de modification.

✨ Fonctionnalités actuelles (v4.2 + audio)

L’éditeur a évolué pour devenir un véritable moteur de création narratif :

Musique globale & ambiance par scène : musique de fond optionnelle pour tout le jeu ; fichier audio optionnel par scène (silence si l’URL est vide).
Aperçu en Direct (Nouveau v4.2) : Testez le rendu d’une scène entière (et l’emplacement de vos zones invisibles encadrées en rouge) sans avoir à générer le jeu complet.
Générateur CSS Visuel No-Code (Nouveau v4.2) : Une interface intuitive permet de créer des zones cliquables (couleur, taille, bordure, opacité) et génère le code CSS automatiquement.
Ergonomie de gestion (Nouveau v4.2) : Déplacez vos scènes, dupliquez des hotspots d’une pièce à l’autre, et pliez/dépliez vos panneaux pour garder un espace de travail propre. Les scènes et hotspots peuvent désormais être nommés.
Pointeur 360° intégré : Plus besoin de deviner les coordonnées ! Un outil visuel permet de placer la caméra sur l’image pour récupérer le Pitch et le Yaw automatiquement.
Système d’Inventaire : Un panneau rétractable (et personnalisable) permet au joueur de stocker les objets ramassés.
Logique conditionnelle & Énigmes : Posez des questions aux joueurs, exigez des clés pour ouvrir des portes. Le jeu mémorise la progression !

🚀 Feuille de route (Roadmap / À venir)

Alternative au CDN Pannellum : Ajouter une option pour télécharger les dépendances localement.
Audio avancé : Effets sonores (SFX) par hotspot, réglages de volume côté joueur, balance par piste côté éditeur (voir la doc technique pour l’existant).
Système de “Niveaux” : Lier plusieurs fichiers HTML générés entre eux (avec transfert de l’inventaire via le localStorage).
Persistance des objets ramassés : Empêcher la réapparition d’un objet ramassé quand on revient dans la pièce.

🌍 English Version

🇫🇷 Cliquez ici pour la version Française

A free, open-source visual builder to create 360° Escape Rooms and interactive virtual tours. Designed specifically for educational workshops, this “No-Code” tool generates a standalone index.html game file, playable in any web browser.

🛠️ How it works

Open the English Editor: LAUNCH EN EDITOR
Add scenes (Rooms) and input your 360° equirectangular image URLs.
Add interaction points (Hotspots) to create doors, pickable items, or riddles.
Click “GENERATE MY GAME”. That’s it!

(Tip: For testing purposes, it is highly recommended to use online image URLs starting with http rather than local files, to avoid browser CORS security blocks).

Technical documentation (developers & AI assistants)

docs/ARCHITECTURE.md — code layout, data flow, JSON, Pannellum, audio.
docs/CONTRIBUTING.md — keeping FR/EN in sync, safe change checklist.

✨ Features (v4.2 + audio)

Global music & per-scene ambient audio: optional background loop; optional ambient track per scene (no sound if URL empty).
Live Scene Preview (New v4.2): Test an entire scene layout without generating the full game. Hotspots are outlined in red for easy validation.
Visual CSS Editor (New v4.2): Use sliders and color pickers to style your interaction zones. Code is generated for you. Includes an Expert Mode.
Smart Duplication (New v4.2): Rearrange scenes, copy hotspots from one room to another instantly, and collapse panels for a clean workspace. Custom titles added.
Built-in 360° Target Picker: Visually place your hotspots on the image to auto-fill Pitch/Yaw coordinates.
Inventory System: A customizable, retractable panel to store found items.
Smart Puzzles & Logic: Create riddles and lock doors with required items. The game remembers what the player has already unlocked!

📜 Credits & License

Created by Renald Gauthier with the assistance of Perplexity AI. The 360° rendering engine uses the amazing Pannellum library by Matthew Petroff.

This project is licensed under Creative Commons BY-SA 4.0 (Attribution - ShareAlike). You are free to use, modify, and share it as long as you credit the original source.