# Referenciar elementos en el código

Puedes hacer referencia a elementos que se agregan mediante la interfaz de arrastrar y soltar de Creator Hub en tu código. Esto es útil para añadir un comportamiento sofisticado a esos elementos, o para hacer referencia a ellos desde otras partes de tu código.

## Obtener por nombre

Al usar Creator Hub y agregar Entities arrastrándolas al canvas, cada entity tiene un nombre único. Usa la `engine.getEntityOrNullByName()` función para hacer referencia a una de estas entities desde tu código.

Usa la `EntityNames` enum para acceder fácilmente a los nombres de las entities que agregaste mediante Creator Hub, o escribe el nombre como una cadena tal como aparece en la vista del entity tree de la escena en el Scene Editor.

```ts
import { EntityNames } from '../assets/scene/entity-names'

function main() {

	// Usa el enum EntityNames
	const door1 = engine.getEntityOrNullByName(EntityNames.Door_1)

	// Escribe el nombre como una cadena
	const door2 = engine.getEntityOrNullByName('Door 2')

	// Asegúrate de que ambas puertas existan en la escena
	(if door1 && door2){
		// 
	}

}
```

![
](/files/4f8aaba813bf4da2ef215b6a18c156fb21332cb1)

El `EntityNames` enum contiene la lista completa de entities añadidas por Creator Hub y se actualiza inmediatamente en cuanto haces cualquier cambio. Si importas `EntityNames.` en tu código, tu IDE te presentará un dropdown con todos los nombres de las entities disponibles.

![
](/files/309739898fb033b5e24ee0bc73fb57c59f8ff0fc)

También puedes usar la `engine.getEntityByName<EntityNames>()` función, pasando `<EntityNames>` como un [TypeScript generic](https://www.typescriptlang.org/docs/handbook/2/generics.html), para validar que realmente existe una entity con ese nombre en tu escena. Si la entity referenciada se renombra en Creator Hub, este método te mostrará un error. Como el resultado de esta función no puede ser `null`, puedes evitar comprobar que la entity exista.

```ts
import { EntityNames } from '../assets/scene/entity-names'

function main() {

	const door1 = engine.getEntityByName<EntityNames>(EntityNames.Door_1)

	// No necesitas comprobar null
	console.log(Transform.get(door1).position.x)

}
```

{% hint style="warning" %}
**📔 Nota**: Asegúrate de usar solo `engine.getEntityOrNullByName()` y `engine.getEntityByName()` dentro de la `main()` función, en funciones que se ejecutan después de `main()`, o en un system. Si se usa fuera de uno de esos contextos, es posible que las entities creadas en el Scene Editor aún no se hayan instanciado.
{% endhint %}

Una vez que obtengas una referencia a una entity con cualquiera de los métodos anteriores, eres libre de realizar cualquier acción con ella, como añadir o eliminar components, modificar valores de components existentes, o incluso eliminar la entity del engine.

```ts
import { EntityNames } from '../assets/scene/entity-names'

function main() {
	// obtener entity
	const door = engine.getEntityOrNullByName(EntityNames.Door_3)
	// verificar que la entity exista
	if (door) {
		// añadir un callback de pointer events
		pointerEventsSystem.onPointerDown(
			{
				entity: door,
				opts: { button: InputAction.IA_PRIMARY, hoverText: 'Open' },
			},
			function () {
				// abrir la puerta
			}
		)
	}
}
```

Todas las entities añadidas mediante el Scene Editor tienen un `Nombre` component, también puedes iterar sobre todas ellas así:

```ts
function main() {
	for (const [entity, name] of engine.getEntitiesWith(Name)) {
		console.log({ entity, name })
	}
}
```

## Obtener por Tag

También puedes obtener entities por sus tags. Los tags son una forma de agrupar entities, y son útiles para identificar entities que tienen el mismo propósito o comportamiento.

Añade Tags a una entity mediante la **Tags** sección en la parte superior del panel de propiedades del item. Puedes elegir entre tags genéricos como **Tag Group 1** hasta **Tag Group 4**, o crear el tuyo propio con un nombre más específico.

![
](/files/f3faa1fe1c5b24cd15ae80b8e57ab0dc8880447b)

{% hint style="info" %}
**💡 Consejo**: Una sola entity puede tener asignados múltiples tags.

<img src="/files/4db5869d801e1a888e77f9c28b82fd3cff28959d" alt="
" data-size="original">
{% endhint %}

Luego puedes obtener todas las entities que tengan un tag específico usando la `engine.getEntitiesByTag()` función. Esto es ideal cuando quieres iterar sobre un grupo de entities que tienen el mismo propósito o comportamiento.

```ts
import { engine } from '@dcl/sdk/ecs'

export function main() {
	const taggedEntities = engine.getEntitiesByTag('myTag')
  
	for (const entity of taggedEntities) {
      // Hacer algo con cada entity
    }
}
```

También puedes añadir o eliminar tags de una entity desde tu código. Esto es útil si quieres cambiar tags según alguna lógica, o generar entities dinámicamente que tengan tags específicos.

```ts
import { Tags } from '@dcl/sdk/ecs'

Tags.remove(entity, tagName);
Tags.add(entity, tagName);
```

## Obtener todos los children de un item

Una vez que tengas una referencia a un item en particular, puedes obtener todos los items que están agrupados como sus children en el entity tree a la izquierda de la pantalla. El siguiente script obtiene la entity padre y luego itera sobre cada uno de sus children que tienen un component Transform. Luego puedes aplicar cualquier lógica personalizada que quieras mientras iteras sobre cada uno.

```ts
import { engine, Entity, Transform, Name, getEntitiesWithParent } from '@dcl/sdk/ecs'

function main() {
	// obtener la entity padre
	const parent = engine.getEntityByName<EntityNames>(EntityNames.ParentEntity)

	// obtener la lista completa de children
	const children = getEntitiesWithParent(engine, myEntity)
	for (const child of children) {
   		// procesar cada entity child
	}
}
```

## Triggers de smart item

Puedes detectar los **eventos Trigger**, y responder a ellos con código personalizado. Por ejemplo, podrías colocar un smart item de botón y activar código personalizado cuando se haga click en el botón.

Usa `getTriggerEvents` para obtener un objeto que pueda manejar eventos de trigger de un smart item en particular, luego usa la `.on()` función del objeto devuelto para suscribir una función callback. Esta función callback se ejecuta cada vez que ocurre el evento trigger.

Por ejemplo, si una escena tiene un botón con el siguiente **On Click** evento

![
](/files/9b819464f5a2c38a2c78853bd280ba5f6fc61749)

```ts
import { engine } from '@dcl/sdk/ecs'
import { getTriggerEvents, getActionEvents } from '@dcl/asset-packs/dist/events'
import { TriggerType } from '@dcl/asset-packs'
import { EntityNames } from '../assets/scene/entity-names'

function main() {
	const restart = engine.getEntityOrNullByName(EntityNames.Restart_Button)
	if (restart) {
		const restart_event = getTriggerEvents(restart)
		restart_event.on(TriggerType.ON_CLICK, () => {
			// restartGame()
		})
	}
}
```

También puedes suscribirte de forma similar a cualquier otro tipo de eventos trigger, como **ON\_PLAYER\_ENTERS\_AREA**, **ON\_SPAWN**, **ON\_TWEEN\_END**, etc.

## Acciones de smart item

Puedes detectar la activación de las **Actions**, y responder a ello con código personalizado. Por ejemplo, podrías colocar un smart item de puerta y ejecutar código personalizado cada vez que se llame a la **Open** action.

Usa `getActionEvents` para obtener un objeto para manejar las acciones de un smart item específico. Luego puedes usar la `.on()` función del objeto devuelto para suscribir una función callback. Esta función callback se ejecuta cada vez que ocurre la acción, independientemente de si la acción fue activada por otro smart item, o incluso por código personalizado tuyo.

Por ejemplo, si una escena tiene una puerta con la siguiente **Open** action

![
](/files/4d3b252f65feed686042d043ff427bd72a7e1a49)

```ts
import { engine } from '@dcl/sdk/ecs'
import { getTriggerEvents, getActionEvents } from '@dcl/asset-packs/dist/events'
import { TriggerType } from '@dcl/asset-packs'
import { EntityNames } from '../assets/scene/entity-names'

function main() {
	const door = engine.getEntityOrNullByName(EntityNames.Wooden_Door)
	if (door) {
		// detectar actions
		const actions = getActionEvents(door)
		actions.on('Open', () => {
			console.log('Door opened!!')
			// código personalizado
		})

		// detectar triggers
		const triggers = getTriggerEvents(door)
		triggers.on(TriggerType.ON_CLICK, () => {
			console.log('Door clicked!!')
			// código personalizado
		})
	}
}
```

También puedes emitir eventos action desde tu código; esto te permite aprovechar actions que ya están definidas dentro del component Action del smart item. El siguiente fragmento llama a la action "Open" en un smart item de puerta cada vez que se activa un smart item de botón.

```ts
import { engine } from '@dcl/sdk/ecs'
import { getTriggerEvents, getActionEvents } from '@dcl/asset-packs/dist/events'
import { TriggerType } from '@dcl/asset-packs'
import { EntityNames } from '../assets/scene/entity-names'

function main() {
	const button = engine.getEntityOrNullByName(EntityNames.Red_Button)
	const door = engine.getEntityOrNullByName(EntityNames.Wooden_Door)
	if (button && door) {
		// referencias a actions y triggers
		const buttonTriggers = getTriggerEvents(button)
		const doorActions = getActionEvents(door)

		// detectar triggers en el botón
		buttonTriggers.on(TriggerType.ON_INPUT_ACTION, () => {
			// abrir la puerta
			doorActions.emit('Open', {})
		})
	}
}
```

{% hint style="info" %}
**💡 Consejo**: Si no estás intentando hacer algo muy complicado, en lugar de escribir código también puedes crear un smart item personalizado para manejar las acciones que quieres realizar. Ver [Hacer cualquier item smart](/creator/content-creator-es/scene-editor/interactividad/make-any-item-smart.md).
{% endhint %}

## Otros componentes de smart item

Los smart items pueden incluir components especiales que forman parte de la biblioteca asset-packs, como `States` o `Counter`. Estos components no forman parte del Decentraland SDK, pero se pueden obtener mediante la `getComponents()` función de la biblioteca. Luego puedes leer o escribir valores en estos components desde el código de tu escena, para lograr una integración aún más estrecha entre el comportamiento del smart item y el código.

El siguiente ejemplo lee y registra el valor de un component State de un smart item de cofre, cada vez que se activan las actions del cofre.

```ts

import { engine } from '@dcl/sdk/ecs'
import { getComponents } from '@dcl/asset-packs'
import { getTriggerEvents } from '@dcl/asset-packs/dist/events'
import { TriggerType } from '@dcl/asset-packs'
import { EntityNames } from '../assets/scene/entity-names'


export function main() {

    const chest = engine.getEntityByName<EntityNames>(EntityNames.chest)
 
    if (chest) {

        const chestTriggers = getTriggerEvents(chest)

        chestTriggers.on(TriggerType.ON_INPUT_ACTION, () => {
            const { States } = getComponents(engine)
            let state = States.getMutableOrNull(chest)?.currentValue
            console.log( "nuevo estado del chest ", state)
        })
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-es/scene-editor/extender-con-codigo/reference-items.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.