TypeScript guides
Hello World tutorial
The ECS pattern
20 min
now that your hello world project is set up, it is time to understand the most crucial concept of the engine the ecs pattern this guide provides an overview of how ecs organizes entities, components, and systems to define behavior what is the ecs pattern? the entity component system (ecs) pattern is a data driven architecture that separates objects , their properties , and their behavior concept definition entity a unique identifier that groups components together component stores data (no behavior) multiple components define an entity system defines logic and modifies entities with specific components how ecs works entities are just ids (e g , entity 123 ) components hold data (e g , mediacomponent , camerasettingscomponent ) systems process entities with matching components (e g , physicssystem updates entities with collisioncomponent ) this separation allows for efficient, modular, and reusable code 💡 why ecs? unlike traditional object oriented programming, ecs avoids deep inheritance hierarchies instead, it stores data separately and applies logic only when needed , improving performance creating an entity to create an entity, use the createentity() function const entity = ecs createentity() this generates a unique id for an entity adding components components define what an entity is , not what it does components store data only and have no behavior to attach components to an entity, use setcomponent() ecs setcomponent(entity, namecomponent, 'hello world') ecs setcomponent(entity, visiblecomponent) ecs setcomponent(entity, transformcomponent, { position new vector3(0, 1, 0) }) ecs setcomponent(entity, primitivegeometrycomponent, { geometrytype 1 }) essential components in ir engine to display an entity in a scene, ir engine requires specific components component purpose namecomponent assigns a human readable name to the entity visiblecomponent ensures the entity is visible in the scene transformcomponent defines the position, rotation, and scale of the entity primitivegeometrycomponent or a meshcomponent assigns a basic 3d shape or a mesh to the entity see more details about these components in the following section using each component namecomponent defines a readable identifier ecs setcomponent(entity, namecomponent, 'hello world') entities internally use uuids a namecomponent provides a human readable name for debugging visiblecomponent ensures the entity renders in the scene ecs setcomponent(entity, visiblecomponent) without this component, the entity exists in memory but will not be displayed transformcomponent defines position, rotation, and scale ecs setcomponent(entity, transformcomponent, { position new vector3(0, 1, 0) }) this determines where the entity appears in the scene 💡 technical note transformcomponent uses transformation matrices https //en wikipedia org/wiki/transformation matrix to control positioning primitivegeometrycomponent assigns a basic 3d shape ecs setcomponent(entity, primitivegeometrycomponent, { geometrytype 1 }) the number 1 represents a spheregeometry https //github com/ir engine/ir engine/blob/dev/packages/engine/src/scene/constants/geometrytypeenum ts#l28 understand system logic a system is responsible for processing logic on entities that contain specific components 🚀 example a physics system might process only entities with rigidbodycomponent you will define a system in the following guides summary ecs concept definition entity a unique identifier that holds components component a data container (no behavior) system a function that modifies components and executes logic ➡️ next steps now that you understand ecs , it’s time to start your first task, modify an entity in ir engine continue to start working with the engine docid\ d n24zih x9yits1sf4wb to modify your project’s source code , and start interacting with the application