Suscribirse a cambios

Detecta cambios en un componente y ejecuta funciones en cada cambio

Una forma ordenada de escribir tu código es suscribirse a eventos y ejecutar una función cada vez que ocurre ese evento.

Un número de Listeners de eventos vienen predefinidos como parte del SDK, pero también puedes usar el onChange() método en cualquier componente para lograr lo mismo. Esto también funciona con cualquier entrypoint que hayas definido, sin necesidad de trabajo adicional.

Por ejemplo, la siguiente función verifica el AvatarEquippedData componente en la entidad del jugador y ejecuta una función si el jugador cambia cualquiera de sus wearables o emotes equipados. Los nuevos valores del componente 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('New wearables list: ', equipped.wearableUrns)
		console.log('New emotes list : ', equipped.emoteUrns)
	})
}

Gracias al onChange() método, no es necesario crear un system y verificar iterativamente nuevos valores en cada frame; simplifica en gran medida 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 bucle del juego y podría potencialmente provocar fallos.

El mismo método funciona de forma inmediata con entrypoint. Por ejemplo:

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

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

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

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

También puedes combinar este enfoque con . Las escenas de Decentraland se renderizan a 30 ticks por segundo, siempre que sea posible. Si la máquina tiene dificultades para renderizar cada tick, puede resultar en actualizaciones menos frecuentes., para suscribirte en masa a cada entidad en la escena que tenga cierto componente 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 se suscribirá a onChange() para las entidades que existen 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 el cambio de un componente, recomendamos importar la librería de TypeScript Mitt en tu escena. Esta librería ofrece funciones simples para emitir y escuchar eventos.