Parte 12 — Juegos web y HTML5

⬅️ Volver al programa · 📚 Índice completo · ⏮️ Parte anterior · ⏭️ Parte siguiente

14 clases · rango 214–227 · Juegos que corren en el navegador: Godot a WebAssembly, Phaser, PixiJS, Three.js, WebGL/WebGPU, networking web y distribución en portales

Fuentes de referencia de esta parte:

• Documentación de Phaser, PixiJS y Three.js.
• MDN Web Docs — WebGL / WebGPU / Canvas.
• Documentación de exportación web de Godot.
• Documentación de itch.io y portales HTML5.

🎯 ¿De qué trata esta parte?

La web es la plataforma más accesible del mundo: un enlace y el jugador ya está jugando, sin instalar nada. Esta parte enseña a llevar juegos al navegador por dos vías. La primera es exportar Godot a HTML5/WebAssembly y entender sus particularidades (servir por HTTP, cabeceras, tamaño de descarga). La segunda son los frameworks nativos de la web: JavaScript con Canvas, Phaser (2D), PixiJS (render 2D acelerado) y Three.js (3D en el navegador), sobre WebGL y el emergente WebGPU.

Cubre también lo específico de la web: audio e input en el navegador (con sus restricciones), networking con WebSockets y WebRTC, optimización y carga (assets, streaming, tamaño), la distribución en itch.io, Poki y portales HTML5, y las PWAs para juegos instalables. El capstone publica un juego web funcionando.

🧩 Problemas que resuelve

• Exportar a web y que "no cargue" por cabeceras, rutas o servir desde file://.
• No saber elegir entre Godot-web, Phaser, PixiJS o Three.js según el proyecto.
• Audio que no suena hasta que el usuario interactúa (política de autoplay).
• Juegos web pesados que tardan una eternidad en cargar.
• Multijugador web que no funciona porque UDP/ENet no existe en el navegador.
• No saber dónde ni cómo publicar un juego HTML5.

🎓 Resultados de aprendizaje

Al terminar la parte, el alumno podrá:

• Exportar un juego de Godot a HTML5/WebAssembly y servirlo correctamente.
• Crear juegos web con JavaScript, Phaser, PixiJS y Three.js.
• Entender WebGL y el rol de WebGPU en el render web.
• Gestionar audio, input y networking (WebSockets/WebRTC) en el navegador.
• Optimizar la carga y el tamaño de un juego web.
• Distribuir en itch.io y portales, y empaquetar como PWA instalable.

🧱 Prerrequisitos

• Partes 0, 1 y 7 (fundamentos, 2D y networking; WebSockets/WebRTC se retoman aquí).
• Nociones de JavaScript (Parte 0 introduce el lenguaje); Node.js para las herramientas web.

📚 Las 14 clases

La Parte 13 da el salto a lo inmersivo: realidad virtual y aumentada.