# Combinar con código {% embed url="" %} Creator Hub más código personalizado es una combinación muy potente para crear contenido. Puedes usar el canvas para posicionar elementos visualmente de forma intuitiva y luego escribir código que interactúe con estos elementos con total libertad. Incluso puedes colocar un smart item, que tiene su propio comportamiento predeterminado, y escribir código que reaccione cuando el elemento se active. Por ejemplo, puedes aprovechar un smart item de palanca existente, que ya viene con sus sonidos, animaciones y states, y escribir código que detecte cuándo se tira de la palanca para ejecutar tu propia lógica personalizada. Consulta [Hacer referencia a items en código](/creator/content-creator-es/scene-editor/extender-con-codigo/reference-items.md) para 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; todos son gratuitos. 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, es posible que debas seleccionar tu Code Editor en la configuración de Creator Hub. Para hacerlo, 1. Abre el ícono de la rueda en la parte superior derecha de la pantalla 2. Debajo de **Code editor of choice**, selecciona tu Code Editor. Es posible que encuentres tu editor en el menú desplegable, o quizás debas seleccionar **Elige desde tu dispositivo** para encontrarlo. ## Abrir el código de una scene Una vez que instalaste un editor de código en tu máquina y lo seleccionaste en la configuración de Creator Hub, puedes hacer clic en el **< > CODE** botón para abrirlo en el proyecto de tu scene. ![](/files/c98aeaf7cb690147dbbe58baf141fb7c301a18ca) 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. ![](/files/a1d5c8e192945316439c93a40a723b063a53b09e) Agrega tu código personalizado en el `index.ts` archivo dentro de `/src`, dentro de la `main()` función. De lo contrario, puedes agregar código personalizado fuera de esa función o crear nuevos `.ts` archivos dentro de la `/src` carpeta, pero estos deben estar referenciados de alguna manera dentro de la `main()` función de `index.ts`. {% hint style="warning" %} **📔 Nota**: Si tienes VS Code o Cursor instalado pero el **CODE** botón no lo abre, puede ser 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 de tus archivos y guardes, la scene se recargará automáticamente con tus cambios. ## Usar IA Puedes aprovechar asistentes de IA como Cursor o Claude Code para ayudarte a escribir código de scene. Por ejemplo, para usar Cursor, haz esto: 1. Abre el asistente de IA de Cursor haciendo clic en el **AI** botón en la esquina superior derecha de la pantalla 2. Allí puedes indicarle 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. Decentraland proporciona una carpeta de contexto para que el asistente de IA te ayude a escribir código; esta carpeta de contexto se encuentra en `/dclcontext` en el proyecto de tu scene. El asistente de IA sabrá buscar en este contexto cada vez que genere código, para familiarizarse con el SDK de Decentraland. Esta carpeta se actualiza con los archivos de contexto más recientes cada vez que se actualizan las dependencias de tu scene. También puedes forzar la actualización de esta carpeta ejecutando lo siguiente: ``` npx sdk-commands get-context-files ``` {% hint style="info" %} **💡 Consejo**: También puedes agregar tus propios archivos de contexto a esta carpeta para ayudar al asistente de IA a entender tu scene y tu proyecto. Si lo haces, asegúrate de agregarlos en un archivo nuevo dentro de esa carpeta, ya que los archivos predeterminados se sobrescriben cuando ocurren actualizaciones del SDK. {% endhint %} {% hint style="info" %} **💡 Consejo**: ¿Quieres ir más allá con la IA? Puedes instalar Decentraland skills en tu agente de codificación de IA preferido para generar scenes completas, agregar multiplayer, hacer deploy y más, todo desde prompts en lenguaje natural. Consulta [Vibe Coding con IA](/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md) para la guía completa. {% endhint %} ## Control de versiones Recomendamos que crees un repo para tu proyecto en GitHub y lo uses para hacer seguimiento de las versiones de tu proyecto y trabajar colaborativamente con otras personas. Si no estás familiarizado con cómo hacerlo, consulta [Quickstart for 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 las carpetas `/node-modules` o `/bin` y el archivo `package-lock.json` estén todos incluidos en el archivo `.gitignore` para evitar sincronizarlos. Esto debería ser así si configuras el repo para que sea de 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): crea scenes describiendo a un asistente de IA lo que quieres. * [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) * [Estados y condiciones](/creator/content-creator-es/scene-editor/interactividad/states-and-conditions.md) * [Hacer cualquier item smart](/creator/content-creator-es/scene-editor/interactividad/make-any-item-smart.md) * [SDK Quick start](/creator/content-creator-es/scenes-sdk7/primeros-pasos/sdk-101.md): sigue este mini tutorial para obtener una introducción rápida. * [Development workflow](/creator/content-creator-es/scenes-sdk7/primeros-pasos/dev-workflow.md): lee esto para entender la creación de scenes de principio a fin. * [Examples](https://studios.decentraland.org/resources?sdk_version=SDK7): sumérgete directamente en scenes de ejemplo funcionales. --- # 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/overview.md?ask= ``` 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.