> 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/scenes-sdk7/primeros-pasos/sdk-101.md).
# Inicio rápido de SDK
Crea tu primera escena de Decentraland con Creator Hub, el SDK y vibe coding asistido por IA usando las SDK Skills oficiales.
Este tutorial te guía para crear tu primera escena, combinando las distintas herramientas que tienes disponibles: el Scene Editor visual del Creator Hub, código escrito a mano usando el Decentraland SDK y **vibe coding**. Usarás las tres juntas y aprenderás cuándo brilla cada una.
## ¿Cómo creo una scene de Decentraland?
1. **Instala el** [**Creator Hub**](https://decentraland.org/download/creator-hub), la app oficial de escritorio para crear, previsualizar y publicar scenes. Es la herramienta recomendada para creadores de todos los niveles.
2. **Si utilizas un asistente de código de IA** (como Claude Code, Cursor o Copilot), instala el oficial [Decentraland SDK Skills](/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md) para que conozca los patrones verificados de SDK7: `npx skills add decentraland/sdk-skills`
3. **El** [**CLI**](/creator/content-creator-es/scenes-sdk7/primeros-pasos/using-the-cli.md) es una alternativa para usuarios avanzados y flujos de trabajo automatizados.
El resto de este tutorial recorre esa ruta recomendada paso a paso.
## Instala el Creator Hub
El Creator Hub te permite build, preview y deploy de escenas de Decentraland. Descarga el 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/primeros-pasos/editor-installation.md) para más detalles.
## Crea tu primera escena
1. Abre el Creator Hub.
2. Selecciona la **Scenes** pestaña y haz clic en **Nueva escena**.
3. Elige una plantilla de inicio. Para este ejercicio, elige la **Empty Scene**.
Este paso puede tardar un par de minutos. Poblará tu folder 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 items de los asset packs
Explora los **Asset packs** en la sección inferior del Scene Editor y arrastra un par de items a tu escena. Cualquier item servirá por ahora.
Los items que ya colocaste se pueden hacer clic y arrastrar para reposicionarlos. Consulta [Aspectos esenciales del Scene Editor](/creator/content-creator-es/scene-editor/primeros-pasos/scene-editor-essentials.md#position-items) para más detalles.
{% hint style="info" %}
**💡 Consejo**: Cubre toda la escena con un item de ground. Los items de tipo **Ground** tienen un icono de cubeta de pintura. Si arrastras uno de estos a tu escena, cubre todo el ground de tu escena con copias de este item.
{% endhint %}
## Ejecuta una preview
Haz clic en el **Reproducir** botón en el menú superior para cargar tu escena dentro de Decentraland. Ahora puedes explorar la escena como un avatar de Decentraland.
Puedes mantener abierta la ventana de preview mientras trabajas: se actualiza cada vez que haces un cambio. Lee más en [preview a scene](/creator/content-creator-es/scenes-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 **archivo avocado.glb** desde tu explorador de archivos al panel inferior del Scene Editor (el mismo panel que contiene las **Asset Packs** y **Local Assets** pestañas) y haz clic en **Importar**.
Ahora puedes encontrar el **archivo avocado.glb** modelo en la **Local Assets** pestaña, dentro de la **Scene** carpeta. Arrastra el archivo a tu escena, como cualquier item de los Asset Packs.
## Edita el código de la escena
Haz clic en el **<> Code** botón en el 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 folders de tu proyecto. Abre el `index.ts` archivo dentro de la `src` carpeta. 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 se escriben en [TypeScript](https://www.typescriptlang.org/), usando el Decentraland SDK: una library con todo lo que necesitas para posicionar contenido 3D, añadir interactividad y controlar lo que sucede en tu escena.
Este archivo define una function llamada `main()`que es el punto de entrada a la escena: cualquier código que pongas ahí se ejecuta cuando la escena carga por primera vez.
Ya arrastraste un aguacate a la escena de forma visual. Ahora agreguemos un segundo, esta vez escribiendo código. Reemplaza el contenido completo de tu `index.ts` archivo con lo siguiente:
```ts
import { Vector3 } from '@dcl/sdk/math'
import { engine, Transform, GltfContainer } from '@dcl/sdk/ecs'
export function main() {
// crear una Entity nueva desde cero
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 [entidad](/creator/content-creator-es/scenes-sdk7/arquitectura/entities-components.md), le dan un [shape](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/shape-components.md) basado en el modelo 3D que descargaste y [establecen su posición](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/entity-positioning.md) a través del **Transform** componente.
Como regla general, el código que escribes en `index.ts` debería estar todo dentro de `main()` (o en otras functions referenciadas indirectamente por main). Consulta [Ciclo de vida de la escena](/creator/content-creator-es/scenes-sdk7/primeros-pasos/coding-scenes.md#scene-lifecycle) para más detalles.
Ejecuta la preview de la escena: ahora deberías ver dos aguacates, el que agregaste en el Scene Editor y el que agregaste por código.
{% hint style="warning" %}
**📔 Nota**: El segundo aguacate existe **solo en tu código**. Aparece cuando ejecutas la escena, pero el canvas y el entity tree del Scene Editor no pueden mostrar entities creadas en `index.ts`. No te alarmes si no lo ves en el editor. Esto es algo clave para tener en cuenta cuando mezclas edición visual con código.
{% endhint %}
Ambos aguacates están construidos a partir de las mismas piezas. Selecciona el **primer** aguacate en el Scene Editor: el panel de properties muestra un **Transform** y una **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
Hagamos que un aguacate responda al player. Podríamos hacerlo agregando código en el `index.ts` que ya estábamos editando, pero en su lugar usemos el **componente Script**: una forma de adjuntar código directamente a un item en el Scene Editor. Mantiene el comportamiento de cada item autocontenido, e incluso puedes reutilizar el mismo script en varios items.
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 properties y selecciona **Script** para añadir un componente Script.
3. expande **+ Create New Script** y llámalo `AvocadoScript`.
4. Haz clic en el **<> Code** botón en el componente Script para abrir el nuevo archivo en tu editor de código.
El script es una class 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, // DO NOT REMOVE
public entity: Entity, // DO NOT REMOVE
// Añade tus inputs personalizados abajo
) {}
start() {
// Se llama una vez, cuando la escena carga
}
update(dt: number) {
// Se llama en cada frame
}
}
```
* El **constructor** define parámetros que aparecen como campos editables en el componente Script en el Creator Hub. No elimines `src` o `entidad`.
* **`start()`** se ejecuta **una vez**, cuando la escena carga. Úsalo para la configuración inicial: crear components, registrar manejadores de clic, etc.
* **`update(dt)`** se ejecuta en **cada frame** del juego, aproximadamente 30 veces por segundo. Úsalo para comportamiento continuo, como el movimiento. `dt` te indica cuántos segundos pasaron desde el último frame.
Dentro de la class, `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 items y cada uno actuará sobre sí mismo.
### Vibe codea tu primera interacción
Puedes escribir el siguiente código a mano, pero este es un gran momento para probar **vibe coding**: describir lo que quieres a un asistente de IA 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 Decentraland SDK skills, para que la IA conozca los patrones del SDK y cometa muchos menos errores:
```bash
npx skills add decentraland/sdk-skills
```
Estos skills son documentos de referencia que la IA consulta siempre que no está segura de cómo hacer algo con el SDK, así escribe código correcto en lugar de adivinar. Consulta [Vibe Coding con IA](/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md) para opciones de configuración y consejos para prompts.
Ahora prueba con un prompt como este:
> En AvocadoScript.ts, haz que el aguacate registre un mensaje en la console cuando el player haga clic sobre él.
Deberías terminar con algo parecido a esto (o pégalo tú mismo):
```ts
import { engine, Entity, pointerEventsSystem, InputAction, Tween, EasingFunction } 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('CLICKED AVOCADO')
}
)
}
update(dt: number) {}
}
```
Agregó algo de comportamiento de clic dentro de la `start()` function. Solo necesitamos definir el comportamiento del clic una vez, y reaccionará cada vez que el player haga clic en el item. La `pointerEventsSystem.onPointerDown()` instrucción define tres cosas:
* Qué `entidad` sobre qué funcionan los eventos de clic: aquí `this.entity`, el aguacate que contiene el script.
* Una `opts` objeto: qué botón usar y otros argumentos opcionales que no estamos usando ahora.
* Una function que se ejecuta cada vez que se hace clic en la entity.
Para ver el mensaje registrado, ejecuta la preview y abre la console haciendo clic en el  ícono en la esquina superior derecha. También puedes alternarlo presionando la **\`** tecla. Cada vez que hagas clic en el aguacate, verás aparecer una nueva línea:
{% hint style="warning" %}
**📔 Nota**: Para que una entity sea clickable, debe tener una geometría de 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 la tienen.
{% endhint %}
### Haz que el aguacate desaparezca
¡Hagamos 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 bouncy de contracción. También quiero que el hint que veo al apuntar al aguacate diga "Collect".
Deberías terminar con algo parecido a 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 hacer la animación bouncy, 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()` encoge el 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/scenes-sdk7/fundamentos-del-contenido-3d/move-entities.md).
* En lugar de escribir el tween directamente dentro de la function del clic, creó una `collect()` método separada. Esto no es obligatorio (si tu IA puso el tween dentro de la function del 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, lo estableció como el `hoverText` color.
Ejecuta la preview 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 todavía existe. 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/scenes-sdk7/fundamentos-del-contenido-3d/move-entities.md#on-tween-finished).
{% endhint %}
### Ejecuta 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. Reemplaza el constructor y `update()` con:
```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 necesitarás 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 rota 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 cuán rápido se ejecute la máquina del player.
Porque `speed` es un parámetro del constructor, también aparece como un campo en el componente Script en el Creator Hub. Haz clic en el ícono de refrescar en la esquina 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 **Speed** campo, así que varios items 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/extender-con-codigo/script-component.md) para ver el panorama completo.
## Haz referencia a un item desde el Scene Editor
El componente Script es la forma más fácil de darle comportamiento a un solo item, pero hay una alternativa: tu código en `index.ts` puede obtener cualquier item que hayas añadido visualmente, por nombre, usando `engine.getEntityOrNullByName()`. Esto resulta útil cuando una pieza de lógica involucra varios items, o cuando quieres tener todo en un solo lugar. Usa el nombre que aparece en el [entity tree](/creator/content-creator-es/scene-editor/primeros-pasos/scene-editor-essentials.md#the-entity-tree).
En este ejemplo, usamos una entity llamada **Yellow Crate**. Puedes usar cualquier item, solo escribe su nombre exactamente como aparece en el entity tree.
{% hint style="info" %}
**💡 Consejo**: Puedes cambiar el nombre de entities haciendo clic derecho y seleccionando **Rename** en el entity tree.
{% 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: 'Open' },
},
function () {
console.log('CLICKED CRATE')
}
)
}
}
```
Aquí `engine.getEntityOrNullByName()` obtiene una referencia a la entity llamada *Yellow Crate*. El `if (crate)` la comprobación asegura 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 referenciarlas allí o en functions llamadas indirectamente por `main()`.
{% endhint %}
## Más tutoriales
Lee [Scenes con código](/creator/content-creator-es/scenes-sdk7/primeros-pasos/coding-scenes.md) para obtener una comprensión general de cómo funcionan las scenes de Decentraland.
Para ejemplos creados con SDK7, consulta la [página de ejemplos](https://studios.decentraland.org/resources?sdk_version=SDK7), que contiene varias scenes pequeñas.
Consulta la sección **guía de desarrollo** para obtener más instrucciones sobre cómo añadir contenido a tu escena.
## Interactúa con otros developers
Visita el [Discord de Decentraland](https://dcl.gg/discord) y la [Discord de Decentraland DAO](https://discord.gg/bxHtcMxUs4) para unirte a una animada discusión sobre lo que es posible y cómo hacerlo en el Discord de Decentraland, en la sección de **Creators** sección.
Para depurar cualquier problema, revisa las secciones [Solución de problemas](/creator/content-creator-es/scenes-sdk7/depuracion/troubleshooting.md) y [panel de](/creator/content-creator-es/scenes-sdk7/depuracion/debug-in-preview.md) Un asistente de IA con los [SDK skills](/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md) instalados también es un gran compañero de debugging: pega el mensaje de error de la console o describe qué no está funcionando como se espera, y normalmente podrá encontrar el problema en tu código. Si no encuentras una solución, puedes publicar en la [categoría SDK Support](https://forum.decentraland.org/c/support-sdk/11) en el Decentraland Forum.
## Assets de arte 3D
Una buena experiencia tendrá gran arte 3D que la acompañe. Si te entusiasma crear esos modelos 3D tú mismo, consulta la [sección de Modelado 3D](/creator/content-creator-es/modelado-y-animaciones-3d/3d-models.md). Pero si prefieres centrarte en el coding o en el game design, ¡no necesitas crear tus propios assets! Consulta [Recursos útiles](/creator/content-creator-es/scenes-sdk7/primeros-pasos/useful-resources.md) para ver libraries de assets y herramientas de IA que puedes usar para obtener modelos 3D para tu escena.
## Publica tu escena
Si posees un Decentraland NAME, un nombre ETH ENS o LAND, o tienes permisos otorgados por alguien que los tenga, puedes subir tu escena a Decentraland. Consulta [publicación](/creator/content-creator-es/scenes-sdk7/publicacion/publishing.md).
## Otra información útil
* [Vibe Coding con IA](/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md)
* [Flujo de trabajo de desarrollo](/creator/content-creator-es/scenes-sdk7/primeros-pasos/dev-workflow.md)
* [Editando Scenes](/creator/content-creator-es/scene-editor/primeros-pasos/about-editor.md)
* [Aspectos esenciales del Scene Editor](/creator/content-creator-es/scene-editor/primeros-pasos/scene-editor-essentials.md)
* [Restricciones de diseño para juegos](/creator/content-creator-es/scenes-sdk7/disenar-la-experiencia/design-games.md)
* [modelado 3D](/creator/content-creator-es/modelado-y-animaciones-3d/3d-models.md)
* [Limitaciones de la scene](/creator/content-creator-es/scenes-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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.decentraland.org/creator/content-creator-es/scenes-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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.