Entity Component System Foundations
A practical introduction to building a small ECS in TypeScript for Babylon.js. You’ll write World, Entity, Component, and System, load scenes from data, and add camera, inspector, mesh loading, and lighting systems with a simple build/watch workflow.
What We Will Cover
- Write minimal ECS base classes (World, Entity, Component, System) and use them consistently
- Load scenes from TypeScript data compiled to JSON; fetch and wire components/systems dynamically with import()
- Set up Vite + tsx + chokidar to rebuild scene data and trigger full reloads
- Implement Camera, Inspector, Mesh, and Lighting as component/system pairs
- Update systems each frame and query entities by component
- Keep code/data separate and organize small, readable files
What this course covers
🎮 Core ECS pieces
- World, Entity, Component, System base classes in
src/lib/ECS - Simple contract for adding/removing/querying components
- System update loop that processes matching entities each frame
🗂️ Data-driven scenes
- Author scene data in TypeScript and compile to JSON
- Fetch scene JSON at runtime and dynamically import matching Component/System files
- Create entities and attach components from data; instantiate only the systems you need
⚡ Dev workflow
- Vite project setup with a full-screen canvas and minimal HTML
scripts/make-game-data.tsusingtsxto build scene JSON- Small Vite plugin with
chokidarto watchdata/, rebuild, and full-reload the browser
🏗️ Systems you’ll implement
- Camera: smooth follow and basic distance adjustment
- Inspector: backtick toggle, embedded inspector panel
- Mesh loading:
AssetsManager+ optionalDracoCompressionwith basic error handling - Lighting: ambient + directional setup with sensible defaults
🎯 Conventions and helpers
- Component/System pairs live together and share the same name
- Systems read from other components but write only to their own component
- World helpers for entity lookup and
entitiesWith(...)queries - Keep files small with clear responsibilities
Prerequisites
- JavaScript/TypeScript basics
- Some Babylon.js familiarity helps (scenes, meshes, cameras)
- Node.js and npm installed
Outcomes
- ✅ A minimal ECS you understand end to end
- ✅ A data pipeline you can reuse across scenes/games
- ✅ Working examples for Camera, Inspector, Mesh loading, and Lighting
- ✅ A straightforward Vite setup with a watch/reload loop
This is a practical walkthrough, not a framework pitch. You’ll end with a small codebase you can adapt to your own projects.
☰