Índice

• Introdución a Stray
• Clasificación de la Interfaz
• Propuestas de interfaz diegética
• Bibliografía

Introducción a Stray

Para esta práctica voy a trabajar con la interfaz de juego Stray [1], desarrollado por el estudio francés BlueTwelve [2] y publicado por Anapurna Interactive [3]. El juego está hecho en el motor Unreal Engine 4 y se lanzó el 19 de junio de 2022 para PlayStation 4, PlayStation 5 y PC, y más tarde, el 10 de agosto de este mismo año, en XBox One y XBox Series X/S. Comentar que recibió muchos premios como juego Indie, entre ellos el del mejor gameplay innovador de 2022 en los Steam Awards [4], y al mejor juego independiente de 2022 en los Game Awards [5].

En Stray controlamos a una gata naranja callejera en una cámara en tercera persona, que se separa de su manada después de caerse al abismo mientras estaban explorando el mundo. Intentando volver con su manada, se encuentra a un pequeño robot llamado B-12, que tiene la memoria corrompida por lo que se ayudan mutuamente. Además B-12 le sirve a la gata como asistente para interaccionar con el mundo del juego, el cual tiene un arte y estética Cyberpunk [6] [Figura 1], y que está basado en la ciudad hongkonesa de Kowloon [7], que fue un asentamiento militar y minero que poco a poco fue densamente poblado debido a las oportunidades de trabajo tras el comercio de China con Reino Unido posterior cesión de estos territorios a la corona británica. En esta historia estamos ante un futuro distópico en la que ya no la habitan humanos, sino robots de distintos tipos que ocupan cada una de las distintas regiones de la ciudad, desde los bajos fondos hasta las zonas más altas.

Con respecto a las mecánicas principales, tenemos un control con cámara en tercera persona en donde podemos caminar y correr, y un parkour asistido, donde nuestro personaje podrá saltar y escalar al acercarse a zonas concretas de escenario, indicado en la UI [Figura 2]. Además, tenemos diferentes acciones contextuales como maullar y rascar las uñas a objetos [Figura 3], o podemos interactuar directamente con elementos y los propios robots del juego mediante B-12 [Figura 4], que nos hará de traductor. Estos últimos nos darán pistas de la historia que hay detrás del mundo actual. Además de las zonas de exploración, existen ciertas partes de persecución, en la que tenemos que huir de pequeños enemigos que intentan devorar a nuestros personajes y que actúan en manada [Figura 5]. También hay escenas de sigilo donde tenemos que evitar que drones de seguridad nos detecten. Con respecto a los coleccionables, hay unos en concreto que son la memoria fragmentada de B-12, que restaurándola nos permite dar más contexto a la historia asociada.

Escogí este juego porque, aparte de jugarlo recientemente, creo que reúne los distintos tipos de interfaz a tratar en esta PEC. Aún así, principalmente usa muchas veces una interfaz holográfica que a mi punto está bien interconectada, tanto durante el desarrollo del gameplay como con respecto al mundo en el que se localiza ya que destaca bien en pantalla con el mundo oscuro. Unido a esto, las mecánicas de este juego son bastantes reducidas, por lo que creo que puede ser un buen ejercicio repensar nuevas soluciones a ciertos elementos.

Clasificación de la Interfaz

Dentro del juego se usa una tipografía que asemeja a los alfabetos usados en Asia, como el alfabeto Hangul coreano o el silabario Katakana japonés [8]. Además, los robots realizan sonidos parecidos a notas musicales cuando hablan entre ellos. Por eso, como indiqué en el apartado anterior, B-12 hace de traductor a Stray de los elementos del gameplay mediante una interfaz diegética a modo de holograma. Primeramente tenemos los diálogos de los distintos robots, que, como se ven en la Figura 4, tienen el texto traducido además del nombre del robot que habla. También se puede ver este tipo de interfaz en los menús de inventario y fragmentos de memoria de B-12 al presionar el botón arriba [Figura 6]. Por último, existen ciertas zonas a las que se puede acceder mediante un código, el cual B-12 muestra el panel de control también usando la interfaz holográfica [Figura 7].

Con respecto al sistema de parkour, el juego nos indica en qué zonas podemos acceder mediante un símbolo espacial en el punto en el que Stray hará el salto [Figura 2]. Este símbolo representa el botón del mando que hay que pulsar para que la gata realice la acción. Esta interfaz también se usa para indicar al jugador ciertos elementos del mundo a los que la gata le llama la atención [Figura 8], pensado sobre todo como ayuda al jugador de qué elementos son interactuables. Como vemos en la figura 9, una vez que nos acercamos a él, nos indica el botón para interactuar con ese elemento.

En ciertos puntos del juego hay eventos quick-time event en los que tenemos que pulsar dos botones alternando entre ambos cuando interactuamos en zonas en las que Stray se puede rascar con las uñas (árboles, alfombras, sofás, etc). Estos botones se muestran de forma espacial a cada lado de Stray indicando cada botón a pulsar para que la gata realice la acción [Figura 3].

En cuanto a elementos de la interfaz de tipo Meta, tenemos el indicador de vida de la gata cuando es atacada por los Zurk, que se muestra como un efecto en la pantalla pasando a un color rojo cada vez más intenso según el daño recibido por Stray [Figura 5]. Además se incluye un símbolo espacial a modo de quick-time event de qué botón pulsar para librarnos del ataque y poder seguir. Una vez liberados este efecto se va reduciendo hasta que la gata se recupera del daño.

Otro elemento de la interfaz de tipo Meta es el mensaje que se muestra cuando entramos en una nueva zona del mundo de Stray, indicado por el alfabeto del juego, más un subtítulo con el texto traducido [Figura 10].

OPor último, existen elementos de la interfaz no-diegéticos que se sitúan en la esquina derecha de la pantalla. Estos elementos indican los controles cuando estamos en las interfaces de B-12 [Figura 4] [Figura 6] [Figura 7]. Además, en determinados puntos se muestra una ayuda de los distintos botones del control del juego, que aparece en medio de la pantalla con el símbolo del botón y qué acción ejecuta [Figura 11].

Propuestas de interfaz diegética

En esta sección me centraré en cuatro propuestas de mejora en forma de interfaz diegética. Para ello me apoyaré del patrón de diseño de Eelke Formen comentado en la PEC 1 de esta asignatura [9].

Problema	Uno de los problemas más comentados por los jugadores es el sistema de parkour, el cual a veces no responde de la forma adecuada o no resulta de ayuda para poder avanzar en el mundo, por lo que no funciona como la ayuda visual que tendría que ser.
Contexto	Para poder saber qué zonas son accesibles, tienes que acercar a Stray hasta la parte del escenario donde puedes hacer el salto, momento en el que sale el símbolo espacial indicando que se puede realizar el parkour, como se ve en la Figura 2.
Fuerzas	El juego no tiene un mapa, por lo que necesita de las ayudas visuales para saber cómo continuar. A veces está claro cómo continuar (elementos distintivos en el mundo que ayudan a indicar al jugador donde continuar), pero no el cómo llegar a esas zonas.
Solución	Mi propuesta es que B-12 pudiera resaltar en el espacio 3D en un color distintivo todos los bordes de los elementos en los que Stray puede acceder saltando cuando se acerca a ellos. Unido a esto, aumentaría el rango usado para mostrar el botón espacial actual en este resaltado.
Justificación	Accesibilidad – Una ayuda visual más clara permitiría a los jugadores saber que zonas son accesibles sin depender solo del botón espacial. Además, al aumentar el rango en el que la ayuda visual se muestra evitaría que los jugadores se atasquen tanto.
Ejemplos	Muchos juegos, además indican estas zonas con un color diferente (como el uso del color amarillo en The Last of Us) o directamente el diseño del juego (Mirror’s Edge). En este caso me quedaría con la saga de juegos de Sly Cooper, para PlayStation 2. El diseño de niveles está pensado para el sigilo, por lo que hay elementos del escenario que el personaje puede trepar, saltar, o usar para esconderse. Para estos elementos, cuando el personaje se acerca se iluminan con partículas del color del personaje con el que estamos jugando, como se ve en la Figura 12.

Problema	Cuando hay que introducir un código numérico, el juego usa a B-12 como traductor de la acción mediante una interfaz holográfica a pesar de que el panel del código está modelado y texturizado en el mundo.
Contexto	Como comenté en el capítulo anterior, existen zonas en las que podemos acceder si encontramos un código de seguridad que abre las puertas de la zona. Para introducir este código, B-12 nos despliega una interfaz holográfica mientras el introduce el código en un panel [Figura 7]. Tendría sentido en el propio juego sabiendo que tiene un alfabeto distinto al latino si no fuera porque esos códigos se encuentran escritos en números arábigos dentro del mundo, por lo que sabemos que al menos sí que se usa el mismo sistema de numeración que en nuestro mundo.
Fuerzas	Siguiendo la idea de que es un mundo distópico B-12 nos traduce tanto los diálogos con los robots como distintos elementos del juego que contiene el alfabeto del juego. Dentro del juego ya existe el modelo con el panel del código numérico, como el que se muestra en la figura 7.
Solución	Para este caso, mi propuesta sería la de que en estos eventos se mueva la cámara a una posición en la que se esté mostrando el propio modelo del panel, que el usuario lo usará como interfaz directa. Con esto habremos prescindido de la interfaz que nos proporciona B-12, aunque el siga introduciendo el código.
Justificación	Usabilidad – Reducimos la cantidad de interfaces holográficas que gestiona B-12, también reduciendo los recursos del juego. Además, creo que sabiendo como funciona un código numérico, no supone una pérdida de información para el jugador.
Ejemplos	En este caso pongo el ejemplo de Keep Talking and Nobody Explodes [10], un juego disponible en Steam pensado para VR en el que se nos presenta un Scape Room donde los distintos jugadores tienen que desactivar una bomba. Cada parte de la bomba tiene un minijuego distinto que hay que completar, como el que se ve en la Figura 13. En este caso se puede ver como todas las interfaces están en forma diegética integradas dentro del propio juego.

Problema	Si estamos recibiendo daño, el efecto que se dibuja en la pantalla puede dificultar el huir de los elementos que nos realizan daño, además de observar el resto del nivel.
Contexto	En las zonas en las que estamos en plena persecución de los zurks, cuando Stray recibe daños, la pantalla se tiñe de rojo además de mostrar un efecto de blur en los laterales de la pantalla. Este efecto va aumentando a medida de que la gata recibe más daños hasta teñir la pantalla de rojo cuando el daño es máximo [Figura 15].
Fuerzas	En Stray solo hay zonas concretas en las que podemos recibir daño, siendo un juego más centrado en la exploración y teniendo muchas más zonas de plataformas que de huida. Modificar los colores de toda la pantalla permite hacer una atmósfera más opresiva, pero también puede resultar un problema visual si el balance de colores no es el correcto (porque no hay elementos que destaquen en pantalla).
Solución	Stay incorpora un traje en el que a diferentes eventos del juego, este reacciona como un menú contextual mostrando iconos, como se puede ver en la figura 16. En este traje se podría incorporar un medidor de vida restante que se activase en los momentos en los que la gata recibe daño, reduciéndose cuanto más daño reciba el jugador.
Justificación	Accesibilidad – Al mover el indicador de daño al traje, se puede observar mejor el mundo para huir de los zurk y aún así obtener información precisa de la vida.Usabilidad – Como Stray está en medio de la pantalla y de la acción, en estas escenas de huida siempre la vamos a ver de espaldas, por lo que la información del daño está siempre en el centro de la acción
Ejemplos	Uno de los ejemplos que usan este sistema lo podemos encontrar en la literatura propuesta para esta PEC [11], en donde se nos expone como la saga Dead Space muestra el medidor de vida y estamina del personaje usando el propio modelo del traje, aprovechando que el juego tiene una cámara en tercera persona.

Problema	En el juego se prioriza la exploración del mundo, por lo que no existe un mapa que nos muestre en dónde estamos. Unido a esto se puede ver que el elemento del nombre de nueva zona cubre toda la pantalla, evitando así centrarse en la acción hasta que desaparece (que suele ser a los 4 segundos).
Contexto	Cuando pasamos a una nueva parte del mundo, se muestra un mensaje en la pantalla en forma de overlay que indica el nombre de la zona a la que acabamos de acceder [Figura 10]. Aún así hay varias escenas en las que se puede seguir moviendo a Stray, por lo que muchas veces estos inicios son pasillos en los que no hay acción a realizar hasta un tiempo adelante, pensado más como transición de una zona a otra.
Fuerzas	El mensaje de overlay de entrada a nueva zona dificulta la visibilidad de la acción mientras aparece. El personaje tiene que invertir tiempo en encontrar como acceder a la siguiente zona en las que están pensadas para ser exploradas. Muchos juegos incorporan un minimapa para guiar al jugador, aunque no sea del todo detallado.
Solución	Una posible solución para ayudar a la usabilidad podría ser mover el mensaje del nombre de la zona como un mensaje que nos muestra B-12 al entrar y, unido a esto, mostrar un pequeño mapa debajo del mensaje con información de dónde tenemos que dirigirnos. Este mapa se podría consultar en el menú que se despliega por B-12 cuando pulsamos el botón de menú [Figura 6].
Justificación	Accesibilidad – Mostrando el mensaje más integrado en B-12, la acción no se tiene por qué detener ya que no se dificulta la visibilidad. Además, este cambio diegético permite integrar mejor la información de la zona a Stray, que es la que quiere saber cómo avanzar y reunirse con su manada.Usabilidad – Al permitir un mapa de la zona, el jugador se puede guiar mejor por el escenario. No tiene que ser muy detallado, pero al menos le proporciona una orientación como ayuda.
Ejemplos	En el juego Firewatch controlamos a un vigilante forestal y tenemos que movernos por un área abierta del bosque para avanzar en la trama. Cada área está designada con un nombre, que también podemos ver en un mapa que lleva nuestro protagonista. Además, por el camino podemos encontrar señales que nos indican el nombre del área y la distancia desde la señal [Figura 17].

Bibliografía

1. “Stray” [Online]. Disponible: https://stray.game (accedido 2 Nov. 2023).
2. “STRAY Devblog” [Online]. Disponible (inglés): http://hk-devblog.com (accedido 2 Nov. 2023).
3. “Annapurna Interactive” [Online]. Disponible (inglés): https://annapurnainteractive.com (accedido 2 Nov. 2023).
4. “Jugabilidad más innovadora de 2022”. steampowered.com [Online]. Disponible:https://store.steampowered.com/steamawards/2022/#MostInnovativeGameplay (accedido 2 Nov. 2023).
5. “Best Indie 2022”. The Game Awards [Online]. Disponible (Inglés): https://thegameawards.com/nominees/best-indie (accedido 2 Nov. 2023).
6. S. Martin-Raget, “An in-depth look into the mysterious, futuristic world of Stray”. 29 de Julio, 2021. blog.playstation.com [Online]. https://blog.playstation.com/2021/07/29/an-in-depth-look-into-the-mysterious-futuristic-world-of-stray (en inglés, accedido 2 Nov. 2023).
7. D. Aubrey, “Blue Twelve explains how Kowloon Walled City inspired Stray and why you play as a cat”. 8 de Junio, 2022. usatoday.com [Online]. https://ftw.usatoday.com/2022/06/stray-blue-twelve-interview-kowloon (en inglés, accedido 2 Nov. 2023).
8. “Alphabet”. stray.fandom.com [Online]. Disponible (inglés): https://stray.fandom.com/wiki/Alphabet (accedido 3 Nov. 2023).
9. E. Folmer, “Designing Usable and Accessible Games with Interaction Design Patterns”. gamedeveloper.com [Online]. https://www.gamedeveloper.com/design/designing-usable-and-accessible-games-with-interaction-design-patterns (en inglés, accedido 4 Nov. 2023).
10. “Keep Talking and Nobody Explodes”. keeptalkinggame.com [Online]. Disponible (en inglés) https://keeptalkinggame.com (accedido 4 Nov. 2023).
11. “Game UI Discoveries: What Players Want”. gamedeveloper.com [Online]. Disponible (en inglés) https://www.gamedeveloper.com/design/game-ui-discoveries-what-players-want (accedido 4 Nov. 2023).