Combinar con código
Combina el contenido creado en el Scene Editor con el poder de escribir código.
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 propio comportamiento predeterminado, y escribir código que reaccione cuando el item 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 items en el código para saber cómo obtener items 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 integrado con IA. Te permite elegir diferentes modelos de IA para ayudarte a escribir código; todos son gratuitos. Es una buena opción para desarrolladores que son nuevos en Decentraland o en 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, puede que necesites seleccionar tu Code Editor en la configuración de 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. Es posible que encuentres tu editor en la lista desplegable, o que necesites seleccionar Elegir desde tu dispositivo para encontrarlo.
Abrir el código de una escena
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 tu proyecto de 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 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 ser de alguna forma referenciados dentro de la main() función de index.ts.
📔 Nota: Si tienes VS Code o Cursor instalados pero el CODE botón no lo abre, puede que VS Code no esté configurado correctamente en tu máquina para abrirse vía 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í, consulta 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 cambias el código en tus archivos y lo guardas, la escena se recarga automáticamente con tus cambios.
Usar IA con Cursor
Si estás usando Cursor, puedes usar el asistente de IA para ayudarte a escribir código. Para hacerlo,
Abre el asistente de IA de Cursor haciendo clic en el AI botón en la esquina superior derecha de la pantalla
Allí puedes pedirle al asistente de IA que te ayude a escribir código. También puedes seleccionar un modelo 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 se encuentra 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 agregar 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 archivo nuevo en esa carpeta, ya que los archivos predeterminados se sobrescriben cuando ocurren actualizaciones del SDK.
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 para trabajar de forma colaborativa con otros.
Si no estás familiarizado con cómo hacer esto, consulta Inicio rápido para repositorios, o usa la aplicación GitHub desktop para un flujo más simple basado en UI.
📔 Nota: Sube toda la carpeta del proyecto a un repo de GitHub, pero asegúrate de que las /node-modules u /bin carpetas y el package-lock.json archivo estén todos incluidos en el .gitignore archivo, para evitar sincronizarlos. Esto debería ser así si configuras el repo para que sea 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 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