Como exportar un juego de Godot a la web (Guia HTML5, 2026)

Godot exporta a la web como HTML5 y WebAssembly, lo que significa que tu juego se ejecuta en una pestana del navegador sin necesidad de descargas ni plugins. Es la forma mas rapida de poner una version jugable frente a alguien: pegas un enlace, hacen clic y juegan.

El problema es que "exportar a la web" son dos trabajos, no uno. Producir los archivos es sencillo y tarda un minuto. Conseguir que esos archivos funcionen realmente en un navegador es donde casi todo el mundo se encuentra con una pantalla negra, porque los navegadores modernos requieren dos cabeceras HTTP especificas de las que depende la compilacion con hilos de WebAssembly. Esta guia cubre ambas partes, la configuracion exacta y los tres errores que causan la mayoria de las exportaciones fallidas.

Se aplica a Godot 4 y a Summer Engine, que es compatible con Godot 4 y utiliza el mismo pipeline de exportacion. Si construiste tu juego describiendolo en lenguaje natural, el paso de exportacion es identico al de un proyecto de Godot hecho a mano.

{/* IMAGE: The Godot Export dialog open with a Web preset selected, the Export Project button highlighted. 1200x675 editor screenshot. */}

Que produce realmente la "exportacion web"

Cuando exportas, Godot no crea un unico archivo. Escribe una carpeta pequeña de recursos estaticos:

• index.html es la pagina que carga todo. Es lo que abre el navegador.
• Un archivo .wasm es el propio motor de Godot, compilado a WebAssembly. Es la pieza mas grande.
• Un archivo .pck son los datos de tu juego: escenas, scripts y recursos empaquetados.
• Un archivo .js es el codigo de carga que conecta el motor con la pagina.
• A menudo tambien un .worker.js y un .audio.worklet.js para el manejo de hilos y el sonido.

Todos estos archivos deben estar juntos y deben servirse por HTTP. No puedes hacer doble clic en index.html y esperar que funcione, que es lo primero que confunde a la gente. Volvemos a esto en un momento.

Paso 1: Instala las plantillas de exportacion

Godot distribuye el editor y las plantillas de exportacion por separado. Las plantillas son los binarios del motor precompilados para cada plataforma, incluida la compilacion WebAssembly para el navegador. Una instalacion reciente no las incluye.

Ve a Editor y luego a Administrar Plantillas de Exportacion y haz clic en Descargar e Instalar. Esto descarga las plantillas para tu version exacta del motor.

Esta es la regla mas importante de todo el proceso: las plantillas deben coincidir exactamente con tu version del motor. Las plantillas de la 4.3 no ejecutaran un proyecto exportado desde la 4.4. Un conflicto de versiones es la segunda causa mas comun de una compilacion web rota, justo despues de las cabeceras. Si actualizas el motor, reinstala las plantillas.

Paso 2: Agrega una configuracion de exportacion Web

Abre Proyecto y luego Exportar. Haz clic en Agregar y elige Web.

Aparece un panel de opciones. Los valores por defecto son razonables, pero dos ajustes importan especificamente para la web:

• Tipo de exportacion. "Regular" te da la compilacion con hilos, que es mas rapida y es la opcion por defecto. Antes existia una alternativa sin hilos para servidores que no podian enviar las cabeceras especiales. En Godot 4 casi siempre querrás la compilacion con hilos y corregiras las cabeceras en el servidor, que es lo que cubrimos mas adelante.
• Compresion de texturas VRAM. Marca la casilla para los objetivos que te interesan. El navegador usa la ruta "Para escritorio" en la mayoria de equipos, asi que dejala activada. Los navegadores moviles pueden necesitar ademas la opcion de compresion movil.

Deja el Head Include y la shell HTML personalizada vacios a menos que tengas un motivo para cambiarlos. La shell por defecto se encarga de la carga y la barra de progreso.

Paso 3: Exporta el proyecto

Elige una carpeta de destino. Crea una vacia con un nombre como web-build para que los archivos de salida no se mezclen con nada mas.

Nombra el archivo principal index.html, no con el nombre de tu juego. La mayoria de servidores, incluido itch.io, buscan un index.html como punto de entrada. Si lo llamas mygame.html, el servidor no lo encontrara y veras un listado de directorio en blanco en lugar de tu juego.

Haz clic en Exportar Proyecto. En unos segundos la carpeta se llena con los archivos mencionados antes. Esa es la mitad facil terminada.

{/* IMAGE: A file explorer showing the exported web-build folder contents: index.html, .wasm, .pck, .js files. 1000x500. */}

Paso 4: El problema de las cabeceras, explicado con claridad

Aqui esta la parte que ningun tutorial rapido menciona, y la razon por la que la mayoria de las primeras exportaciones web muestran una pantalla negra.

La compilacion con hilos de Godot 4 usa SharedArrayBuffer, una funcion del navegador que permite al motor WebAssembly ejecutarse en multiples hilos. Por razones de seguridad, los navegadores solo activan SharedArrayBuffer cuando la pagina se sirve con dos cabeceras HTTP de respuesta especificas:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Estas dos cabeceras ponen la pagina en lo que los navegadores llaman un estado de "aislamiento de origen cruzado". Sin ellas, SharedArrayBuffer no esta definido, el motor no puede iniciar sus hilos y obtienes un canvas negro y un error en la consola que menciona SharedArrayBuffer is not defined o crossOriginIsolated is false.

No configuras estas cabeceras en Godot. Las configuras en lo que sirva los archivos. Ese es el truco completo. De ahi se derivan tres consecuencias:

1. Abrir index.html desde tu disco duro nunca funcionara, porque no hay ningun servidor que envie cabeceras.
2. Un servidor que no puede enviar cabeceras personalizadas (GitHub Pages normal, por ejemplo) no puede ejecutar la compilacion con hilos tal cual.
3. Un servidor que las envia automaticamente (itch.io con el interruptor correcto) simplemente funciona.

Paso 5: Pruebalo localmente antes de subirlo

Nunca depures una exportacion web subiendola y actualizando. Prueba primero en tu propia maquina con un servidor local que configure las cabeceras.

La opcion mas rapida, si tienes Python instalado, es un pequeño script que sirve la carpeta con ambas cabeceras. Guardalo como serve.py dentro de tu carpeta web-build:

import http.server, socketserver

class Handler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
        super().end_headers()

with socketserver.TCPServer(("", 8000), Handler) as httpd:
    print("Serving on http://localhost:8000")
    httpd.serve_forever()

Ejecuta python serve.py y abre http://localhost:8000. Si el juego carga aqui, la exportacion es correcta y cualquier problema restante es una cuestion de configuracion del servidor, no de Godot.

Si prefieres no escribir un script, la opcion Depuracion Remota del editor de Godot (el menu desplegable junto al boton de reproduccion, "Ejecutar en Navegador") lanza un servidor local correctamente configurado y abre la compilacion. Es la verificacion mas rapida durante el desarrollo.

Paso 6: Alojalo

itch.io (lo mas sencillo, gratis)

Esta es la opcion recomendada para compartir y para game jams.

1. Comprime toda la carpeta web-build en un zip. Comprime el contenido, no la carpeta padre, para que index.html este en el nivel superior del zip.
2. En itch.io, crea un nuevo proyecto y establece Tipo de proyecto como HTML.
3. Sube el zip y marca Este archivo se reproducira en el navegador.
4. En las opciones de incrustacion, establece un tamano de ventana que coincida con la resolucion de tu juego y marca Soporte para SharedArrayBuffer si itch lo ofrece (configura las dos cabeceras por ti).

itch.io gestiona las cabeceras automaticamente, que es la razon por la que es la opcion mas directa. Si tu juego funciona localmente con el script anterior pero no en itch, el interruptor de SharedArrayBuffer es casi siempre la pieza que falta.

Netlify, Vercel o tu propio servidor

Estos servidores te permiten configurar cabeceras personalizadas, por lo que la compilacion con hilos funciona bien una vez configurada.

En Netlify, agrega un archivo _headers a la raiz del despliegue:

/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

En Vercel, configura las mismas dos cabeceras en vercel.json dentro de una regla headers. En tu propio servidor nginx o Apache, agregalas al bloque de localizacion. El principio es identico en todos los casos: envia esas dos cabeceras para la pagina y los recursos.

GitHub Pages

GitHub Pages normal no puede enviar cabeceras personalizadas, por lo que la compilacion con hilos no funcionara ahi directamente. La gente lo soluciona con un pequeno service worker que inyecta las cabeceras en el lado del cliente (el enfoque "coi-serviceworker" es el mas comun), pero es un parche y no todos los navegadores lo respetan. Si GitHub Pages es un requisito inamovible, espera tener que agregar ese truco. De lo contrario, usa itch.io o Netlify y ahorrate el problema.

Solucionar una pantalla negra: la lista de tres preguntas

Si ves un canvas negro, abre la consola de desarrollador del navegador (presiona F12, luego la pestana Consola) y lee el primer error en rojo. Coincidira con una de tres causas.

1. ¿Abriste el archivo directamente? Si la URL empieza por file://, ese es el problema. Sirvelo por HTTP con el script local de arriba.
2. ¿Aparece SharedArrayBuffer o crossOriginIsolated en el error? Faltan las cabeceras. Agregalas en el servidor, o activa el interruptor de SharedArrayBuffer en itch.io.
3. ¿El error menciona una version o un fallo al cargar la plantilla? Tus plantillas de exportacion no coinciden con tu version del motor. Reinstalalas a traves de Administrar Plantillas de Exportacion.

El noventa por ciento de las exportaciones web fallidas son una de estas tres. Revisalas en orden antes de asumir que tu juego tiene un error mas profundo.

Lo que no se traslada al navegador

La exportacion web es real, pero no es escritorio con una URL. Algunas cosas se comportan de forma diferente:

• El acceso al sistema de archivos esta en una sandbox. Los datos guardados van a la IndexedDB del navegador, no a una carpeta en disco. Planifica tu sistema de guardado en torno a esto si la web es tu objetivo.
• Los plugins nativos (bibliotecas GDExtension compiladas para escritorio) normalmente no funcionan en el navegador. Todo lo que enlaza un .dll o .so nativo necesita una alternativa compatible con la web o hay que eliminarlo de la compilacion web.
• El tamaño de carga importa mas que en ningun otro sitio. En la web, el usuario descarga el motor, el paquete de datos y todos los recursos antes de que empiece el juego. Comprime las texturas, elimina los recursos no utilizados y mantente dentro de un alcance 3D realista si la web es tu canal principal. Un juego 3D pesado puede suponer una primera carga de 30 a 100 MB, lo que es doloroso en datos moviles.
• La latencia de audio es ligeramente mayor en el navegador que en escritorio. Generalmente no supone un problema, aunque en ocasiones se nota en juegos con ritmo muy ajustado.

Si construiste el juego con Summer Engine

Los pasos de exportacion anteriores son identicos, porque Summer Engine es compatible con Godot 4 y utiliza el mismo pipeline HTML5 y WebAssembly. La diferencia esta en el proceso anterior, en como se construye el juego. En lugar de escribir a mano el controlador del jugador, la configuracion de la escena y la logica del juego, describes lo que quieres en lenguaje natural y la IA lo construye. Cuando estes listo para compartirlo, exportas a la web exactamente como se describe aqui.

La exportacion web esta incluida en el nivel gratuito. Construir y exportar son gratuitos, y el plan de pago solo cubre mayor uso de IA y funciones de equipo, por lo que el ciclo completo desde la idea hasta un enlace que alguien puede hacer clic no cuesta nada para probarlo.

Si aun no has empezado un proyecto, la ruta mas rapida hacia una compilacion lista para la web es comenzar desde una plantilla que ya tenga el movimiento y la camara configurados, describir las mecanicas que quieres encima, y luego seguir los seis pasos anteriores para ponerlo en un navegador. Todo el ciclo, desde un proyecto en blanco hasta un enlace jugable en itch.io, cabe en una tarde.