Depurar en Preview

Cómo puedes depurar tu escena mientras la ejecutas localmente en preview

Ejecutar una vista previa proporciona información y herramientas útiles de depuración para ayudarte a entender cómo se renderiza la escena.

Si la escena no puede compilarse, verás solo el suelo vacío, sin nada renderizado sobre él. Si esto ocurre, hay varios lugares donde puedes buscar mensajes de error para ayudarte a entender qué salió mal:

  1. Revisa tu editor de código para asegurarte de que no haya marcado errores de sintaxis o lógica.

  2. Revisa la consola en la ventana de vista previa por cualquier mensaje de error. Abre la consola haciendo clic en el  icono en la esquina superior derecha.

  3. Si ejecutaste la escena usando Creator Hub, revisa la ventana con la salida de la consola de la escena. Si ejecutaste la escena usando la CLI, revisa la salida de la línea de comandos donde ejecutaste npm run start

circle-info

💡 Consejo: Antes de publicar tu escena en el entorno de producción, publícala en el entorno de prueba para probarla en un contexto mucho más cercano a producción. Ver Development Workflowarrow-up-right

Usa la consola

Abre la consola haciendo clic en el  icono en la esquina superior derecha.

También puedes alternarla presionando la tecla backtick en tu teclado: **. Esta tecla está a la izquierda de la tecla 1 en la mayoría de los teclados en inglés. O bien presiona Shift + **\ para abrir una vista más amplia de la consola, en caso de que necesites ver más texto.

Enviar mensajes a la consola (usando console.log()). Luego puedes ver estos mensajes a medida que se generan abriendo la consola de la escena.

La consola también muestra mensajes de error, estos están marcados en rojo.

El panel de depuración

Abre la consola de depuración haciendo clic en el  icono en la esquina superior derecha.

Esto abre un panel en la esquina inferior derecha con información sobre el motor de renderizado, y se actualiza en tiempo real a medida que las cosas cambian.



Escena actual

El CURRENT SCENE la pestaña incluye información sobre la escena en la que te encuentras actualmente. Esto incluye:

  • El número de parcelas en la escena

  • La altura máxima en la que se te permite construir (que es proporcional al número de parcelas en la escena)

También puedes comprobar el Show Scene Bounds opción para ver muros rojos alrededor de la escena, que marcan los límites de la escena.

Memoria

El MEMORY la sección muestra la memoria usada por Decentraland. Procura mantener este valor siempre por debajo del Memory Budget Thresholds. Si este valor crece demasiado, existe el riesgo de que la aplicación se bloquee para los jugadores que visiten tu escena. Ten en cuenta que en producción, la escena podría cargarse junto con otras escenas y jugadores circundantes, lo que puede contribuir a aumentar el consumo de memoria por encima de lo que ves en la vista previa.

Rendimiento

El PERFORMANCE la pestaña incluye varios campos relacionados con FPS (Frames Per Second). Este valor tenderá a ser más bajo a medida que la escena crece en complejidad; asegúrate de mantener siempre este valor por encima de 25 FPS, para garantizar una buena experiencia para tus jugadores. Los FPS variarán según la máquina en la que ejecutes esto.

El valor más importante aquí es el Average FPS, que promedia los FPS de los últimos 1000 fotogramas.


circle-exclamation

Los saltos se refieren a pausas momentáneas en la tasa de fotogramas, que pueden tener poco impacto en el número total de FPS pero pueden ser muy notables para el jugador. Normalmente pueden ocurrir cuando se cargan activos pesados o situaciones similares.

Solicitudes web

El WEB REQUESTS la sección te permite abrir la pestaña Network de Chrome DevTools, que muestra el número de solicitudes web realizadas por la escena y su contenido. Esto es útil para saber si la escena está haciendo demasiadas solicitudes a servidores, lo que puede afectar el rendimiento de la escena.

Si tu escena interactúa con un servidor de terceros, suele ser útil ver qué datos entran y salen. Haz clic en Open Chrome Devtools para abrir una nueva ventana de Chrome con la pestaña Network abierta.

circle-exclamation

Como alternativa, hay varias herramientas gratuitas que puedes ejecutar en tu máquina que informan todos los datos entrantes y salientes de la aplicación Decentraland. Por ejemplo Charlesarrow-up-right u Wiresharkarrow-up-right.

Recarga rápida

Siempre que realices cambios en la escena, la vista previa se recarga y actualiza automáticamente, por lo que no es necesario abrir y cerrar la ventana de vista previa.

Si necesitas recargar la escena en la que te encuentras, haz clic en el Reload Scene botón en la esquina superior izquierda de la ventana de vista previa.



También puedes recargar la escena escribiendo lo siguiente en el chat y pulsando enter:

/reload

Reportar un error

Si encuentras un problema que no es causado por tu escena, sino por el SDK de Decentraland en general, por favor consulta Reportar un errorarrow-up-right.

Dependency versions

Asegúrate de usar siempre las versiones más recientes de todas las dependencias en tu escena, ya que cualquier problema que estés experimentando podría ya estar solucionado en versiones más nuevas. Creator Hub te notificará cuando haya actualizaciones para instalar en tu escena de Decentraland.



También puedes actualizar manualmente las dependencias vía la línea de comandos. Ejecutar una escena de Decentraland localmente depende de dos bibliotecas principales: @dcl/sdk y @dcl/js-runtime, que se instala en cada carpeta de proyecto. Asegúrate de que ambas estén actualizadas. Puedes ejecutar los siguientes comandos para actualizar manualmente ambas bibliotecas a la última versión estable:

Si tu escena usa smart items, también puede estar usando la @dcl/asset-packs biblioteca, que puedes actualizar mediante:

Si estás usando cualquiera de las utils librariesarrow-up-right asegúrate de que también estén actualizadas, ya que versiones antiguas de estas bibliotecas pueden no ser compatibles con versiones más nuevas de @dcl/sdk.

Condiciones de iluminación

La hora del día en el mundo tiene un gran impacto en cómo se ven los modelos 3D. El color de la fuente de luz cambia sutilmente, con un tinte azulado en la noche y un tinte rojizo durante el amanecer y el atardecer. La dirección de la luz también se mueve a través del cielo, proyectando sombras en diferentes direcciones.

Comprueba que tu escena se vea bien en todas las horas del día cambiando el reloj del juego a diferentes valores. Haz clic en el skybox time icono en el panel izquierdo de la pantalla para establecer la hora que prefieras. Si este deslizador está deshabilitado, asegúrate de que la opción Auto esté desactivada.

Dynamic skybox
Instrucciones en el mundo

Los materiales de tu modelo 3D podrían no verse igual que en la herramienta de modelado con la que lo creaste. Esto es esperable, ya que todos los motores de renderizado 3D tienen diferencias sutiles en cómo tratan la luz y los materiales.

También puedes configurar tu escena para que la hora del día sea fija y la iluminación no cambie. Ver Skybox controlarrow-up-right para más detalles.

Pruebas multijugador

Si lanzas una vista previa de la escena y la abres en dos (o más) ventanas diferentes del Explorer, cada ventana abierta será interpretada como un jugador separado, y un servidor de comunicaciones simulado mantendrá a estos jugadores sincronizados.

Interactúa con la escena en una ventana, luego cambia a la otra para ver que los efectos de esa interacción también son visibles allí.

Usando Creator Hub, haz clic en el botón Preview una segunda vez, y eso abre una segunda ventana del Explorer. Debes conectarte en ambas ventanas con direcciones diferentes. Las mismas sesiones permanecerán abiertas mientras la escena se recarga. Puede que necesites cerrar sesión e iniciar sesión de nuevo en la segunda ventana para seleccionar una cuenta diferente.



Ambos jugadores se verán entre sí y podrán interactuar mutuamente. Si la escena tiene cualquier lógica multijugador, funcionará como se espera y se sincronizará entre los dos jugadores.

Como alternativa, puedes abrir una segunda ventana del Explorer escribiendo lo siguiente en la barra de direcciones del navegador:

decentraland://realm=http://127.0.0.1:8000&local-scene=true&debug=true

Uso de la red de pruebas de Ethereum

Mientras pruebas tu escena, para evitar transferir MANA real u otras monedas, puedes usar la red de pruebas Sepolia de Ethereum y transferir MANA de prueba en su lugar.

Para usar la red de pruebas debes configurar tu extensión de Metamask en Chrome para usar la Sepolia test network en lugar de Main network. También debes poseer MANA en la blockchain de Sepolia, que puedes adquirir gratis desde Decentraland.

circle-info

💡 Consejo: Para ejecutar la transacción de transferir MANA de Sepolia a tu wallet, necesitarás pagar una tarifa de gas en Sepolia Ether.

Cualquier transacción que aceptes mientras visualizas la escena en este modo solo ocurrirá en la red de pruebas y no afectará el saldo de MANA en tu wallet real.

Para previsualizar tu escena usando la red de pruebas, pega la siguiente URL en una pestaña del navegador. Esto abrirá la escena en el cliente de escritorio de Decentraland:

decentraland://realm=http://127.0.0.1:8000&local-scene=true&debug=true&dclenv=zone&position=0,0

circle-info

💡 Consejo: Cambia el parámetro position a las coordenadas de tu escena, para cargar directamente en tu escena. Cualquier transacción que aceptes mientras visualizas la escena en este modo solo ocurrirá en la red de pruebas y no afectará el saldo de MANA en tu wallet real.

Si necesitas probar transacciones en la Polygon Testnet y necesitas tener MANA en esa testnet, tendrás que intercambiar MANA a esa red después de adquirirla en Sepolia. Para puentear MANA de Sepolia a la Polygon Testnet, visita la página de tu cuenta de Decentraland en Sepolia y haz clic en 'swap' en el lado de Ethereum MANA.

Última actualización