Defining components

learn how to define custom components in ir engine using definecomponent() , structure component data with componentpartial , and configure essential properties introduction a component is a fundamental part of the entity component system (ecs) pattern in ir engine components store data that describes an entity’s properties and behaviors , allowing systems to process and update them efficiently creating a component to define a new component, use definecomponent() , which accepts a componentpartial object containing key configuration fields example defining a simple component the following code creates a hellocomponent that tracks whether an entity has been initialized const hellocomponent = ecs definecomponent({ name 'ir engine tutorial hellocomponent', jsonid 'ir engine tutorial hello', oninit () => ({ initialized false }) // default state }) this component assigns an initialized property to entities, allowing a system to determine whether an entity has already processed specific logic understanding componentpartial the definecomponent() function accepts a componentpartial object, which provides flexible definitions for components ℹ️ what are typescript partials? a partial in typescript means that some properties are optional during definition but are required when used 📌 reference see typescript partial https //www typescriptlang org/docs/handbook/utility types html#partialtype for more details the componentpartial object includes several key properties that define how a component behaves core component properties below is a breakdown of the most important properties in componentpartial and how they affect component behavior 1\ name (required) the name property defines a human readable label for the component this name appears in studio, debugging tools, and logs , making it easier to identify name 'ir engine tutorial hellocomponent' 📌 follow the naming conventions outlined in coding style and best practices docid\ hkml5t4fug7x4whizhsuy 2\ jsonid (optional, but recommended) the jsonid property assigns an internal identifier used when serializing components into json this is required for gltf based exports and scene persistence jsonid 'ir engine tutorial hello' 📌 follow the required json naming format outlined in coding style and best practices https //www notion so/styling#jsonid naming requirements 3\ oninit (optional, but commonly used) the oninit property defines a function that executes once when the component is added to an entity it sets the initial state of the component oninit () => ({ initialized false }) this function returns an object that describes the component’s runtime data structure how does oninit work? the oninit function returns the shape of the component’s runtime data, which has the type schema oninit? (this soacomponenttype\<schema>, entity entity) => componenttype & oninitvalidatenotstate\<componenttype> // this `@internal` the component partial itself // entity the entity to which this component is being assigned // returns the `schema` (aka shape) of the component's runtime data this means that oninit is responsible for defining what kind of data the component holds you can use this to store state variables, metadata, or any relevant information about an entity additional component properties while the properties above define the basic functionality of a component, definecomponent() supports several advanced features property purpose schema defines the expected structure of component data tojson serializes the component’s data when saving a scene onset triggers when the component’s data updates onremove triggers when the component is removed from an entity reactor defines react based side effects for the component errors stores error handling information you don’t need to use these properties in every component however, understanding them helps when creating more complex systems full componentpartial interface the following is the full interface for componentpartial , as defined in componentfunctions ts { name string jsonid? string oninit? (this soacomponenttype\<schema>, entity entity) => componenttype & oninitvalidatenotstate\<componenttype> // defines the expected structure of the component’s runtime data schema? schema // converts component data to json format when saving a scene tojson? (entity entity, component state\<componenttype>) => json // handles updates to the component’s data onset? (entity entity, component state\<componenttype>, json? setjson) => void // handles cleanup logic when the component is removed from an entity onremove? (entity entity, component state\<componenttype>) => void | promise\<void> // defines react based logic related to this component reactor? react fc errors? errortypes\[] } ➡️ next steps now that you know how to define a custom component, the next step is using queries to find and process entities dynamically 📌 continue to define a query docid\ qw4mkitlr8ooyjv9ftemn