Tag: aws

Cómo subir un juego de Unity en WebGL con AWS S3

Imagínate esto. Quieres pasarle a tus amigos el último prototipo del videojuego para PC que has creado. Compilas tu juego para funcionar en Windows y lo envías para que ellos lo prueben. Pero, oh desgracia, muchos de tus amigos no usan Windows, sino Mac OS X, y uno que otro, Linux. Así que tienes que compilar el proyecto para cada uno, y asegurarte que funcione bien.

¿Y si pudieras ahorrarte todo ese esfuerzo? Si tan solo hubiera un programa que funcione en cualquier PC…

Afortunadamente, Unity tiene un módulo para compilar WebGL, que es una especificación para renderización de gráficos en un explorador web. Actualmente, los exploradores más populares lo soportan en gran medida. De esta manera, podemos crear una página web que sirva como la interfaz de nuestro juego, sin necesidad de que los jugadores instalen directamente la aplicación. Basta con que vayan a la página, esperen a que se descargue el juego, y empiezan a jugar.

¿Qué vamos a hacer?

Para este tutorial, usaremos el servicio en nube Amazon Web Services (AWS) que será nuestro “host” en línea para nuestro juego. Éste se mostrará en un sitio web estático, el cual no cambiará por sí solo o tendrá más funcionalidades que mostrar el juego.

Usaremos AWS ya que nos ahorra el comprar un nombre de dominio y hosting en línea al poder utilizar una prueba gratuita, siempre y cuando no excedamos las cuotas de uso.

Compilaremos un proyecto de Unity en WebGL, preparado para subirlo al servicio S3 de AWS. Después, crearemos un contenedor de archivos llamado “bucket” en S3 y lo configuraremos para que funcione como un sitio web estático. Finalmente, subiremos el juego compilado y configuraremos los archivos para que puedan mostrarse sin problemas.

Importante

Al seguir esta guía, eres responsable de posibles costos que se produzcan por el uso de AWS. Revisa y asegúrate de entender las cuotas de uso de AWS en este enlace.

Así mismo, los archivos que se habiliten serán públicos y visibles a quién posea el enlace de la aplicación, así que no muestres información privada y sensible.

Habiendo aclarado esto, ¡Empecemos!

Requisitos

  • Instalación de Unity con módulo WebGL. Para el tutorial, usaré Unity 2021.1.
  • Cuenta de AWS (existe opción de prueba gratuita por un año).
  • Proyecto de prueba, listo para compilar. Puedes usar simplemente el proyecto default 3D.

Compilando el proyecto WebGL

  1. Abrir “Build Settings” y cambiar la plataforma a WebGL con el botón “Switch Platform”. Unity reimportará los assets para adaptarlos a la nueva plataforma.
  1. Una vez termine, abrir “Player Settings” desde la misma vista.
  1. En la sección “Settings for WebGL”, ir al apartado “Publishing Settings” y en “Compression Format”, seleccionar “Disabled”.
  1. Regresar a “Build Settings” y dar click en “Build”. Unity solicitará una carpeta para guardar los archivos, elige una de tu agrado (y que puedas recordar después).

Crear bucket en S3

  1. Ir a la consola de AWS.
  1. Dentro de la consola de AWS, ir al servicio de S3. Puedes buscarlo desde la lista “All Services” o teclear “S3” en el buscador.
  2. Una vez en la vista de “Buckets”, elegir la opción “Create Bucket”
  1. En la vista de “Create Bucket”, proporciona la siguiente información:
    • Bucket name: nombre del bucket que almacenará los archivos del juego. Este debe ser un nombre descriptivo, ya que será usado como parte del URL para acceder a los archivos desde el explorador Web. El nombre debe ser en minúsculas y sin espacios.
    • AWS Región: elije la región geográfica que esté más cercana a ti. En mi caso, usaré “us-east-2”.
    • Desactivar la casilla “Block all public access”. Esto para que el contenido sea visible al exterior. Aparecerá una advertencia sobre el acceso público, simplemente activa la casilla.
  1. Las opciones restantes pueden conservarse con la configuración default.
  1. Da click en “Create bucket”. Deberá regresar a la pantalla principal de S3, mostrando el nuevo bucket.
  1. Da click en el nombre del nuevo bucket, lo cual abrirá una vista con detalles sobre el bucket recién creado. Ve a la sección “Properties”, copia y guarda el texto debajo de “Amazon Resource Name (ARN)”. Este es un identificador del bucket que nos servirá para dar permisos de acceso posteriormente. El texto tiene un formato parecido a este: “arn:aws:s3:::el-nombre-de-tu-bucket”
  1. En la sección “Properties”, ir al apartado “Static website hosting” y dar click en el botón “Edit”
  1. En la vista que se abre, solo llenar el texto de “Index document” con “index.html”. Este representa la página principal de nuestro proyecto de Unity.
  1. Da click al botón “Save Changes”, el cual devolverá la página anterior sobre detalles del bucket.
  2. Ir de nuevo al apartado “Static website hosting”. Ahora deberá mostrar un URL. Cópialo y guárdalo al alcance, ya que ese será el punto de acceso al proyecto de Unity.
  3. A continuación, ve a la sección “Permissions” y dirígete al apartado “Bucket Policy”. Da click al botón “Edit”.
  1. En la vista “Edit bucket policy”, copia y pega el siguiente texto JSON en la caja de “Policy”. Reemplaza el texto “<ARN HERE>” por el ARN del bucket. Este es un documento que indica a AWS que cualquiera puede leer los archivos del bucket cuando los solicite.
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicGetObject",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "/*",
      "Principal": "*"
    }
  ]
}
  1. Da click en “Save Changes”.

Esto concluye la configuración del bucket S3 para el sitio web estático. Si intentas entrar al sitio web estático en este momento, solo mostrará una página de error 404, ya que aún no subimos ningún archivo del proyecto.

Cargar archivos del proyecto a Unity

  1. En la pantalla principal de S3, dirígete al bucket configurado para almacenar el proyecto para abrir la vista de detalles en la sección “Objects”.
  1. Ve a la carpeta local donde Unity generó los archivos del proyecto, selecciónalos y arrástralos a la pantalla del bucket. Asegúrate de cargar los archivos directamente en la raíz del bucket y no dentro de alguna carpeta interna, de lo contrario, AWS no podrá acceder al proyecto como sitio web estático.
  1. Dar click en el botón de “Upload”. Los datos del proyecto comenzarán a cargarse a S3.
  2. Al terminar, da click en el botón “Close”. De nuevo, AWS mostrará la vista de detalles del bucket.
  3. En la misma vista, entra a la carpeta “Build” que se acaba de cargar, y da click en el objeto “WebGL.wasm”.
  1. Busca la sección “Metadata” y da click en el botón “Edit”.
  1. En la vista que se abre, cambia el texto debajo de “Value” por “application/wasm”. Esto es para que Unity no muestre advertencias al inicializar el proyecto WebGL.
  1. Al terminar, da click en el botón “Edit metadata”.

Con esto finaliza la configuración del proyecto, entra al URL del bucket y deberías poder acceder una ventana de Unity.

¡Listo!

Honestamente, hay opciones más simples (como itch.io) para subir el contenido, pero la ventaja de hacerlo manualmente y en un servicio en la nube es la posibilidad de contar con mayor flexibilidad para personalización e integración con diversos servicios y código propio, así como usarlo de entorno de pruebas. Ejemplo de esto sería añadir métricas y controles más complejos integrados en la propia página web, así como usar dominios completamente personalizados.

¡Ojalá te haya gustado el tutorial! No dudes en comentar cualquier pregunta o sugerencia.

¡Nos escribimos pronto!

Para más información

Documentación de Unity para exportar projectos a WebGL

https://docs.unity3d.com/Manual/webgl.html

Documentación de AWS para S3

https://docs.aws.amazon.com/es_es/AmazonS3/latest/userguide/Welcome.html