> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-es/escenas-sdk7/primeros-pasos/sdk-101.md).
# Inicio rápido del SDK
Este tutorial te guía para crear tu primera escena, combinando las diferentes herramientas que tienes disponibles: el Scene Editor visual del Creator Hub, código escrito a mano usando el Decentraland SDK y asistido por IA **vibe coding**. Usarás las tres juntas y aprenderás cuándo destaca cada una.
## Instala Creator Hub
Creator Hub te permite crear, previsualizar y desplegar escenas de Decentraland. Descarga Creator Hub [aquí](https://decentraland.org/download/creator-hub).
Para editar el código de tu escena, también necesitas un editor de código. [Visual Studio Code](https://code.visualstudio.com/) y [Cursor](https://www.cursor.com/) son ambas excelentes opciones, pero cualquier editor de código funciona.
Lee la [guía de instalación](/creator/content-creator-es/scene-editor/comenzar/editor-installation.md) para más detalles.
## Crea tu primera escena
1. Abre Creator Hub.
2. Selecciona la **pestaña Scenes** y haz clic en **New Scene**.
3. Elige una plantilla de inicio. Para este ejercicio, elige la **Empty Scene**.
Este paso puede llevar un par de minutos. Poblará tu carpeta con el conjunto predeterminado de archivos para una escena básica. Una vez que termine, verás la cuadrícula vacía de tu escena.
## Añade elementos de los asset packs
Explora los **asset packs** en la sección inferior del Scene Editor y arrastra un par de elementos a tu escena. Por ahora, cualquier elemento sirve.
Los elementos ya colocados se pueden hacer clic y arrastrar para reposicionarlos. Consulta [conceptos básicos del Scene Editor](/creator/content-creator-es/scene-editor/comenzar/scene-editor-essentials.md#position-items) para más detalles.
{% hint style="info" %}
**💡 Consejo**: Cubre toda la escena con un elemento de tipo Ground. Los elementos de tipo **Ground** tienen un icono de cubo de pintura. Si arrastras uno de estos a tu escena, cubrirá todo el suelo de tu escena con copias de este elemento.
{% endhint %}
## Ejecuta una vista previa
Haz clic en el **Preview** botón del menú superior para cargar tu escena dentro de Decentraland. Ahora puedes explorar la escena como un avatar de Decentraland.
Puedes dejar abierta la ventana de vista previa mientras trabajas: se actualiza cada vez que haces un cambio. Lee más en [previsualizar una escena](/creator/content-creator-es/escenas-sdk7/primeros-pasos/preview-scene.md).
## Activos 3D personalizados
Descarga este modelo 3D de un aguacate en *glb* formato desde el siguiente [enlace](https://github.com/decentraland-scenes/avocado/raw/main/avocado-glb.zip) y descomprímelo.
Arrastra el **avocado.glb** archivo desde tu explorador de archivos al panel inferior del Scene Editor (el mismo panel que contiene las pestañas **Asset Packs** y **Local Assets** ) y haz clic en **Importar**.
Ahora puedes encontrar el **avocado.glb** modelo en la **Local Assets** pestaña **Scene** carpeta. Arrastra el archivo a tu escena, como cualquier elemento de los Asset Packs.
## Edita el código de la escena
Haz clic en el **<> Código** botón del menú superior para abrir el proyecto de tu escena en tu editor de código.
{% hint style="warning" %}
**📔 Nota**: Si no se abre nada, asegúrate de tener instalado un editor de código como [Visual Studio Code](https://code.visualstudio.com/) o [Cursor](https://www.cursor.com/) .
{% endhint %}
En el margen izquierdo de tu editor de código puedes navegar por los archivos y la estructura de carpetas de tu proyecto. Abre el archivo `index.ts` dentro de la carpeta `src` . Su contenido debería verse así:
```ts
import {} from '@dcl/sdk/math'
import { engine } from '@dcl/sdk/ecs'
export function main() {}
```
Las escenas de Decentraland están escritas en [TypeScript](https://www.typescriptlang.org/), usando el Decentraland SDK: una biblioteca con todo lo que necesitas para posicionar contenido 3D, añadir interactividad y controlar lo que sucede en tu escena.
Este archivo define una función llamada `main()`, que es el punto de entrada de la escena: cualquier código que pongas allí se ejecuta cuando la escena se carga por primera vez.
Ya arrastraste un aguacate a la escena visualmente. Ahora vamos a añadir un segundo, esta vez escribiendo código. Sustituye todo el contenido de tu `index.ts` archivo por lo siguiente:
```ts
import { Vector3 } from '@dcl/sdk/math'
import { engine, Transform, GltfContainer } from '@dcl/sdk/ecs'
export function main() {
// crear una nueva Entity
let avocado2 = engine.addEntity()
// darle un Transform
Transform.create(avocado2, {
position: Vector3.create(8, 0, 8),
})
// darle un GLTF
GltfContainer.create(avocado2, {
src: 'assets/scene/avocado.glb',
})
}
```
Estas líneas crean una nueva [entity](/creator/content-creator-es/escenas-sdk7/arquitectura/entities-components.md), le dan una [forma](/creator/content-creator-es/escenas-sdk7/esenciales-del-contenido-3d/shape-components.md) basada en el modelo 3D que descargaste, y [establecen su posición](/creator/content-creator-es/escenas-sdk7/esenciales-del-contenido-3d/entity-positioning.md) mediante el **Transform** component.
Como regla general, el código que escribas en `index.ts` debería estar todo dentro de `main()` (o en otras funciones a las que main haga referencia indirectamente). Consulta [Ciclo de vida de la escena](/creator/content-creator-es/escenas-sdk7/primeros-pasos/coding-scenes.md#scene-lifecycle) para más detalles.
Ejecuta la vista previa de la escena: ahora deberías ver dos aguacates, el que añadiste en el Scene Editor y el que añadiste mediante código.
{% hint style="warning" %}
**📔 Nota**: El segundo aguacate existe **solo en tu código**. Aparece cuando ejecutas la escena, pero el canvas del Scene Editor y el árbol de entidades no pueden mostrar las entities creadas en `index.ts`. No te alarmes si no lo ves en el editor. Esto es algo clave que debes tener en cuenta cuando combines edición visual con código.
{% endhint %}
Ambos aguacates están construidos con las mismas piezas. Selecciona el **primer** aguacate en el Scene Editor: el panel de propiedades muestra un **Transform** y un **GltfContainer** component con los mismos tipos de campos que acabas de escribir en código. Son dos vistas de lo mismo.
## Añade interactividad con un Script
Vamos a hacer que un aguacate responda al jugador. Podríamos hacerlo añadiendo código en el `index.ts` que ya estábamos editando, pero en su lugar vamos a usar el **componente Script**: una forma de adjuntar código directamente a un elemento en el Scene Editor. Mantiene el comportamiento de cada elemento encapsulado, e incluso puedes reutilizar el mismo script en varios elementos.
1. En el Scene Editor, selecciona el primer aguacate (el que arrastraste; recuerda, el aguacate solo de código no es visible aquí).
2. Haz clic en el **+** botón en la parte superior del panel de propiedades y selecciona **Script** para añadir un componente Script.
3. Haz clic en **+ Create New Script** y llámalo `AvocadoScript`.
4. Haz clic en el **<> Código** botón del componente Script para abrir el nuevo archivo en tu editor de código.
El script es una clase con tres partes principales (comentarios recortados por brevedad):
```ts
import { engine, Entity } from '@dcl/sdk/ecs'
import {} from '@dcl/sdk/math'
export class AvocadoScript {
constructor(
public src: string, // NO ELIMINAR
public entity: Entity, // NO ELIMINAR
// Añade tus entradas personalizadas abajo
) {}
start() {
// Se llama una vez, cuando la escena se carga
}
update(dt: number) {
// Se llama en cada frame
}
}
```
* El **constructor** define parámetros que aparecen como campos editables en el componente Script en Creator Hub. No elimines `src` o `entity`.
* **`start()`** se ejecuta **una vez**, cuando se carga la escena. Úsalo para la configuración inicial: crear componentes, registrar manejadores de clic, etc.
* **`update(dt)`** se ejecuta en **cada frame** del juego, aproximadamente 30 veces por segundo. Úsalo para comportamientos continuos, como el movimiento. `dt` te indica cuántos segundos han pasado desde el último frame.
Dentro de la clase, `this.entity` siempre se refiere a la entity que contiene el componente Script: en este caso, tu aguacate. Esto es lo que hace que los scripts sean reutilizables: adjunta el mismo script a diez elementos, y cada uno actúa sobre sí mismo.
### Vibe coding de tu primera interacción
Puedes escribir el siguiente código a mano, pero este es un gran momento para probar **vibe coding**: describirle a un asistente de IA lo que quieres y dejar que escriba el código. La mayoría de los editores de código tienen uno integrado, como el chat de Cursor, GitHub Copilot en VS Code, o [Claude Code](https://claude.com/product/claude-code). También puedes escribir prompts desde fuera de tu editor de código, como con Claude Desktop o Claude Code en la línea de comandos.
Antes de tu primer prompt, instala las skills de Decentraland SDK para que la IA conozca los patrones del SDK y cometa muchos menos errores:
```bash
npx skills add decentraland/sdk-skills
```
Estas skills son documentos de referencia que la IA consulta cada vez que no está segura de cómo hacer algo con el SDK, para escribir código correcto en lugar de adivinar. Consulta [Vibe Coding con IA](/creator/content-creator-es/escenas-sdk7/primeros-pasos/vibe-coding.md) para opciones de configuración y consejos sobre prompts.
Ahora prueba un prompt como este:
> En AvocadoScript.ts, haz que el aguacate registre un mensaje en la consola cuando el jugador haga clic en él.
Deberías acabar con algo como esto (o pegarlo tú mismo):
```ts
import { engine, Entity, pointerEventsSystem, InputAction } from '@dcl/sdk/ecs'
import {} from '@dcl/sdk/math'
export class AvocadoScript {
constructor(
public src: string,
public entity: Entity,
) {}
start() {
pointerEventsSystem.onPointerDown(
{
entity: this.entity,
opts: { button: InputAction.IA_POINTER },
},
() => {
console.log('AGUACATE CLICADO')
}
)
}
update(dt: number) {}
}
```
Añadió algo de comportamiento de clic dentro de la `start()` función. Solo necesitamos definir el comportamiento del clic una vez, y reaccionará cada vez que el jugador haga clic en el elemento. La `pointerEventsSystem.onPointerDown()` instrucción define tres cosas:
* Sobre qué `entity` actúan los eventos de clic: aquí `this.entity`, el aguacate que contiene el script.
* Un `objeto opts` : qué botón usar y otros argumentos opcionales que no estamos usando ahora.
* Una función que se ejecuta cada vez que se hace clic en la entity.
Para ver el mensaje registrado, ejecuta la vista previa y abre la consola haciendo clic en el  icono de la esquina superior derecha. También puedes alternarlo pulsando la **\`** tecla. Cada vez que hagas clic en el aguacate, verás que aparece una nueva línea:
{% hint style="warning" %}
**📔 Nota**: Para que una entity pueda hacerse clic, debe tener una geometría collider. El modelo usado aquí ya incluye una. Consulta [Colliders](https://github.com/decentraland/docs/tree/main/creator/sdk7/3d-modeling/colliders.md) para ver soluciones alternativas para los modelos que no lo tienen.
{% endhint %}
### Haz que el aguacate desaparezca
¡Vamos a hacer que el clic haga algo más emocionante ahora! Pídele a tu asistente de IA:
> Cuando se haga clic en el aguacate, haz que desaparezca. Quiero que desaparezca con una animación de rebote y encogimiento. También quiero que el hint que veo al apuntar al aguacate diga "Collect".
Deberías acabar con algo como esto:
```ts
import { engine, Entity, pointerEventsSystem, InputAction, Tween, EasingFunction } from '@dcl/sdk/ecs'
import { Vector3 } from '@dcl/sdk/math'
export class AvocadoScript {
constructor(
public src: string,
public entity: Entity,
) {}
start() {
pointerEventsSystem.onPointerDown(
{
entity: this.entity,
opts: { button: InputAction.IA_POINTER, hoverText: 'Collect' },
},
() => {
this.collect()
}
)
}
collect() {
Tween.setScale(
this.entity,
Vector3.One(),
Vector3.Zero(),
500,
EasingFunction.EF_EASEINBOUNCE
)
}
update(dt: number) {}
}
```
Desglosemos lo que hizo la IA.
* Para crear la animación con rebote, usó un **Tween**. Un tween describe una transición gradual de la posición, rotación o escala de una entity a lo largo del tiempo. Aquí `Tween.setScale()` reduce el tamaño del aguacate desde su tamaño completo (`Vector3.One()`) hasta nada (`Vector3.Zero()`) durante 500 milisegundos, usando una curva de easing con rebote. Aprende más sobre tweens en [mover entities](/creator/content-creator-es/escenas-sdk7/esenciales-del-contenido-3d/move-entities.md).
* En lugar de escribir el tween directamente dentro de la función de clic, creó un `método collect()` . Esto no es obligatorio (si tu IA puso el tween dentro de la función de clic, también funciona), pero es una buena práctica: los métodos mantienen el código legible y te permiten reutilizar la misma lógica desde distintos lugares.
* Para mostrar el hint "Collect" en el aguacate, estableció eso como el valor de `hoverText` .
Ejecuta la vista previa y haz clic en el aguacate: debería desaparecer con estilo.
{% hint style="warning" %}
**📔 Nota**: El aguacate se encoge hasta un tamaño de 0, pero la entity sigue existiendo. Idealmente deberías eliminar la entity después de que termine el tween, para mantener tu escena más ligera. Consulta [Al terminar el tween](/creator/content-creator-es/escenas-sdk7/esenciales-del-contenido-3d/move-entities.md#on-tween-finished).
{% endhint %}
### Ejecutar código en cada frame
Hasta ahora, todo nuestro código se ejecutó en `start()`. Vamos a usar `update()` para hacer que el aguacate gire continuamente. Sustituye el constructor y `update()` por:
```ts
constructor(
public src: string,
public entity: Entity,
public speed: number = 45,
) {}
update(dt: number) {
const transform = Transform.getMutable(this.entity)
transform.rotation = Quaternion.multiply(
transform.rotation,
Quaternion.fromAngleAxis(this.speed * dt, Vector3.Up())
)
}
```
También tendrás que añadir `Transform` y `Quaternion` a los imports en la parte superior del archivo, para que se vean así:
```ts
import { engine, Entity, pointerEventsSystem, InputAction, Tween, EasingFunction, Transform } from '@dcl/sdk/ecs'
import { Vector3, Quaternion } from '@dcl/sdk/math'
```
{% hint style="info" %}
**💡 Consejo**: En lugar de editar los imports a mano, puedes hacer clic en los errores marcados por tu editor de código y dejar que los agregue automáticamente.
{% endhint %}
En cada frame, esto gira un poco más el aguacate. Multiplicar por `dt` hace que el movimiento sea suave e independiente de la tasa de frames: el aguacate gira a 45 grados por segundo, sin importar lo rápido que funcione la máquina del jugador.
Como `speed` es un parámetro del constructor, también aparece como un campo en el componente Script en Creator Hub. Haz clic en el icono de refrescar en la parte superior derecha del componente Script para verlo y luego ajusta el valor sin tocar ningún código.
Cada entity almacena su propio valor para el campo **Velocidad** , así que varios elementos pueden compartir el mismo script pero comportarse de manera diferente. Pruébalo: copia el aguacate con Ctrl + C y Ctrl + V, mueve la copia para que no se superpongan y establece una velocidad diferente en cada uno. Ahora cada aguacate gira a su propio ritmo.
Los scripts pueden hacer mucho más, como exponer acciones que otros smart items pueden activar. Consulta [componente Script](/creator/content-creator-es/scene-editor/ampliar-con-codigo/script-component.md) para ver el panorama completo.
## Hacer referencia a un item desde el Scene Editor
El componente Script es la forma más fácil de dar comportamiento a un solo elemento, pero hay una alternativa: tu código en `index.ts` puede obtener cualquier elemento que hayas añadido visualmente, por nombre, usando `engine.getEntityOrNullByName()`. Esto es útil cuando una lógica involucra varios elementos o cuando quieres tener todo en un solo lugar. Usa el nombre que aparece en el [árbol de entidades](/creator/content-creator-es/scene-editor/comenzar/scene-editor-essentials.md#the-entity-tree).
En este ejemplo, usamos una entity llamada **Yellow Crate**. Puedes usar cualquier elemento, solo escribe su nombre exactamente como aparece en el árbol de entidades.
{% hint style="info" %}
**💡 Consejo**: Puedes cambiar el nombre de las entities haciendo clic derecho y seleccionando **Renombrar** en el árbol de entidades.
{% endhint %}
```ts
export function main() {
// código de avocado2 de antes
// (...)
const crate = engine.getEntityOrNullByName('Yellow Crate')
if (crate) {
pointerEventsSystem.onPointerDown(
{
entity: crate,
opts: { button: InputAction.IA_POINTER, hoverText: 'Abrir' },
},
function () {
console.log('CAJA CLICADA')
}
)
}
}
```
Aquí `engine.getEntityOrNullByName()` obtiene una referencia a la entity llamada *Yellow Crate*. La `if (crate)` comprobación garantiza que la entity realmente exista en la escena; si no hay ninguna entity con ese nombre, `crate` es `null`. Consulta [Elementos de referencia](https://github.com/decentraland/docs/tree/main/creator/sdk7/code/reference-items.md) para más información.
{% hint style="info" %}
**💡 Consejo**: Todas las entities añadidas mediante el Scene Editor ya están cargadas cuando `main()` se ejecuta, así que es seguro hacer referencia a ellas allí o en funciones invocadas indirectamente por `main()`.
{% endhint %}
## Más tutoriales
Lee [Programando escenas](/creator/content-creator-es/escenas-sdk7/primeros-pasos/coding-scenes.md) para una comprensión de alto nivel de cómo funcionan las escenas de Decentraland.
Para ejemplos creados con SDK7, consulta la [página de ejemplos](https://studios.decentraland.org/resources?sdk_version=SDK7), que contiene varias escenas pequeñas.
Consulta la sección **guía de desarrollo** para obtener más instrucciones sobre cómo añadir contenido a tu escena.
## Conecta con otros desarrolladores
Visita el [Decentraland Discord](https://dcl.gg/discord) y el [Decentraland DAO Discord](https://discord.gg/bxHtcMxUs4) para unirte a una animada conversación sobre lo que es posible y cómo en el Discord de Decentraland **Creators** sección.
Para depurar cualquier problema, revisa la [Solución de problemas](/creator/content-creator-es/escenas-sdk7/depuracion/troubleshooting.md) y [depuración](/creator/content-creator-es/escenas-sdk7/depuracion/debug-in-preview.md) secciones. Un asistente de IA con [habilidades de SDK](/creator/content-creator-es/escenas-sdk7/primeros-pasos/vibe-coding.md) instaladas también es un gran compañero de depuración: pega el mensaje de error de la consola o describe qué no está funcionando como se espera, y normalmente puede encontrar el problema en tu código. Si no encuentras una solución, puedes publicar en la [categoría de soporte de SDK](https://forum.decentraland.org/c/support-sdk/11) en el Foro de Decentraland.
## Assets de arte 3D
Una buena experiencia tendrá un gran arte 3D que la acompañe. Si te interesa crear esos modelos 3D tú mismo, consulta la [sección de modelado 3D](/creator/content-creator-es/modelado-3d-y-animaciones/3d-models.md). Pero si prefieres centrarte en la programación o en el diseño del juego, ¡no necesitas crear tus propios assets! Consulta [Recursos útiles](/creator/content-creator-es/escenas-sdk7/primeros-pasos/useful-resources.md) para bibliotecas de assets y herramientas de IA que puedes usar para obtener modelos 3D para tu escena.
## Publica tu escena
Si posees un NAME de Decentraland, un nombre ETH ENS o LAND, o tienes permisos otorgados por alguien que sí los tenga, puedes subir tu escena a Decentraland. Consulta [publicación](/creator/content-creator-es/escenas-sdk7/publicacion/publishing.md).
## Otra información útil
* [Vibe Coding con IA](/creator/content-creator-es/escenas-sdk7/primeros-pasos/vibe-coding.md)
* [Flujo de trabajo de desarrollo](/creator/content-creator-es/escenas-sdk7/primeros-pasos/dev-workflow.md)
* [Edición de escenas](/creator/content-creator-es/scene-editor/comenzar/about-editor.md)
* [conceptos básicos del Scene Editor](/creator/content-creator-es/scene-editor/comenzar/scene-editor-essentials.md)
* [Restricciones de diseño para juegos](/creator/content-creator-es/escenas-sdk7/disenando-la-experiencia/design-games.md)
* [modelado 3D](/creator/content-creator-es/modelado-3d-y-animaciones/3d-models.md)
* [Limitaciones de la escena](/creator/content-creator-es/escenas-sdk7/optimizacion/scene-limitations.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.decentraland.org/creator/content-creator-es/escenas-sdk7/primeros-pasos/sdk-101.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.