Combinar con código
Combina el contenido creado en el Scene Editor con el poder de escribir código.
El Creator Hub más código personalizado es una combinación muy poderosa para crear contenido. Puedes usar el lienzo para posicionar visualmente los elementos 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 comportamiento predeterminado, y escribir código que reaccione cuando el ítem se activa.
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 cuando se tira de la palanca para ejecutar tu propia lógica personalizada.
Ver Referenciar ítems en el código para cómo obtener ítems por nombre o por etiquetas 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 escena. Las opciones recomendadas son:
Visual Studio Code: Esta es la opción recomendada para desarrolladores con experiencia.
Cursor AI: Este es un editor de código potente que está integrado con IA. Te permite elegir diferentes modelos de IA para ayudarte a escribir código, todos ellos son gratuitos. 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 aplicación del editor de código esté en el directorio Applications.
Una vez instalado, puede que necesites seleccionar tu editor de código en la configuración del Creator Hub. Para hacerlo,
Abre el icono de rueda en la esquina superior derecha de la pantalla
Bajo Editor de código preferido, selecciona tu editor de código. Puede que encuentres tu editor listado en el desplegable, o puede que necesites seleccionar Elegir desde tu dispositivo para encontrarlo.
Abrir el código de una escena
Una vez que hayas instalado un editor de código en tu máquina y lo hayas seleccionado en la configuración del Creator Hub, puedes hacer clic en el < > CODE botón para abrirlo en el proyecto de tu escena.
Esto abre una ventana separada con el editor de código. En el margen izquierdo puedes navegar los archivos y la estructura de carpetas de tu proyecto.
Agrega tu código personalizado en el index.ts archivo bajo /src, dentro de la función main() . 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 de algún modo referenciados dentro de la función main() función de index.ts.
📔 Nota: Si tienes VS Code o Cursor instalado pero el botón CODE no lo abre, puede ser que VS Code no esté configurado correctamente en tu máquina para abrirse vía la línea de comandos. En la mayoría de los casos, esto se maneja como parte de la instalación por defecto, pero en caso de que no sea así, mira estas instrucciones de VS para habilitar VS Code desde la línea de comandos.
Si tienes una ventana de vista previa abierta ejecutando tu escena, cada vez que cambies el código en tus archivos y guardes, la escena se recarga automáticamente con tus cambios.
Usar IA
Puedes aprovechar asistentes de IA como Cursor o Claude Code para ayudarte a escribir código de escena. Por ejemplo, para usar Cursor, haz lo siguiente:
Abre el asistente Cursor AI haciendo clic en el botón AI en la esquina superior derecha de la pantalla
Allí puedes pedirle al asistente de IA que te ayude a escribir código. Tus indicaciones pueden incluir enlaces a páginas de documentación, rutas a archivos específicos en tu proyecto o incluso imágenes. También puedes seleccionar un modelo específico para usar desde el desplegable.
Decentraland proporciona una carpeta de contexto para que el asistente de IA te ayude a escribir código; esta carpeta de contexto está ubicada en /dclcontext en tu proyecto de escena. El asistente de IA sabrá buscar en este contexto siempre 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 escena. También puedes forzar la actualización de esta carpeta ejecutando lo siguiente:
💡 Consejo: También puedes añadir tus propios archivos de contexto a esta carpeta para ayudar al asistente de IA a entender tu escena y proyecto. Si lo haces, asegúrate de añadirlos en un nuevo archivo en esa carpeta, ya que los archivos predeterminados se sobrescriben cuando ocurren actualizaciones del SDK.
Control de versiones
Recomendamos que crees un repositorio para tu proyecto en GitHub y lo uses para llevar el seguimiento de las versiones de tu proyecto y para trabajar colaborativamente con otros.
Si no estás familiarizado con cómo hacer esto, consulta Inicio rápido para repositorios, o usa la aplicación de escritorio de GitHub para un flujo basado en UI más simple.
📔 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 incluidos en el archivo .gitignore para evitar sincronizarlos. Esto debería ser así si configuras el repo como de tipo node. Estos archivos son todos auto-generados y el contenido puede diferir entre distintas máquinas.
Ver también
SDK Quick start: sigue este mini tutorial para un curso acelerado rápido.
Flujo de trabajo de desarrollo: lee esto para entender la creación de escenas de principio a fin.
Ejemplos: sumérgete directamente en escenas de ejemplo que funcionan.
Última actualización