Publicar un videojuego de Unity en WebGL

WebGL es una especificación estándar que está siendo desarrollada actualmente para mostrar gráficos en 3D en navegadores web. El WebGL permite mostrar gráficos en 3D acelerados por hardware (GPU) en páginas web, sin la necesidad de plug-ins en cualquier plataforma que soporte OpenGL 2.0 u OpenGL ES 2.0. Nos permitirá correr nuestro juego hecho en Unity en un navegador sin necesidad de instalar ningún plug-in.

WebGL genera un código basado en JavaScript, por lo que convertirá el código de nuestros scripts C# a JavaScript.

Para compilar nuestro juego en WebGL debemos seleccionarlo, en Build Settings, como plataforma a la que será exportado.

Cuando compilamos un proyecto WebGL, Unity creará una carpeta con los siguientes archivos:

• un archivo index.html que incrusta el contenido en una página web.
• un archivo JavaScript que contiene el código para el reproductor.
• un archivo .mem que contiene la imagen binaria para inicializar la memoria heap para el reproductor.
• un archivo .data que contiene los datos de assets y escenas.
• algunos archivos JavaScript de ayuda para inicializar y cargar el reproductor.

Se puede visualizar el reproductor WebGL directamente en el navegador Firefox simplemente abriendo el archivo index.html. Por razones de seguridad, la mayoría de navegadores tendrán restricciones en scripts abiertos desde los archivos locales: URLs, así que esta técnica no funcionará. Si usamos Build & Run (File > Build & Run) el archivo será almacenado temporalmente en un servidor web local y abierto desde un host local URL (que evitará las restricciones).

Actualmente, FireFox y Chrome son los únicos navegadores con soporte Unity para WebGL.

Build Player Options

WebGL permite seleccionar una nivel de optimización en la ventana Build Settings. En general, «Slow» produce compilaciones no optimizadas, pero con tiempos de compilación mucho menores que el resto de opciones, de modo que puede ser usado para probar los posibles problemas del código. «Fast» produce compilaciones optimizadas, y «Fastest» permite algunas opciones adicionales de optimización, pero hace que los tiempos de compilación sean muy grandes (debería ser usado únicamente en lanzamientos finales).

Cuando marcamos la casilla «Development Build», Unity generará una compilación de desarrollo. Además, el los JavaScripts generados podrán ser leídos y mantienen los nombres de sus funciones, pero la compilación será demasiado grande para ser distribuida.

La casilla «Autoconnect Profiler» debe ser usada cuando queramos perfilar nuestro contenido Unity WebGL. No es posible conectar al Profiler a una compilación funcional como en otras plataformas, ya que las conexiones de profiler son mantenidas usando WebSockets en WebGL, pero el navegador sólo permitirá conexiones salientes desde el contenido, por lo que la única manera de usar el Profiler en WebGL es marcar «Autoconect Profiler» para tener el contenido del Editor.

Player Settings

WebGL tienes algunas opciones adicionales en el Player Settings ( Edit > Project Settings > Player ).

La opción Strip Engine Code en Other Settings permite activar el código desnudo (code stripping) para WebGL. Nótese que WebGL no diferencia entre niveles de desnudo, activado o no. Si se activa, Unity no incluirá código para ninguna clase que no se use (si no se usa ningún componente o método de físicas, el motor de físicas completa será excluído de la compilación).

El campo WebGL memory size en Publishing Settings permite especificar cuanta memoria (en MB) el contenido debería asignar para heap. Si el contenido es demasiado bajo, se obtendrán errores de memoria cuando el contenido sea cargado y la escena podría no caber en la memoria disponible. Pero si el valor es demasiado alto, el contenido podría fallar al cargarse en algunos navegadores o máquinas, porque el navegador podría no tener suficiente memoria disponible para asignar el tamaño del heap solicitado. Este valor es escrito para una variable llamada «TOTAL_MEMORY» en el archivo html generado, así que si queremos experimentar con esta opción, puede editarse en el archivo html para evitar recompilar el proyecto entero.

El desplegable Enable Exceptions en Publishing Settings nos permite activar la excepción de soporte en WebGL. Si no necesitamos ninguna excepción de soporte, establece esta opción a «None», lo cual dará el mejor rendimiento y las menores compilaciones. Cualquier excepción arrojada causará que el contenido se detenga con un error en esa opción. Pero si necesitamos usar excepciones, se pueden establecer las siguientes:

• Explicitly Thrown Excaptions Only (default), permitirá capturar excepciones que son explícitamente lanzadas desde una sentencia «throw», y harán bloques «finally» en nuestro código de trabajo. Esto hará que el código JavaScript generado de nuestros scripts mayor y más lento, pero no es normalmente un problema si los scripts no son el principal cuello de botella de nuestro proyecto.
• Full, que, además de lo anterior, también generará excepciones para referencias Null y para accesos fuera de los límites de arrays. Son generados por comprobaciones incrustadas para cualquier acceso a referencias en el código generado, por lo que causarán adicionalmente incrementos del tamaño del código y ralentizaciones. Además, añadirá rastro de pilas gestionadas para excepciones. Es aconsejable sólo usar este modo cuando necesitamos depurar errores en nuestro código, ya que genera compilaciones muy grandes y muy lentas.

La casilla Data caching en Publishing Settings permite activar el almacenamiento en caché local automático para los datos del reproductor. Si está activado, nuestros assets se almacenarán en un caché local en los navegadores en bases de datos IndexedDB, por lo que no tendrán que ser re-descargados en sucesivas ejecuciones del contenido. Nótese que diferentes navegadores tienen diferentes reglas en permitir almacenamiento IndexedDB, y podrían preguntar por permisos para almacenar los datos si está activado, y las compilaciones exceder el tamaño límite definido por el navegador.

Distribución de tamaño

Cuando publicamos para WebGL, es importante mantener el tamaño de nuestra compilación lo menos posible para evitar largos tiempos de descarga a los usuarios. Para consejos generales para reducir el tamaño de los assets, mirad aquí. Con respecto a WebGL:

• No compiléis «Development Build», están diseñadas para preservar los nombres de las funciones y ocupan demasiado.
• Estableced el nivel de optimización en «Fastest».
• Estableced «Enable Exceptions» en Player Settings a «None».
• Activad «Stripping Level» en Player Settings.
• Tened cuidado cuando uséis third-party dlls, ya que pueden arrastrar muchas dependencias e incrementar el tamaño del código significativamente.

Si hacemos una compilación de lanzamiento, Unity generará una carpeta «Compressed», que contendrá una versión gzip-comprimido de la compilación. Si el servidor web está configurado correctamente, usará estos archivos en vez de los más grandes de la carpeta «Release», puesto que el protocolo http nativamente soporta compresiones gzip (más rápido que lo que las descompresiones que Unity podría mantener por sí mismo en código JavaScript). Sin embargo, esto significa que necesitamos asegurar que el servidor http provee los datos comprimidos. Podemos comprobar eso cargando el contenido e inspeccionando la red de transferencias en las herramientas de desarrollo de nuestros navegadores. Deberíamos encontrar «Content-Encoding: gzip» en la respuesta para el js y datos descargados. Si estamos hospedando nuestros archivos en un servidor web Apache, Unity escribirá un archivo invisible .htaccess en el directorio de la compilación, que dirá a Apache que comprima las transferencias, por lo que debería funcionar sin problemas. Para otros servidores web, comprobad los manuales de cada uno.

Instalar servidor de Apache

Para hospedar nuestro juego emplearemos un servidor Apache. Lo primero será descargarlo de http://httpd.apache.org/download.cgi#apache22 , pudiendo elegir entre varias versiones. En nuestro caso seleccionamos la última versión estable para Windows, 2.4.17. Nos llevará a la siguiente página: http://httpd.apache.org/docs/current/platform/windows.html#down, que mostrará toda la información que pudiéramos necesitar detallada. Ahí se nos mostrarán varias opciones de descarga, en mi caso he empleado Apache Lounge.

A continuación descomprimimos el archivo y copiamos la carpeta Apache24 en el disco C. Ahora ejecutamos en una ventada DOS con permisos de administrador (símbolo del sistema, por ejemplo) el  archivo httpd.exe de la carpeta bin. Luego instalamos el servicio mediante httpd.exe -k install.

Abriremos con doble clic ApacheMonitor.exe y nos mostrará los servicios instalados de Apache (Apache2.4 en nuestro caso). Seleccionándolo y dándole a Start se iniciará el servidor. Para comprobar que funciona podemos abrir un navegador y poner la dirección http://localhost/. Si todo funciona correctamente nos mostrará el mensaje «It works».

Crearemos una carpeta a la que llamaremos «servidor_web» en C. Iremos al archivo de configuración httpd.conf de Apache en la carpeta conf. En la línea 149 Document Root especificará la carpeta en la que se encontrarán las páginas y los archivos a servir. Cambiaremos la ruta a la carpeta que hemos creado:

DocumentRoot «c:/servidor_web»
<Directory «c:/servidor_web»>

A continuación copiaremos nuestro juego exportado a WebGL a la carpeta c:/servidor_web. Si ahora vamos a http://localhost/ se ejecutará nuestro juego en WebGL.

Para acceder al servidor desde otra computadora conectada en una red local solo es necesario escribir en la barra de direcciones la dirección IP de la computadora que sirve de host, es decir la que tiene el servidor Apache instalado.

Para que tu conexión a internet pase a través del servidor será necesario configurarlo como un proxy fordward para eso en el archivo de configuración httpd.conf descomenta, (quitar el signo #) las siguientes líneas:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
Después agrega en el final del archivo la siguiente linea: ProxyRequests On
Cierra y guarda los cambios.

Accede a las Opciones de internet mediante el Panel de Control.

• En la pestaña Conexiones pulsa el botón Configuración de LAN y marca la casilla Usar un servidor Proxy
• Escribe en Dirección: 127.0.0.1 y en Puerto: 80 o el que vayas a usar.
• Presiona Aceptar en todas las ventanas.
• Reinicia el servidor.
• Lo anterior se aplica si usas el navegador Internet Explorer y Google Chrome, si usas Firefox las opciones anteriores tienes que ingresarlas en:
  Opciones >Configuración >Configurar como Firefox se conecta a Internet.

A partir de ahora toda tu conexión pasa a través de Apache, sea direcciones locales o externas.