Combinar con code
Combina el contenido creado en el Scene Editor con la potencia de escribir code.
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 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:
Visual Studio Code: Esta es la opción recomendada para desarrolladores con experiencia.
Cursor AI: 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.
📔 Nota: Si estás en macOS, asegúrate de que la app del editor de código esté en el directorio Applications.
Una vez instalado, es posible que debas seleccionar tu Code Editor en la configuración de Creator Hub. Para hacerlo,
Abre el ícono de la rueda en la parte superior derecha de la pantalla
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.
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.
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.
📔 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 para habilitar VS Code desde la línea de comandos.
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:
Abre el asistente de IA de Cursor haciendo clic en el AI botón en la esquina superior derecha de la pantalla
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:
💡 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.
💡 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 para la guía completa.
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, o usa la aplicación de escritorio de GitHub para un flujo más sencillo basado en UI.
📔 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.
Ver también
Vibe Coding con IA: crea scenes describiendo a un asistente de IA lo que quieres.
SDK Quick start: sigue este mini tutorial para obtener una introducción rápida.
Development workflow: lee esto para entender la creación de scenes de principio a fin.
Examples: sumérgete directamente en scenes de ejemplo funcionales.
Última actualización