> 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/scene-editor/extender-con-codigo/overview.md). # Combinar con código Combina el contenido creado en el Scene Editor con la potencia de escribir código. {% embed url="" %} Creator Hub junto con código personalizado es una combinación muy potente para crear contenido. Puedes usar el Canvas para posicionar items visualmente de forma intuitiva y luego escribir código que interactúe con estos items con total libertad. Incluso puedes colocar un smart item, que tiene su propio comportamiento predeterminado, y escribir código que reaccione cuando el item se active. Por ejemplo, puedes aprovechar un smart item de palanca existente, que ya viene con sus sonidos, animaciones y estados, y escribir código que detecte cuándo se tira de la palanca para ejecutar tu propia lógica personalizada. Consulta [Referenciar items en el código](/creator/content-creator-es/scene-editor/extender-con-codigo/reference-items.md) para aprender a obtener items por nombre o por tags desde tu código. ## Editar código Debes instalar un editor de código en tu máquina para editar el código de tu scene. Las opciones recomendadas son: * VS Code [Visual Studio Code](https://code.visualstudio.com/): Esta es la opción recomendada para desarrolladores experimentados. * Cursor [Cursor AI](https://www.cursor.com/): Este es un editor de código potente integrado con IA. Te permite elegir distintos modelos de IA para ayudarte a escribir código; hay un nivel gratuito disponible, y los modelos más avanzados requieren un plan de pago. Esta es una buena opción para desarrolladores que son nuevos en Decentraland o TypeScript, o si quieres ahorrar tiempo escribiendo código. {% hint style="warning" %} **📔 Nota**: Si estás en macOS, asegúrate de que la app del editor de código esté en el directorio Applications. {% endhint %} Una vez instalado, puede que necesites seleccionar tu Code Editor en la configuración de Creator Hub. Para hacerlo, 1. Haz clic en el logo de Creator Hub en la esquina superior izquierda de la pantalla y selecciona **Ajustes**. 2. Abre la **EDITOR** pestaña. 3. Bajo **editor de código preferido**, selecciona tu Code Editor. Puede que encuentres tu editor listado en el dropdown, o puede que necesites seleccionar **Elige desde tu dispositivo...** para encontrarlo. ![El cuadro de diálogo de Preferencias de la app en la pestaña EDITOR, mostrando el dropdown editor de código preferido configurado en Visual Studio Code.](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-8eacb18c746acee4ccd8f3caf2740c9f4f40c5a4%2Fsettings-editor.png?alt=media\&token=aa0f0526-13f4-44f0-87be-88fb70c529f4) ## Abre el código de una scene Una vez que hayas instalado un editor de código en tu máquina y lo hayas seleccionado en la configuración de Creator Hub, puedes hacer clic en el **< > CODE** botón para abrirlo en el proyecto de tu scene. ![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-5837e60ee5b65bd46815c97282d53b1a44a70665%2Fcode-button.png?alt=media\&token=bb2a8cec-e8bd-485a-bbe1-f402ceb2aebd) Esto abre una ventana separada con el editor de código. En el margen izquierdo puedes navegar por los archivos y la estructura de carpetas de tu proyecto. ![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e94bcfd7f720dddb6343bbb79d444afae3cbff33%2Ffiles-on-vs-studio.png?alt=media\&token=7fd7a16b-31d1-434d-ae25-d9f82c65a66f) Añade tu código personalizado en la `index.ts` archivo dentro de `/src`, dentro de la `main()` function. De lo contrario, puedes añadir código personalizado fuera de esa function o crear nuevos `.ts` archivos dentro de la `/src` carpeta, pero estos deben estar de alguna manera referenciados dentro de la `main()` function de `index.ts`. {% hint style="warning" %} **📔 Nota**: Si tienes VS Code o Cursor instalado pero el **CODE** botón no lo abre, puede que VS Code no esté configurado correctamente en tu máquina para abrirse desde la línea de comandos. En la mayoría de los casos, esto se maneja como parte de la instalación predeterminada, pero si no es así, consulta [estas instrucciones de VS](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) para habilitar VS Code desde la línea de comandos. {% endhint %} Si tienes una ventana de preview abierta ejecutando tu scene, cada vez que cambias el código en tus archivos y guardas, la scene se recarga automáticamente con tus cambios. ## Uso de la IA Creator Hub tiene un [Asistente de IA](/creator/content-creator-es/scene-editor/extender-con-codigo/ai-assistant.md) asistente de IA integrado que ve tu scene abierta y la edita por ti, sin salir de la app. Es una función experimental, desactivada por defecto. También puedes aprovechar asistentes de IA como Cursor o Claude Code para ayudarte a escribir código de la scene. Por ejemplo, para usar Cursor, haz esto: 1. Abre el asistente de IA Cursor haciendo clic en el **AI** botón en la parte superior derecha de la pantalla 2. Ahí puedes pedirle al asistente de IA que te ayude a escribir código. Tus prompts pueden incluir enlaces a páginas de documentación, rutas a archivos específicos de tu proyecto, o incluso imágenes. También puedes seleccionar un modelo específico para usar desde el dropdown. Para darle contexto de Decentraland a tu asistente de IA, instala las SDK Skills oficiales de Decentraland. Estos son conjuntos de instrucciones ya preparados, mantenidos por la Decentraland Foundation, que enseñan a tu agente de IA patrones verificados de SDK7 para cada tema: estructurar scenes completas, agregar modelos 3D, multiplayer, despliegue y más. ```bash npx skills add decentraland/sdk-skills ``` Consulta [Vibe Coding con IA](/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md) para la guía completa, incluida la lista completa de skills disponibles. {% hint style="warning" %} **📔 Nota**: Los proyectos de scene más antiguos pueden contener una `/dclcontext` carpeta, descargada por el obsoleto `npx sdk-commands get-context-files` command. Ese contexto ya no se mantiene y ha sido reemplazado por las SDK Skills. Puedes eliminar la carpeta sin problemas. {% endhint %} ## Control de versiones Recomendamos que crees un repo para tu proyecto en GitHub, y lo uses para llevar un registro de las versiones de tu proyecto y para trabajar en colaboración con otros. Si no estás familiarizado con cómo hacerlo, consulta [Quickstart para repositorios](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories), o usa la [aplicación de escritorio de GitHub](https://desktop.github.com/download/) para un flujo más sencillo basado en UI. {% hint style="warning" %} **📔 Nota**: Sube toda la carpeta del proyecto a un repo de GitHub, pero asegúrate de que las carpetas `/node_modules` o `/bin` y los `package-lock.json` archivos estén todos incluidos en el `.gitignore` archivo, para evitar sincronizarlos. Esto debería ser así si configuras el repo para que sea del tipo `node`. Estos archivos se generan automáticamente y el contenido puede diferir entre distintas máquinas. {% endhint %} ## Ver también * [Vibe Coding con IA](/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md): construye scenes describiendo lo que quieres a un asistente de IA. * [Smart items - Básicos](/creator/content-creator-es/scene-editor/interactividad/smart-items.md) * [Smart items - Advanced](/creator/content-creator-es/scene-editor/interactividad/smart-items-advanced.md) * [Estados y condiciones](/creator/content-creator-es/scene-editor/interactividad/states-and-conditions.md) * [Hacer smart cualquier item](/creator/content-creator-es/scene-editor/interactividad/make-any-item-smart.md) * [SDK Inicio rápido](/creator/content-creator-es/scenes-sdk7/primeros-pasos/sdk-101.md): sigue este mini tutorial para obtener una introducción rápida. * [Flujo de trabajo de desarrollo](/creator/content-creator-es/scenes-sdk7/primeros-pasos/dev-workflow.md): lee esto para entender la creación de escenas de principio a fin. * [Ejemplos](https://studios.decentraland.org/resources?sdk_version=SDK7): sumérgete directamente en escenas de ejemplo funcionales. --- # 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/scene-editor/extender-con-codigo/overview.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.