Introducción
En este artículo vemos cómo generar una versión WebGL standalone de nuestro proyecto para navegadores, es decir un programa que se pueda alojar en un servidor, por ejemplo en Itch.IO o en nuestra propia página web y que se pueda ejecutar directamente desde el navegador.
En el siguiente vídeo se muestra qué herramientas se necesita instalar y cómo configurar Unity para exportar versiones WebGL para navegadores.
Cómo crear una compilación para navegadores a partir de un proyecto en Unity 3D
Comenzamos dirigiéndonos a la pestaña File > Build Settings, esto nos abrirá la ventana «Build Settings» que se observa en la figura 1. Aquí podremos configurar algunos parámetros de compilación, como las escenas que se van a añadir y la plataforma objetivo.
Vamos a hacer clic en el botón «Add Open Scenes» para añadir la escena actual a la compilación (una escena en blanco que viene por defecto). La escena que se coloque en la posición 0 será la que se cargue al iniciar, de modo que si tenemos múltiples escenas habrá que reordenarlas convenientemente.
Para generar una compilación WebGL para navegadores, es necesario configurar Unity para que produzca este tipo de compilaciones. En la pestaña «Build Settings» está la lista de plataformas objetivo, allí debemos seleccionar la plataforma «WebGL» y luego hacer clic en el botón «Switch Platform». Esto iniciará el proceso de cambio de plataforma que puede durar unos minutos, este proceso es necesario hacerlo solo una vez, a menos que necesitemos alternar entre compilaciones para Windows o para navegadores. En general es más cómodo testear en el propio sistema operativo y luego de hacer varios avances, producir una compilación WebGL para subirla a Itch.io o a nuestra propia página web.
Una vez que se produjo el cambio de plataforma, el siguiente paso es darle al botón «Build and Run», esto hará que se despliegue una ventana en la que seleccionaremos la carpeta de destino para exportar los archivos del juego o aplicación. En mi caso suelo crear una carpeta llamada Builds en paralelo a la carpeta Assets del propio proyecto, pero pueden elegir cualquier carpeta que deseen, asegúrense de recordar dónde se encuentra para luego poder usar los archivos.
Cuando hemos elegido la carpeta de destino hacemos clic en «Select Folder» para confirmar.
En este punto comienza el proceso de compilación, que tardará más o menos dependiendo de factores como la complejidad del proyecto y la potencia de nuestro ordenador, en la figura 5 vemos la barra de carga de este proceso.
Cuando el proceso de compilación finaliza, como compilamos con la opción «Build and Run», se abre la aplicación automáticamente en nuestro navegador.
Si vamos a la carpeta que se eligió para la compilación encontraremos los archivos del juego o aplicación (figura 8). Estos archivos se pueden subir a una página como Itch.IO o subir a un servidor y podrán ser ejecutados directamente desde el navegador.
Cómo testear compilaciones WebGL hechas en Unity
En la figura 6 vemos la carpeta que contiene los archivos que se generaron durante la compilación. El archivo «index.html» sería algo así como el ejecutable de nuestro juego o aplicación. El problema es que al darle clic para testear nos sale el siguiente mensaje:
El mensaje dice que al parecer nuestro navegador no soporta la compilación Unity WebGL, nos dice que subamos el contenido a un servidor o que probemos otro navegador.
Para testear una compilación WebGL, la forma más rápida es volver a compilar con la opción «Build and Run», ya que al hacer esto, Unity monta automáticamente un servidor local para correr los archivos.
Para que la compilación WebGL funcione definitivamente tiene que estar montada en un servidor ya sea local, que se puede montar con aplicaciones como «Xampp», o tiene que estar montada en un servidor web, ya sea de un tercero, por ejemplo en una página como «Itch.IO» o en un servidor web propio. Te dejo un link a Hostinger, el servidor con el que vengo trabajando hace años, un servicio de calidad y con muy buenos precios, además de la facilidad para escalar el hosting en función del crecimiento de tu web.
Para subir la compilación a tu propio servidor necesitas hacerlo por acceso FTP, Hostinger tiene un acceso FTP incorporado en el panel de control, aunque a mi me resulta más cómodo usar la aplicación FileZilla para conectarme al servidor.
A partir de que se establece el acceso, el proceso no es distinto a copiar archivos dentro de tu propia PC, armas la carpeta donde quieres poner tu compilación, subes lo archivos y luego la ruta para ejecutar la compilación WebGL es la URL desde la raiz hasta el archivo «index.html», que a propósito le puedes poner el nombre que quieras, por ejemplo «Play.html».
Veamos el siguiente ejemplo para entender la ruta como URL dentro de nuestro servidor:
https://gamedevtraum.com/GDT-Apps/Lunar-Orbit-Simulator/Moon.html
Se trata de una compilación WebGL hecha en Unity, si hacen clic en el link pueden probarla. Analizando la URL vemos que la carpeta raiz se encuentra en GameDevTraum.com, a partir de ahí al observar la URL vemos que nos metemos en una carpeta llamada «GDT-Apps», dentro de esa carpeta entramos en otra carpeta llamada: «Lunar-Orbit-Simulator», donde finalmente se encuentra nuestro archivo «index.html», el cual he renombrado para que se llame «Moon.html».
Otra alternativa para conocer la URL del archivo «index.html» es desde el acceso FTP, hacemos clic derecho sobre el archivo y probablemente haya una opción de «Copiar URL», lo cual en el caso de FileZilla, no nos dá la URL exacta, pero si la mayor parte de ella, a eso le hacemos las modificacaciones necesarias para dar con la URL exacta.
Unity WebGL no termina de cargar en el navegador
Me ha pasado que al intentar abrir una compilación WebGL, el navegador nunca termina de cargarla, se queda congelado en la pantalla de carga de Unity. Este problema lo he solucionado quitando la compresión en la compilación WebGL.
Para eso vamos a Edit > Project Settings y se nos debería abrir la ventana que vemos en la figura 8.
Como vemos, en la sección de la izquierda vamos a «Player» y luego en la ventana grande de la derecha vamos a la sección «Publishing Settings», ahí al campo «Compression Format» lo cambiamos por «Disabled» y volvemos a efectuar la compilación. Esto en mi caso ha resuelto el problema de que una compilación de Unity para navegadores no termina de cargar.
