Lexia: A Gamified Educational System for Children with Dyslexia — Web Game

Godot 4.6 — HTML5 Web Export (Chrome/Edge/Firefox/Brave)

A web-based educational game that combines RPG-style dungeon progression with evidence-based learning activities for children with dyslexia. Built with Godot Engine, Firebase Auth, and Firestore.

Live URL: https://lexiadyslexia.web.app/ GitHub: https://github.com/arownz/godotcaps

---

Features

• Journey Mode — RPG dungeon crawling with auto-battles, STT/whiteboard word challenges, character stats, and 3 dungeons × 5 stages
• Module Mode — Learning activities: Phonics (A–Z tracing + sight words), Flip Quiz (memory cards), Read Aloud (guided reading + syllable workshop)
• Speech-to-Text — Web Speech API with dyslexia-friendly phonetic matching
• Handwriting Recognition — Google Cloud Vision OCR with image preprocessing
• Text-to-Speech — Configurable voice, rate, and volume
• Leaderboard — 5 ranking categories with Firebase data
• Character System — Multiple characters with unique stat bonuses
• Energy System — 20 max energy, auto-recovery over time
• Hidden Admin Button — 7 logo clicks reveals admin panel link
• Firebase Backend — Auth (Email/Google), Firestore (dyslexia_users collection)

---

Local Setup Instructions

Prerequisites

Tool	Version	Download
Godot Engine	4.4.5 – 4.6 (Mono not required)	https://godotengine.org/download/
Git	Any recent version	https://git-scm.com/
Modern Browser	Chrome 90+, Edge 90+, Firefox 90+	—

Step 1: Clone the Repository

git clone https://github.com/arownz/godotcaps.git
cd godotcaps

Step 2: Open in Godot Engine

1. Launch Godot Engine 4.x.
2. Click Import or go to Project List > Import.
3. Navigate to the cloned folder and select project.godot.
4. Click Import & Edit.

Step 3: Firebase Setup

The project uses the godot-firebase GDScript plugin (included in addons/godot-firebase/).

1. Create a Firebase project at https://console.firebase.google.com/
2. Enable Authentication:
   • Go to Authentication > Sign-in method
   • Enable Email/Password
   • Enable Google (optional, for web OAuth)
3. Create a Firestore database:
   • Go to Firestore Database > Create database
   • Choose Start in test mode (for development)
   • Select a region (e.g., asia-southeast1)
4. Get Firebase config:
   • Go to Project Settings > General > Your apps > Web app
   • Register a web app and copy the firebaseConfig object
5. Configure the plugin:
   • Open addons/godot-firebase/ and update the Firebase config values
   • Or configure via the plugin's UI in Godot (Project > Project Settings > Firebase)

Step 4: Google Cloud Vision API (Optional — for Whiteboard OCR)

1. Go to https://console.cloud.google.com/apis/credentials
2. Create an API key and enable Cloud Vision API
3. Update the API key in WebTest/letter_recognition.js

Step 5: Run the Game

In Godot Editor (Development)

• Press F5 or click Run Project to test in the editor.
• Note: STT and OCR features require the web export.

Web Export (Full Features)

1. Go to Project > Export.
2. Ensure the Web (HTML5) preset is configured.
3. Click Export Project → select WebTest/ folder.
4. Host the exported files on Firebase Hosting or any static server:

   # Using Firebase CLI (if installed)
   firebase init hosting
   firebase deploy --only hosting

5. Or test locally with a local server:

   # Using Python
   python -m http.server 8080 --directory WebTest/
   # Then open http://localhost:8080 in your browser

Note: The game uses Cross-Origin Isolation headers (COEP/COOP) which are required for threaded WASM. A local server must send these headers. Firebase Hosting is pre-configured. For local testing, use a server that supports custom headers.

---

Project Structure

godotcaps/
├── Scenes/          # Godot scenes (Authentication, MainMenu, BattleScene, modules, etc.)
├── Scripts/         # GDScript files
│   ├── JourneyManager/  # Battle system managers
│   └── ModulesManager/  # Learning module progress
├── gui/             # UI assets (icons, backgrounds, textures)
├── Sprites/         # Character and enemy sprites + animations
├── Fonts/           # OpenDyslexic font
├── audio/           # Sound effects and music
├── Resources/       # Enemy stat resources
├── addons/          # Godot plugins
│   └── godot-firebase/  # Firebase GDScript plugin
├── WebTest/         # Web export output
├── project.godot    # Godot project file
├── export_presets.cfg  # Export configuration
├── LEXIA_WEB_GAME_MANUAL.md  # Technical manual
├── SYSTEM_ANALYSIS.md       # System architecture doc
└── DATABASE_ERD.md          # Firestore data model

---

Deployment

The game is deployed on Firebase Hosting:

# Install Firebase CLI
npm install -g firebase-tools

# Login
firebase login

# Initialize hosting (if not done)
firebase init hosting

# Deploy
firebase deploy --only hosting

---

License

This project is licensed under the MIT License.