Jugable
Apuntarme

Publicar tu juego HTML5 en itch.io (y que de verdad funcione)

Build de producción, el ZIP correcto, escalado responsive y los errores que hacen que tu juego se vea en negro en el navegador de otro.

· 2 min de lectura · 🔒 Miembros

Terminar el juego y no publicarlo es lo más común del mundo. El paso técnico es media hora; lo que asusta es no saber qué esperar.

1. Build de producción

Si usas Vite:

npm run build

Sale una carpeta dist/. Esa es tu juego, no la carpeta del proyecto.

Un detalle que rompe a casi todos: por defecto Vite genera rutas absolutas (/assets/...). En itch.io tu juego vive en un subdirectorio, así que esas rutas apuntan a ninguna parte y ves una pantalla negra. Arréglalo en vite.config.js:

export default {
  base: './'    // rutas relativas — imprescindible para itch.io
}

2. El ZIP

Comprime el contenido de dist/, no la carpeta dist en sí.

juego.zip
├── index.html      ← tiene que estar en la raíz del ZIP
└── assets/

Si al abrir el ZIP ves una carpeta dist, está mal. itch.io busca index.html en la raíz y si no lo encuentra no te deja marcarlo como jugable.

3. Configuración en itch.io

Al crear el proyecto:

  • Kind of project: HTML
  • Sube el ZIP y marca "This file will be played in the browser"
  • Viewport: el tamaño de tu canvas (por ejemplo 960×540)
  • Activa "Click to launch" si tu juego tiene audio — muchos navegadores bloquean el audio hasta que hay una interacción del usuario, y así te ahorras el problema
  • Fullscreen button: actívalo, es gratis

4. Escalado responsive

No hardcodees el tamaño. Deja que Phaser lo gestione:

const config = {
  type: Phaser.AUTO,
  scale: {
    mode: Phaser.Scale.FIT,          // encaja sin deformar
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 960,
    height: 540
  }
}

FIT mantiene la proporción y añade barras si hace falta. RESIZE te da el espacio completo pero tienes que recolocar tu UI a mano. Empieza con FIT.

5. Antes de publicar

  • Ábrelo en el móvil. El 60% del tráfico de itch.io es móvil y tu juego de teclado no se puede jugar ahí — o añades controles táctiles, o lo dices en la descripción.
  • Prueba en una ventana de incógnito. Detecta assets que estabas cargando desde caché y que no subiste.
  • Mira la consola. Un 404 de un asset se ve como "falta un sprite", no como error.
  • Pon una portada de 630×500. Es lo único que ve la gente al navegar.

Y ya

No esperes a que esté perfecto. Un juego publicado con bugs enseña más que uno perfecto en tu disco duro — porque la gente te dice cosas que tú ya no puedes ver.

Sesión 8 del curso presencial de Phaser: build, publicación y qué hacer después.

Phaser itch.io Gratis