Implementación de una metodología de diseño para desarrollo de un juego responsivo

1. Introducción

Uno de los principales retos a superar cuando se desarrolla un juego destinado a la web es conseguir que éste luzca y funcione de forma apropiada en cualquier plataforma digital y en diferentes tipos de dispositivos. La mejor manera de afrontar este reto es la creación de un esquema en el que se distribuyan los elementos del juego de forma diferente en función de la anchura de la ventana del usuario. Este esquema se denomina «diseño responsivo». El diseño web responsivo permite crear un solo sitio y controlar su apariencia a través de una amplia gama de dispositivos con distintos tamaños de pantalla y resoluciones, mediante la adaptación de los contenidos y el diseño (Lee, et al., 2015).

Sin embargo, la creación de un juego responsivo es un proceso complicado porque hay muchos factores que deben ser considerados: el ancho de la pantalla, su resolución, la relación de aspecto (aspect ratio), el tipo de entrada, es decir, ¿es a través de un ratón, un teclado, una pantalla sensible al tacto?

Como se observa, existen una gran cantidad de factores a considerar desde el inicio del desarrollo de un juego. Esto lleva a hacer la siguiente pregunta: ¿Cómo lograr que el diseño propuesto para un juego dé como resultado un producto que funcione adecuadamente y se escale correctamente a través de todos los diferentes tipos de dispositivos, tamaños de pantalla, resoluciones, navegadores y sistemas operativos?

El presente trabajo trata sobre la implementación que se hizo de una metodología de diseño para desarrollar la interfaz de usuario del juego “La Pulga y las Trampas”, considerando la interfaz de usuario como “lo concerniente al diseño visual de la arquitectura de la información y cómo debe ser presentada en diferentes dispositivos” (Maeda, 2022).

El objetivo del presente trabajo es explicar las etapas que componen la metodología de desarrollo de juegos responsivos y cómo se implementó en el diseño del juego “La pulga y las trampas”.

2. Desarrollo técnico

El juego mencionado arriba forma parte del sitio web Matechavos, desarrollado por la Dirección General de Cómputo y Tecnologías de Información y Comunicación (DGTIC). Este sitio está dirigido a niñas y niños de educación básica con juegos interactivos para promover la construcción de conocimientos matemáticos a través de la interacción con la computadora. La versión original de los juegos fue diseñada y coordinada por académicas de la DGTIC-UNAM en el marco del Proyecto Universitario de Enseñanza de las Matemáticas Asistida por Computadora (PUEMAC), del Instituto de Matemáticas de la UNAM, durante el período de 1998 a 2003. En 2022, se decidió actualizar su tecnología, que había quedado completamente obsoleta, para hacerlos funcionales en todo tipo de dispositivos modernos.

El problema principal que planteó la actualización fue que la interfaz de usuario requería que la parte donde se desarrollaba la mayor parte de la interacción con el usuario, se generara en tiempo real justo después de que el motor del navegador había terminado de construir la estructura de la página. Por lo que, si en principio esta página no estaba estructurada adecuadamente conforme al ancho de la pantalla del dispositivo, entonces, al momento de estar jugando, los diferentes elementos dinámicos se movían erráticamente o aparecían en lugares equivocados. Por tal motivo, lograr que la estructura de la página del juego estuviese bien construida y que fuese completamente responsiva se convirtió en uno de los principales requerimientos del desarrollo, en especial, para anchos de pantalla inesperados, por ejemplo, un usuario que amplía o reduce el ancho de la ventana del navegador de manera aleatoria.

Hay dos términos que generalizan los fallos de presentación que existen en el diseño responsivo: Responsive Layout Failures y Visibility Faults (Althomali, 2022). El primero, las fallas en la disposición responsiva, tiene que ver con fallas de presentación que se observan en páginas web de diseño responsivo en diferentes anchos de pantalla utilizando el mismo navegador, mientras que el segundo, las fallas de visibilidad, hace referencia a las fallas producidas por los cambios dinámicos del diseño que dan lugar a un cambio en la funcionalidad de la página web. Este trabajo se centró en el primero, ya que era ésa la problemática que se buscaba solucionar. Así, para asegurar una solución al requerimiento planteado en el párrafo anterior se revisaron diferentes métodos y marcos de trabajo que permitían el diseño de interfaces responsivas y/o la creación de interfaces de usuario multiplataforma, como: GUMMY un constructor de interfaces gráficas de usuario multiplataforma, Quill, XDStudio o W3Touch. Al final, se tomó como referencia el modelo descrito en el artículo Responsive Game Design Model (Andrzejczak, J. Ogrodowczyk, H., 2016) no sólo porque estaba enfocado en el diseño responsivo de interfaces para juegos, sino principalmente porque, para lograrlo, hacía uso de un conjunto de criterios que facilitaban la correcta respuesta responsiva del juego, precisamente lo que se requería para el proyecto a desarrollar.

Los criterios utilizados en este modelo de diseño responsivo se unificaron con otros que abarcaban el proceso completo del diseño general de un juego, no sólo la interfaz de usuario. De esta forma, se definió la metodología para lograr que el juego presentara la misma funcionalidad y accesibilidad en diferentes plataformas, resoluciones y tipos de entrada, evitando así la repetición de trabajo.

2.1 Metodología

La metodología planteada para el desarrollo del juego se compuso de los tres procesos siguientes y cuyos títulos describen el criterio en el que se basaron:

2.1.1 Los gráficos y la interfaz del juego deben admitir múltiples resoluciones integrando el modelo de diseño de juego responsivo

Paso 1. Modelo de interfaz de juego responsivo para crear una jerarquía de alto nivel de elementos de interfaz de usuario parametrizados.

Se identificaron los elementos de control y las áreas que estarían presentes en todo momento en la interfaz del juego, usando como referencia el diagrama de flujo del juego que se observa en la figura 1.

Figura 1

Flujo básico de navegación del juego “La pulga y las trampas”

Se definió también un modelo lógico para hacer una representación abstracta de la estructura de objetos que componían la interfaz del juego, sus propiedades y relaciones. Esto tuvo la finalidad de crear una jerarquía y adjuntar reglas a esa jerarquía, buscando lograr de esta forma comportamientos similares en plataformas digitales diferentes.

Figura 2

Jerarquía del modelo definiendo las relaciones de inclusión entre las áreas de juego

Nota: Adaptado de Andrzejczak, J. Ogrodowczyk, H., 2016.

Las áreas múltiples de la interfaz se organizaron jerárquicamente. Cada una de ellas contiene a varias áreas hijas (véase figura 2). Durante el proceso de composición, cada área secundaria se colocó dentro de los límites de su área principal.

Paso 2. Propiedades. Cuatro parámetros principales para el modelo, que constituyen la base de la solución de diseño propuesta.

Una vez definida la estructura de la interfaz como una jerarquía, se trabajó en la especificación de los requisitos espaciales que debía cumplir cada área a través del uso de propiedades, entre ellas el tamaño y el espaciado.

Se siguieron las siguientes reglas para el algoritmo de composición o distribución:

El tamaño

Las propiedades básicas de cada área eran sus tamaños mínimo y máximo. Los tamaños mínimos se usaron para describir el menor espacio posible que el algoritmo de distribución debía asignar a un área. Si existía espacio libre adicional un área podía ampliarse, sin embargo, no podía superar sus valores de tamaño máximo.

El espaciado

Las distancias entre áreas se podían personalizar mediante el uso de las propiedades de espaciado como: margen (margin) y relleno (padding). La propiedad margin se utilizó para separar áreas situadas en el mismo nivel jerárquico. La propiedad padding se utilizó para manejar el espacio entre un área y sus hijos. Para las áreas adyacentes, se utilizó el criterio de que siempre se alejaran entre sí una distancia igual a la mayor de sus márgenes.

Distribuciones (layouts)

Para este desarrollo, se dispuso de varios tipos de distribuciones para organizar áreas hijas dentro de padres específicos, siempre respetando las restricciones impuestas por otras áreas padres y por otras propiedades. Por ejemplo, se utilizaron distribuciones en secuencia para colocar las áreas una a una a lo largo del eje vertical u horizontal o para alinearlas en relación con su padre, verticalmente (arriba, centro o abajo) y horizontalmente (izquierda, centro o derecha).

Desbordamiento y variantes

La propiedad desbordamiento se utilizó para prever y tratar los siguientes casos: si el espacio de distribución era limitado, entonces existía la posibilidad de que la distribución de la interfaz produjese desbordamientos. También era posible que algunas zonas se cruzaran entre sí o que no cupiesen dentro de los límites proporcionados por un elemento padre. En ambos casos, se ocultaron elementos o se forzaron a encogerse para ajustarse al espacio disponible, sin importar sus propias restricciones de tamaño y espaciado.

Paso 3. Prototipo que implementa el modelo de interfaz de juego responsivo.

Se diseñó y programó un prototipo para probar el diseño propuesto para el juego en diferentes plataformas, tamaños de pantalla y tipos de dispositivo, así como en orientación horizontal y vertical (véase figura 3).

Figura 3

Maqueta de la composición de elementos del juego, ordenados conforme a su jerarquía

Nota. Adaptado de Andrzejczak, J. Ogrodowczyk, H., 2016.

El diseño de la interfaz gráfica se enfocó mayormente en las principales relaciones de aspecto (aspect ratio), más que en las resoluciones de los dispositivos. Se seleccionaron las relaciones 16:9 y 4:3 porque, en general, cubrían los dispositivos usados por los usuarios objetivo.

2.1.2 La mecánica del juego funciona con varios tipos de entrada

Para asegurar que el juego pudiese operar en cualquier tipo de dispositivo, llámese computadora, laptop, tableta o teléfono celular, se simplificaron los controles, de tal forma que el juego pudiese funcionar si se utilizaba teclado, ratón o pantalla sensible al tacto.

2.1.3 La posibilidad de poderse ejecutar en varias plataformas con el mismo código base

Para asegurar el funcionamiento correcto del juego en diferentes plataformas usando el mismo código, se programó solo con herramientas y software que se ejecutaba bien en múltiples plataformas, como javascript, php, html5 y css3.

2.2 Resultados

Se logró construir un prototipo que funcionó de manera exitosa en una amplia variedad de dispositivos con todo tipo de anchos de pantalla.

Se desarrolló por completo el juego (véase figura 4) y se probó exitosamente en diferentes plataformas, diferentes tipos de dispositivos y con diferentes tipos de entrada.

Figura 4

Portada principal del juego “La pulga y las trampas”

Es importante aclarar que la metodología no pudo solucionar todos los problemas de interfaz o de tipo de entrada. En este caso, por ejemplo, las pruebas con el prototipo mostraron que, en el nivel de dificultad alto y usando una pantalla sensible al tacto (dispositivo móvil), los elementos del juego que debían arrastrarse en la pantalla (las trampas) eran demasiado pequeños como para poder ser maniobrados con precisión por el dedo de un jugador. Esto obligó a establecer una resolución mínima para el ancho de la pantalla, con el fin de evitar que las imágenes se redujeran más allá de lo conveniente, lo cual forzó el diseño de la interfaz para que en los teléfonos celulares la orientación horizontal fuese obligada.

3. Conclusiones

A pesar de su sencillez, la metodología demostró ser eficaz al permitir lograr el objetivo de conseguir un juego funcional en diferentes tipos de dispositivos, siendo completamente responsivo.

El utilizar una metodología para el desarrollo de un juego responsivo, permitió hacer visibles los pasos a seguir para asegurar el logro del objetivo. Esto ayudó a prevenir errores y conflictos por anticipado, con lo cual se ahorró tiempo de desarrollo.

El definir la estructura de la interfaz de usuario como una jerarquía y asignarles a los diferentes elementos de esta jerarquía propiedades que especificaban requisitos tanto espaciales como de tamaño permitió manejarlos ordenadamente en grupos que podían posicionarse o extenderse y contraerse dependiendo del ancho de la pantalla.

La metodología permitió anticipar problemas que se presentarían en el diseño, pero no proporcionó todas las soluciones para el diseño planteado.

Agradecimientos

Quiero agradecer de corazón a la maestra Patricia Martínez Falcón por su entrega en la realización del proyecto de actualización de tecnología del sitio web Matechavos.

Referencias