> 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 {% embed url="" %} Creator Hub junto con código personalizado es una combinación muy potente para crear contenido. Puedes usar el canvas para posicionar visualmente los items 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 responda cuando el item se active. Por ejemplo, puedes aprovechar un smart item de palanca existente, que ya incluye sus sounds, animations y states, y escribir código que detecte cuándo se tira de la palanca para ejecutar tu propia lógica personalizada. Consulta [Referenciar items en código](/creator/content-creator-es/scene-editor/extender-con-codigo/reference-items.md) sobre cómo obtener items por nombre o por tags desde tu código. ## Editando 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 con experiencia. * Cursor [Cursor AI](https://www.cursor.com/): Este es un potente editor de código integrado con IA. Te permite elegir diferentes modelos de IA para ayudarte a escribir código; hay una versión gratuita 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 al escribir 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 los settings de Creator Hub. Para hacerlo, 1. Abre el icono de la rueda en la esquina superior derecha de la pantalla 2. En **Editor de código preferido**, selecciona tu editor de código. Es posible que encuentres tu editor en la lista del menú desplegable, o que necesites seleccionar **Elegir desde tu dispositivo...** para encontrarlo. ## Abre el código de una scene Una vez hayas instalado un editor de código en tu máquina y lo hayas seleccionado en los settings de Creator Hub, puedes hacer clic en el **< > CODE** button para abrirlo en tu proyecto de scene. ![](/files/c98aeaf7cb690147dbbe58baf141fb7c301a18ca) Esto abre una ventana aparte con el editor de código. En el margen izquierdo puedes navegar por los files y la estructura de folders de tu proyecto. ![](/files/a1d5c8e192945316439c93a40a723b063a53b09e) Añade tu código personalizado en el `index.ts` file dentro de `/src`, dentro de la `main()` function. También puedes añadir código personalizado fuera de esa function o crear nuevos `.ts` files dentro de la `/src` folder, 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 instalados pero el **CODE** button 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 cambies el código en tus files y guardes, la scene se recarga automáticamente con tus cambios. ## Uso de AI Puedes aprovechar asistentes de AI como Cursor o Claude Code para ayudarte a escribir código de scene. Por ejemplo, para usar Cursor, haz lo siguiente: 1. Abre el asistente de AI de Cursor haciendo clic en el **AI** button en la esquina superior derecha de la pantalla 2. Allí puedes indicarle al asistente de AI que te ayude a escribir código. Tus prompts pueden incluir links a páginas de docs, paths a files específicos de tu proyecto, o incluso imágenes. También puedes seleccionar un modelo específico para usar desde el dropdown. Decentraland proporciona un folder de contexto para el asistente de AI que te ayuda a escribir código; este folder de contexto se encuentra en `/dclcontext` en tu scene project. El asistente de AI sabrá buscar este contexto cada vez que genere código, para familiarizarse con el Decentraland SDK. Este folder se actualiza con los últimos context files cada vez que se actualizan las dependencies de tu scene. También puedes forzar la actualización de este folder ejecutando lo siguiente: ``` npx sdk-commands get-context-files ``` {% hint style="info" %} **💡 Consejo**: También puedes añadir tus propios context files a este folder para ayudar al asistente de AI a entender tu scene y project. Si lo haces, asegúrate de añadirlos a un nuevo file en ese folder, ya que los default files se sobrescriben cuando ocurren actualizaciones del SDK. {% endhint %} {% hint style="info" %} **💡 Consejo**: ¿Quieres ir más allá con AI? Puedes instalar skills de Decentraland en tu agente de código AI preferido para generar estructuras completas de scenes, añadir multiplayer, deploy y más, todo desde prompts en lenguaje natural. Consulta [Vibe Coding con AI](/creator/content-creator-es/escenas-sdk7/primeros-pasos/vibe-coding.md) para ver la guía completa. {% endhint %} ## Control de versiones Te recomendamos crear un repo para tu proyecto en GitHub y usarlo para llevar un seguimiento de las versiones de tu proyecto y trabajar de forma colaborativa con otras personas. Si no estás familiarizado con cómo hacerlo, consulta [Inicio rápido para repositories](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 los `/node_modules` ni `/bin` folders y el `package-lock.json` file estén todos incluidos en el `.gitignore` file, para evitar sincronizarlos. Esto debería ser así si configuras el repo como de tipo `node`. Estos files se generan automáticamente y el contenido puede diferir entre distintas máquinas. {% endhint %} ## Ver también * [Vibe Coding con AI](/creator/content-creator-es/escenas-sdk7/primeros-pasos/vibe-coding.md): crea scenes describiendo lo que quieres a un asistente de AI. * [Smart items - Basics](/creator/content-creator-es/scene-editor/interactividad/smart-items.md) * [Smart items - Advanced](/creator/content-creator-es/scene-editor/interactividad/smart-items-advanced.md) * [States and conditions](/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) * [Inicio rápido del SDK](/creator/content-creator-es/escenas-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/escenas-sdk7/primeros-pasos/dev-workflow.md): léelo para entender la creación de scenes de principio a fin. * [Ejemplos](https://studios.decentraland.org/resources?sdk_version=SDK7): sumérgete directamente en scenes de ejemplo que funcionan. --- # 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/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 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.