Suscribirse a cambios

Detecta cambios en un componente y ejecuta funciones en cada cambio

Una buena forma de escribir tu código es suscribirte a eventos y ejecutar una función cada vez que ese evento ocurra.

Una serie de Listeners de eventos vienen predefinidos como parte del SDK, pero también puedes usar la onChange() método en cualquier component para lograr lo mismo. Esto también funciona con cualquier Componente personalizado que definiste, sin necesidad de hacer ningún trabajo adicional.

Por ejemplo, la siguiente función comprueba el AvatarEquippedData component de la entity del jugador y ejecuta una función si el jugador cambia cualquiera de sus Wearables equipados o Emotes. Los nuevos valores del component se pasan como argumentos de la función.

import { AvatarEquippedData } from '@dcl/sdk/ecs'

export function main() {
	AvatarEquippedData.onChange(engine.PlayerEntity, (equipped) => {
		if (!equipped) return
		console.log('Nueva lista de wearables: ', equipped.wearableUrns)
		console.log('Nueva lista de emotes: ', equipped.emoteUrns)
	})
}

Gracias al onChange() método, no es necesario crear un System y comprobar iterativamente nuevos valores en cada frame, lo que simplifica muchísimo este caso de uso tan común.

📔 Nota: No uses onChange() dentro de un System, ya que eso suscribiría una nueva copia de la función en cada frame del game loop, y podría potencialmente provocar fallos.

El mismo método funciona de forma nativa con Componente personalizado. Por ejemplo:

// definir component
export const MyComponent = engine.defineComponent('myComponent', {
	value1: Schemas.Boolean,
	value2: Schemas.Float,
})

// Uso
export function main() {
	// Crear entities
	const myEntity = engine.addEntity()

	// Crear instancias del component
	MyComponent.create(myEntity, {
		value1: true,
		value2: 10,
	})

	// Suscribirse a los cambios
	MyComponent.onChange(myEntity, (componentData) => {
		if (!componentData) return
		console.log(componentData.value1)
		console.log(componentData.value2)
	})
}

También puedes combinar este enfoque con Consultar components, para suscribir masivamente a cada entity de la escena que tenga un cierto component a su propia función.

export function main() {
	for (const [entity] of engine.getEntitiesWith(MyComponent)) {
		MyComponent.onChange(entity, (componentData) => {
			if (!componentData) return
			console.log(componentData.value1)
			console.log(componentData.value2)
		})
	}
}

Ten en cuenta que este enfoque solo suscribirá a onChange() para las entidades que existan al inicio de la escena, por ejemplo, entidades creadas a través de la UI del Creator Hub.

💡 Consejo: Si prefieres, en su lugar, manejar eventos que no estén necesariamente relacionados con un cambio de component, te recomendamos importar la biblioteca TypeScript Mitt en tu escena. Esta biblioteca ofrece funciones sencillas para emitir y escuchar eventos.