TypeScript guides
Hello World tutorial
Define a system
11 min
so far, you have learned how to create entities and attach components in ir engine however, your project does not yet include any logic in this guide, you will define a system , which is responsible for executing logic in the entity component system (ecs) architecture why do you need a system? a system executes logic on entities that contain specific components without a system, your project would only define data (components) but lack behavior what systems do in ecs ā
process entities based on their components ā
run automatically based on engine timing ā
execute logic globally or based on conditions step 1 move logic into a function currently, your entity creation logic runs immediately when the project loads š to follow best practices, move it into a function let initialized = false // track execution state function createhelloworldentity() { if (initialized) return initialized = true // prevent multiple executions const entity = ecs createentity() 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 geometrytypeenum spheregeometry }) } why move logic into a function? ensures controlled execution prevents duplicate entities allows execution only when needed step 2 define a system now, wrap your function inside a system š a system must include a unique identifier ( uuid ) a function to execute an execution order (e g , after physicssystem ) export const helloworldsystem = ecs definesystem({ uuid 'helloworld system', execute createhelloworldentity, insert { after physicssystem } }) how does this improve execution? issue before now logic runs immediately hard to control runs when the system executes no execution control runs on project load now follows engine timing entities created globally no restrictions can be controlled via queries later step 3 final implementation after making these changes, your hello ts file should look like this import { ecs } from '@ir engine/packages/ecs' import { physicssystem } from '@ir engine/packages/spatial/src/physics/physicsmodule' import { namecomponent } from '@ir engine/packages/spatial/src/common/namecomponent' import { visiblecomponent } from '@ir engine/packages/spatial/src/renderer/components/visiblecomponent' import { transformcomponent } from '@ir engine/packages/spatial/src/transform/components/transformcomponent' import { primitivegeometrycomponent } from '@ir engine/packages/engine/src/scene/components/primitivegeometrycomponent' import { vector3 } from 'three' import { geometrytypeenum } from '@ir engine/packages/engine/src/scene/constants/geometrytypeenum' // track execution state let initialized = false // function to create the entity function createhelloworldentity() { if (initialized) return initialized = true const entity = ecs createentity() 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 geometrytypeenum spheregeometry }) } // define the system to execute the function export const helloworldsystem = ecs definesystem({ uuid 'helloworld system', execute createhelloworldentity, insert { after physicssystem } }) step 4 confirm the changes to verify that the system executes correctly restart the engine ( ctrl + c , then npm run dev ) open studio at https //localhost 3000/studio https //localhost 3000/studio open the ir tutorial hello project create a new scene ā
a white sphere should appear , created by the system š success! your entity is now managed by a system rather than executing globally next steps now that your project follows best practices with a system , the next step is to control execution more effectively using custom components š proceed to create a scene component docid\ mqobvngirweqdt8tbr3sy