Contenido del curso
Tu primer juego
Desarrollando el juego
Conclusión
Exporta tu juego de Godot a HTML5
Resumen
Aprende a pulir tu juego de Pong en Godot agregando efectos de sonido al rebotar la pelota, corrigiendo bugs de colisión y configurando un timer que mejora la experiencia de juego antes de exportar tu proyecto a HTML5.
¿Cómo corregir el bug de la pared inferior en Godot?
Si tu pelota rebota en un ángulo extraño cerca del piso, lo más probable es que la pared inferior esté mal posicionada dentro del escenario en lugar de quedar pegada al borde.
El problema viene de un error de signo al definir la coordenada Y del nodo. En lugar de escribir 1080 + 50, quedó 1080 - 50, lo que mete la pared dentro del área visible.
¿Cómo sé si una pared está mal posicionada en Godot? Mira si los cuadraditos del borde quedan vacíos como en la pared superior. Si el borde se ve completo y la pelota rebota antes de tocar el final, la pared está adentro del escenario.
Corrige el valor a 1080 + 50 y la pelota llegará hasta el final de la pantalla, igual que el jugador.
¿Cómo agregar un efecto de sonido al rebote de la pelota?
Para darle mejor feedback al jugador, vamos a sumar un sonido cada vez que la pelota choca con una paleta o una pared. Esto se hace con un nodo específico de audio.
¿Qué nodo de audio debo usar en Godot?
El nodo correcto es AudioStreamPlayer, sin la versión 2D ni 3D. Esto importa porque las versiones posicionales hacen que el sonido suene más fuerte cuando te acercas al objeto, y aquí solo queremos que el sonido se dispare sin relación espacial.
Los pasos clave son:
- Agregar el nodo AudioStreamPlayer dentro de la escena de la pelota.
- Importar el archivo de audio al sistema de archivos del proyecto.
- Desactivar la opción loop en las propiedades de importación y reimportar, para que el sonido no se repita infinitamente.
- Arrastrar el audio a la propiedad Stream del nodo.
Después de eso, el nodo está listo para reproducirse cuando lo llames desde el script.
¿Cómo disparar el sonido desde el script de la pelota?
Dentro del script de la pelota, ya tenemos una función que detecta cada colisión. Ahí mismo es donde queremos ejecutar el sonido. Si nombramos al nodo AudioCollision, podemos llamarlo desde el nodo raíz Ball con el signo pesos:
gdscript $AudioCollision.play()
Guarda los cambios, dale play al juego y vas a escuchar el rebote cada vez que la pelota toca algo.
¿Cómo usar un nodo Timer para retrasar el reinicio de la pelota?
Un detalle importante: cuando hay un gol, la pelota vuelve al centro y se dispara de inmediato. Eso no le da tiempo al jugador para reaccionar. Aquí entra el nodo Timer, que sirve para desencadenar acciones con un retardo.
Agrega un nodo Timer a la escena del nivel y nómbralo RestartTimer. La lógica queda así:
- En la función
restart_game, comenta la línea que reinicia la pelota directamente y reemplázala por el inicio del timer. - En la función
_ready, llama arestart_gamepara que la partida arranque también con el delay. - Conecta la señal
timeoutdel timer al script de la pelota, vinculándola a la funciónreset_ball. - Dentro de
reset_ball, ejecutatimer.stop()para evitar que el timer siga ciclando.
¿Cómo referencio el Timer dentro del script de la pelota?
Como el timer vive en la escena del nivel y no en la de la pelota, necesitas obtenerlo desde el padre. Usa una variable onready para garantizar que todo esté cargado antes de buscar el nodo:
gdscript onready var timer = get_parent().find_node("RestartTimer")
Con esto, la pelota puede frenar el timer una vez que se dispara su timeout. El resultado: un segundo de pausa cuando inicia la partida y después de cada gol, suficiente para que el jugador se prepare.
¿Para qué sirve onready en GDScript? Le dice a Godot que asigne la variable solo cuando todos los nodos estén listos en el árbol. Es útil cuando referencias nodos de otra escena con
get_parentofind_node.
¿Cómo exportar tu juego de Godot a HTML5?
Antes de exportar, haz dos ajustes finales: cambia el nombre del proyecto a Platzi Pong y reemplaza el ícono por defecto de Godot por uno propio, como una pelota de tenis.
Luego ve al menú de exportación. Godot te permite exportar a:
- Android e iOS.
- Windows, Mac y Linux.
- Servidor dedicado.
- HTML5 para navegador.
Elige HTML5, define una carpeta de salida (por ejemplo dist) y nombra el archivo index. Godot generará un .html junto con todos los assets. Si te aparece un aviso sobre plantillas de exportación faltantes, descárgalas desde el botón que ofrece el editor; pesan unos 500 MB.
Para probar el resultado en local, abre la carpeta dist en Visual Studio Code y usa una extensión tipo Live Server (botón Go Live) que levanta un servidor en tu IP local. El juego corre directamente en Google Chrome sin instalar nada.
La ventaja de la exportación web en Godot es que está muy optimizada, así que puedes subir esa misma carpeta a cualquier servidor y compartir tu juego con quien quieras. La exportación para Mac es la más compleja porque requiere certificados de desarrollador, pero el resto de plataformas son bastante directas.
¿Qué plataforma vas a elegir para publicar tu Pong? Cuéntame en los comentarios.