Web Game Engine
B2D Game Engine
B2D is a custom 2D game engine for the web, built in TypeScript and inspired by Unity's component-based architecture. It was designed as a modular runtime for arcade-style gameplay, with dedicated layers for scenes, entities, systems, scripting, physics, rendering, UI, events, state handling, debugging, and asset loading.
The engine follows a composition-first approach. Instead of relying on rigid inheritance hierarchies, game behavior is assembled through reusable components and script components, while engine-level concerns are processed by specialized systems. This makes the runtime more modular, extensible, and easier to scale as gameplay complexity grows.
Key Concepts
- Unity-inspired architecture built around scenes, entities, components, and lifecycle-driven execution
- ECS-like runtime structure based on
Entity + Component + System - Script Components for modular per-entity gameplay logic
- Composition-first design for reusable and extensible game objects
- Fixed timestep update flow for stable simulation and physics
- Event-driven communication between engine state and gameplay systems
- State-machine-based behavior for AI and gameplay flow
- UI architecture based on components, rendered directly in the engine canvas
- Dedicated asset loading and preload pipeline
- Built-in debug utilities for visual inspection
Main Architecture
- Scenes manage the active world, including entities, systems, cameras, and render state
- Entities act as containers for components, script components, tags, and gameplay data
- Systems process engine-wide concerns such as physics, rendering, scripting, particles, culling, triggers, and debug visualization
- Script Components provide gameplay behavior through lifecycle hooks like start, update, fixed update, collision, and destroy
- Events support decoupled communication between systems and gameplay features
- State Machines enable structured transitions for multi-state behaviors such as enemy AI
- UI Layers separate in-engine canvas UI from external application overlays and flow control
- Assets Pipeline manages preload, typed asset access, and centralized asset retrieval
Core Modules
- Core Engine: game loop, timing, pause/resume state, fixed update flow, visibility handling
- Scene Management: scene creation, loading, switching, destruction, and world orchestration
- ECS Layer: entities, components, systems, tags, indexed queries, and composition utilities
- Scripting Runtime: gameplay behavior through script components and lifecycle hooks
- 2D Physics: colliders, body types, collision detection, collision callbacks, and resolution
- Rendering: sprites, animation, render layers, cameras, parallax, filters, and UI rendering
- UI System: engine-native UI objects for HUD elements
- Event System: lightweight typed events for engine state and gameplay communication
- State Machines: transition-based logic for controlled gameplay behaviors
- Assets Manager: centralized access to images, atlases, and audio once loaded
- Assets Preloader: preload pipeline with progress tracking before gameplay begins
- Input: keyboard and mouse handling for gameplay interaction
- Effects and Utilities: particles, trigger areas, culling, and helper systems
- Debug Tools: debug rendering, collider visualization, trigger visualization, and runtime inspection support
UI Architecture
The UI model is split into two complementary layers. Inside the engine, UI can be represented as entities with
UIComponents
rendered directly in the canvas pipeline, which is useful for HUD elements tied to gameplay state. Outside the engine it is posible to use UI based on HTML using for example React.
Assets and Tooling
B2D includes a dedicated asset pipeline for preloading and managing images, atlases, and audio before a scene becomes active. Assets are loaded through a preloader with progress tracking, then exposed through a centralized asset manager for runtime access. This creates a cleaner workflow for scene setup and reduces manual asset wiring across gameplay code.
Debug and Runtime Support
The engine also includes built-in debugging support, with dedicated debug rendering and visual helpers for inspecting colliders, trigger areas, and other runtime data. These tools make iteration faster during gameplay development and help validate systems such as physics, interactions, and scene setup.
Technical Identity
B2D is not just a rendering wrapper. It is a structured 2D runtime with scene orchestration, component composition, system-driven processing, gameplay scripting, event-based communication, state-driven behavior, asset pipelines, debug tooling, and a UI architecture designed for scalable web-based game development.