Web Game Engine
B2D Game Engine
B2D es un motor de videojuegos 2D para la web, desarrollado en TypeScript e inspirado en la arquitectura basada en componentes de Unity. Fue diseñado como un runtime modular para gameplay arcade, con capas dedicadas para escenas, entidades, sistemas, scripting, físicas, renderizado, UI, eventos, manejo de estados, debugging y carga de assets.
El engine sigue un enfoque centrado en composición. En lugar de depender de jerarquías rígidas basadas en herencia, el comportamiento del juego se construye mediante componentes reutilizables y script components, mientras que las responsabilidades internas del motor son procesadas por sistemas especializados. Esto hace que el runtime sea más modular, extensible y fácil de escalar a medida que crece la complejidad del gameplay.
Conceptos Clave
- Arquitectura inspirada en Unity, construida alrededor de escenas, entidades, componentes y ejecución por ciclo de vida
- Estructura tipo ECS basada en
Entity + Component + System - Script Components para lógica modular por entidad
- Enfoque composition-first para construir objetos reutilizables y extensibles
- Flujo de actualización con fixed timestep para simulación y físicas estables
- Comunicación basada en eventos entre estado del engine y sistemas de gameplay
- Comportamientos guiados por máquinas de estado para IA y flujo de juego
- Modelo de UI basado en componentes, renderizado directamente en el canvas del engine
- Pipeline dedicado para carga y preload de assets
- Utilidades integradas de debug para inspección visual
Arquitectura Principal
- Escenas administran el mundo activo, incluyendo entidades, sistemas, cámaras y estado de render
- Entidades funcionan como contenedores de componentes, script components, tags y datos de gameplay
- Sistemas procesan responsabilidades globales como físicas, render, scripting, partículas, culling, triggers y visualización de debug
- Script Components definen comportamiento mediante hooks de ciclo de vida como start, update, fixed update, collision y destroy
- Eventos permiten comunicación desacoplada entre sistemas y features de gameplay
- Máquinas de Estado habilitan transiciones estructuradas para comportamientos con múltiples estados, como IA de enemigos
- Capas de UI separan la UI interna del canvas de la interfaz externa de navegación y overlays
- Pipeline de Assets centraliza preload, acceso tipado y recuperación de recursos cargados
Módulos Principales
- Core Engine: game loop, timing, pausa/reanudación, fixed update y manejo de visibilidad
- Gestión de Escenas: creación, carga, cambio, destrucción y orquestación de escenas
- Capa ECS: entidades, componentes, sistemas, tags, queries indexadas y utilidades de composición
- Runtime de Scripting: lógica de gameplay mediante script components y hooks de ciclo de vida
- Físicas 2D: colliders, tipos de cuerpo, detección de colisiones, callbacks y resolución
- Renderizado: sprites, animación, render layers, cámaras, parallax, filtros y UI rendering
- Sistema de UI: objetos UI nativos del engine para HUD
- Sistema de Eventos: eventos tipados y livianos para comunicación entre engine y gameplay
- Máquinas de Estado: lógica basada en transiciones para comportamientos controlados
- Assets Manager: acceso centralizado a imágenes, atlas y audio una vez cargados
- Preloader de Assets: pipeline de preload con seguimiento de progreso antes de iniciar gameplay
- Input: manejo de teclado y mouse
- Efectos y Utilidades: partículas, trigger areas, culling y utilidades de apoyo
- Herramientas de Debug: debug rendering, visualización de colliders, triggers e inspección del runtime
Arquitectura de UI
El modelo de UI está dividido en dos capas complementarias. Dentro del engine, la interfaz puede representarse mediante entidades con
UIComponents
renderizados directamente en el pipeline del canvas, lo cual funciona bien para HUD y elementos ligados al estado del juego. Fuera del engine se puede como forma alternativa usar UI basada en HTML usando por ejemplo React.
Recursos y Herramientas
B2D incluye un pipeline dedicado para precargar y administrar imágenes, atlas y audio antes de que una escena se active. Los assets se cargan mediante un preloader con seguimiento de progreso y luego se exponen a través de un asset manager centralizado para acceso en runtime. Esto crea un flujo de trabajo más limpio para el setup de escenas y reduce el cableado manual de recursos dentro del código de gameplay.
Debug y Soporte en Runtime
El engine también incluye soporte de debugging integrado, con debug rendering y ayudas visuales para inspeccionar colliders, trigger areas y otros datos del runtime. Estas herramientas aceleran la iteración durante el desarrollo y ayudan a validar sistemas como físicas, interacciones y configuración de escenas.
Identidad Técnica
B2D no es solo un wrapper de renderizado. Es un runtime 2D estructurado con orquestación de escenas, composición por componentes, procesamiento guiado por sistemas, scripting de gameplay, comunicación basada en eventos, comportamiento guiado por estados, pipelines de assets, tooling de debug y una arquitectura de UI pensada para desarrollo de juegos web escalable.