Depurar en previsualización

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

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

Si la escena no se puede compilar, solo verás el terreno 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 marcó errores de sintaxis o lógica.

  2. Revisa la consola en la ventana de vista previa para 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 de acento grave en tu teclado: **. Esta tecla está a la izquierda de la tecla 1 en la mayoría de los teclados en inglés. O de lo contrario 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 ESCENA ACTUAL 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 a la que puedes construir (que es proporcional al número de parcelas en la escena)

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

Memoria

El MEMORIA la sección muestra la memoria utilizada por Decentraland. Procura siempre mantener este valor por debajo del Umbrales del presupuesto de memoria. Si este valor crece demasiado, corre el riesgo de hacer que la aplicación falle 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 elevar el consumo de memoria por encima de lo que ves en la vista previa.

Rendimiento

El RENDIMIENTO la pestaña incluye varios campos relacionados con FPS (Cuadros por segundo). 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 a tus jugadores. Los FPS variarán según la máquina en la que ejecutes esto.

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


circle-exclamation

Los 'hiccups' se refieren a pausas momentáneas en la tasa de fotogramas, que pueden tener poco impacto en el número global de FPS pero pueden ser muy notables para el jugador. Estos suelen ocurrir cuando se cargan assets pesados o situaciones similares.

Solicitudes web

El SOLICITUDES WEB 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, a menudo es útil ver qué datos entran y salen. Haz clic en Abrir 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 que entran y salen de la aplicación Decentraland. Por ejemplo Charlesarrow-up-right o 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 Recargar escena 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 presionando enter:

/reload

Reportar un error

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

Versiones de dependencias

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 está instalada 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 utilizando la @dcl/asset-packs biblioteca, que puedes actualizar mediante:

Si estás usando cualquiera de las bibliotecas utilsarrow-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, teniendo un tinte azulado por la noche y un tinte rojizo durante el amanecer y el atardecer. La dirección de la luz también se desplaza por el cielo, proyectando sombras en diferentes direcciones.

Verifica que tu escena se vea bien en todos los momentos del día cambiando el reloj del juego a diferentes valores. Haz clic en el icono de tiempo del skybox en el panel izquierdo de la pantalla para establecer la hora que prefieras. Si este control deslizante está en gris, asegúrate de que la opción Auto esté deshabilitada.

Dynamic skybox
Instrucciones dentro del mundo

Los materiales de tu modelo 3D pueden no verse igual que en la herramienta de modelado con la que lo creaste. Esto es de esperar, ya que todos los motores de renderizado 3D tienen diferencias sutiles en cómo manejan 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. Consulta Control del skyboxarrow-up-right para más detalles.

Pruebas multijugador

Si inicias una vista previa de la escena y la abres en dos (o más) ventanas diferentes del Explorer, cada ventana abierta se interpretará 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 sean visibles allí.

Usando Creator Hub, haz clic en el botón Preview por segunda vez, y eso abrirá una segunda ventana del Explorer de Decentraland. Debes conectarte en ambas ventanas con direcciones diferentes. Las mismas sesiones permanecerán abiertas a medida que 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 alguna lógica multijugador, funcionará como se espera y se sincronizará entre los dos jugadores.

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

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

Usar la red de pruebas de Ethereum

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

Para usar la red de pruebas debes configurar tu extensión Metamask en Chrome para usar la red de pruebas Sepolia en lugar de red principal. También debes poseer MANA en la cadena Sepolia, que puedes adquirir de forma gratuita 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 red de pruebas, tendrás que cambiar 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