Índice

• Introducción a Cartas contra la Humanidad
• Análisis de la interfaz del menú principal
  • Análisis de las interacciones del juego
  • Diseño del prototipo de la interfaz
• Prototipo de la interfaz en Unity XR
• Bibliografia

Introducción a Cartas contra la Humanidad

Para esta práctica he decidido escoger y adaptar un juego de mesa como es el de Cartas contra la humanidad (Cards Against Humanity) [1] a un entorno en VR. La razón es que un juego de este estilo tiene mucho potencial y muchas formas de adaptarse, porque, dependiendo del proyecto que se quiera construir alrededor del, se puede realizar desde un juego multijugador en VR o hacer cierta interacción con los servicios de streaming como Twitch, algo que le da puntos para su rejugabilidad. Otra de la razones es que el concepto y plantillas está licenciado como Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) [2], por lo que se puede reutilizar libremente para proyectos no comerciales siempre que citemos la fuente original. A pesar de esto, el nombre del juego sí que está protegido por copyright y los proyectos derivados suelen usar nombres diferentes.

Con respecto a Cartas contra la humanidad, es un juego de mesa con unas reglas muy sencillas [3]. Un jugador, el Zar de la partida, elige una carta negra del mazo de preguntas que contiene una pregunta o una frase a completar con una o varias cartas [Figura 1], y el resto de jugadores tiene en su mano cartas blancas con las que responder. Una vez mostradas, el jugador que sacó la carta negra, el Zar, elige la respuesta que más le ha gustado, haciendo que el jugador que sacó esa respuesta gane un punto y empiece la siguiente ronda como Zar, sacando una carta negra. El nombre del juego es un juego de palabras con “Crímenes contra la Humanidad”, y se debe a que el contenido de las cartas son políticamente incorrectas, incluyendo términos que pueden ser ofensivos para distintos colectivos e incluso desagradables, motivo por el cual el juego base y sus creadores han sido criticados. Pese a esto, existen versiones “familiares” [4] donde se eliminan todos estos términos y se recurren a conceptos graciosos evitando ser tan ofensivos.

Como ya indiqué, este posible juego podría tener interacción con Twitch, algo que últimamente se está popularizando, con ejemplos como Cult of The Lamb [5] [Figura 2], Dead Cells [6] o incluso el reciente Baldur’s Gate 3 [7] [Figura 3]. Las interacciones suelen ser leer y escribir el propio chat del streaming mediante chatbots o mediante extensiones de Twitch, las cuales permiten hacer que aparezcan interfaces web encima del streaming y ofrecen una mayor interacción de cara a los espectadores. Con esto, en el juego de esta práctica se podría hacer que los jugadores se pudieran conectar a Twitch y hacer que los espectadores elija la carta ganadora, o hacer incluso que varios espectadores elijan las respuestas, por lo que tendríamos que tener esto en cuenta de cara a la interfaz.

Análisis de la interfaz del menú principal

Como Cartas contra la humanidad es un juego de mesa, la interfaz es clave para entender cómo funciona el juego y en qué estado está la partida. Muchos de los juegos del género de cartas basan su interfaz en elementos 2D. Esto es debido a que estos tipos de juegos tienen que mostrar mucha información en pantalla. Es por eso que muchos de los elementos suelen ser no diegéticos, ya que se muestran en la HUD del juego, como se puede ver en la Figura 4 del juego Hearthstone de Blizzard.

En cambio, un ejemplo que podemos utilizar para esta práctica es la interfaz del juego Inscryption, el cual se desarrolla dentro de un mundo 3D pixelado, como podemos ver en la Figura 5. En este juego muchas de las ideas de interfaz se han llevado a un tipo diegético, dejando cosas como los subtítulos de los diálogos de forma espacial [Figura 6]. Se puede destacar que el juego se desarrolla en una mesa modelada en 3D sobre la que se posan las cartas en un tablero de forma diegética [Figura 5.1], y un mazo de cartas en la mano que también siguen un tipo diegético [Figura 5.2]. El mazo de juego y descartes está a la derecha del jugador [Figura 5.3], el cual se puede mirar rotando la cámara, y otros elementos como monedas, o saber quien va ganando según la balanza está a la izquierda de la pantalla [Figura 5.4].

Análisis de las interacciones del juego

En esta sección analizo las posibles interacciones del juego desde un punto de vista de accesibilidad y usabilidad. Para esta práctica me basaré en cómo funciona la interfaz de Inscryption, adaptándola a Cartas contra la humanidad. Para este análisis me basaré en parte en el patrón de diseño de Eelke Formen comentado en la PEC 1 de esta asignatura [8].

Contexto	Para empezar la ronda, el jugador establecido como Zar debe escoger una carta de pregunta del mazo de cartas de preguntas no descartas, y que tendrá que ser mostrada a los jugadores para saber con qué pregunta juegan.
Fuerzas	Se necesita un montón que represente el mazo de cartas con preguntas que se pueden jugar, es decir, no están descartadas. El jugador tiene que poder ver bien la carta una vez seleccionada.
Solución	Mi propuesta pasa por representar este mazo como un objeto 3D del que se pueda interaccionar, resaltando de forma visual que ese elemento se puede seleccionar. Una vez mostrado, que un modelo de la carta con el texto salga del mazo y rote de forma que el jugador pueda leerlo.
Justificación	Usabilidad – Representar el mazo como un objeto 3D con diferentes capas hace que el jugador asocie a un mazo de cartas de la vida real, por lo que el concepto de sacar una carta del mazo se hace más sencillo de entender.Accesibilidad – Al resaltar elementos de forma visual, le aporta una ayuda a que ese elemento se pueda usar.
Ejemplos	En Inscryption aparece el mazo de cartas que el jugador puede robar a la derecha. En vez de aportar una ayuda visual resaltando, lo que se realiza es cambiar la forma del icono del ratón por una mano y se rota el objeto un poco.

Contexto	Una vez mostrada la carta a jugar, cada jugador mira en su mano de cartas una carta de respuesta que piense que es divertida o que tiene posibilidad de que el Zar la elija como ganadora. Una vez escogida, es lanzada a la mesa. Puede pasar que una carta de pregunta contenga múltiples respuestas (normalmente representado por los espacios de la carta, o indicada en una esquina con el número de cartas). Para eso cada jugador tiene que apilar las cartas de respuesta en el orden en el que desea que se lean.
Fuerzas	Se necesita que el jugador pueda ver su mano con varias cartas una vez mostrada la carta de pregunta. Se debe resaltar cada carta una vez apuntemos a ella para indicar cual de todas se está escogiendo.
Solución	Para esta interacción mostraré la mano de cartas delante de la cámara del jugador en abanico para que tengas la suficiente distancia para que no estén apiladas. De nuevo mi idea es resaltar cada carta por separado de la misma forma que en el mazo de cartas de preguntas.
Justificación	Usabilidad – Al mostrar varias cartas en forma de abanico delante del jugador, este se hace la idea de una mano de cartas física.Accesibilidad – De nuevo, al resaltar cada carta, el jugador sabe cual de todas está escogiendo, evitando fallos de escoger la carta que no es.
Ejemplos	En el juego en el que me estoy basando, la mano de cartas es sostenida por un modelo de una mano en 3D, y se puede elegir una carta al hacer click sobre ella. A diferencia del ejemplo anterior, aquí el cursor no cambia a una mano, pero cada carta se resalta mostrándose por encima del resto.En Inscryption aparece el mazo de cartas que el jugador puede robar a la derecha. En vez de aportar una ayuda visual resaltando, lo que se realiza es cambiar la forma del icono del ratón por una mano y se rota el objeto un poco.

Contexto	El jugador sabe cuantas rondas va ganando porque una vez el Zar elige una carta de respuesta, el jugador que jugó esa carta se lleva la carta de pregunta a a su zona de la mesa. Al finalizar el juego, cada jugador cuenta las cartas negras que tiene y gana quien más rondas haya ganado en total.
Fuerzas	Se necesita un montón que represente el mazo de cartas con preguntas ganadas por el jugador actual. El jugador tiene que poder ver el número de cartas que tiene ese mazo.
Solución	Mi propuesta pasa por representar este mazo como un objeto 3D de la misma forma que el mazo de preguntas, La diferencia radicaría en que, para mejorar la visualización de cara al jugador, al mirar al mazo este debería mostrar el número de cartas que contiene, ya sea de forma espacial mediante un elemento de UI o de forma diegética mostrar el número como texto en la carta de arriba del mazo.Otra forma que podría ser más diegética sería mostrar el número mediante fichas negras que aparecen en la zona de la mesa del jugador, así contando el número de estas fichas también se podría saber el número de rondas ganadas
Justificación	Usabilidad – Representar el mazo como un objeto 3D con diferentes capas hace que el jugador asocie a un mazo de cartas de la vida real. El mazo podría crecer en altura a medida que vayamos ganando rondas, mostrando cómo se van añadiendo nuevas carta.Accesibilidad – Mediante fichas se puede representar de una forma el número de rondas ganadas sin tener que escribirlo, por lo que es un concepto que no depende de cada cultura. El problema viene a que si estamos en un partida con muchas rondas, el número de piezas se puede hacer muy grande y es más difícil de contar.
Ejemplos	En el juego de Inscryption aparece una balanza que se va añadiendo nuevos pesos dependiendo de qué jugador recibe daño. Para saber quién va ganando la ronda, se tiene que observar qué lado tiene menos peso.

Diseño del prototipo de la interfaz

Ahora pasaré a comentar el diseño de cada propuesta de interacción con su contraparte en la interfaz. Para empezar usaré el concepto de mesa de Inscryption para representar el estado de la ronda actual [Figura 7]. Cuando se empiece una ronda, el jugador tendrá que escoger una carta de preguntas del mazo de preguntas [Figura 7.1], el cual se representarán de forma diegética. Este mazo solo contiene preguntas que tienen una única respuesta para simplificar su implementación. Cuando se escoja una pregunta, está se mostrará al jugador una carta con el texto de la pregunta [Figura 8], y luego se lanzará sobre la mesa [Figura 7.2]. Además tendremos el mazo de respuestas como tipo diegético [Figura 7.5], del cual el jugador tendrá que robar una carta nueva de preguntas para finalizar su turno.

Siguiendo con el ejemplo de Inscryption, usaré también su concepto para representar la mano con las cartas de preguntas del jugador en Cartas contra la humanidad de forma diegética [Figura 9]. En mi diseño la idea será que podemos seleccionar una carta de la mano para responder a la pregunta, la cual se lanzará sobre la mesa [Figura 7.3]. Como ya comenté, una vez hecho esto, el jugador tendrá que robar una carta nueva de preguntas para finalizar su turno, y seguirá un esquema parecido al escoger carta para jugar [Figura 10].

Para representar los puntos que va ganando cada jugador, he elegido la forma de mostrarlo mediante un mazo de carta, ya que así se puede reusar parte de los componentes usados en los otros mazos. Para ello se mostrará una pila de tarjetas negras delante de cada jugador una vez ganen una partida, siguiendo la forma en la que se juega en la vida real. Para saber de forma precisa cuántos puntos tenemos, se pondrá un indicador de tipo espacial con la cantidad de partidas ganadas [Figura 11].

Prototipo de la interfaz en Unity XR

Se ha generado un prototipo en base al análisis pasado y el código está subido en GitLab en el siguiente enlace: https://gitlab.com/NEKERAFA/CardsAgainstHumanityXR. Cabe mencionar que como programo desde GNU/Linux (Ubuntu), no me ha sido posible exportar el proyecto debido a que los componentes XR no son compatibles del todo con la plataforma de Linux, más es completamente funcional desde el editor. El proyecto incorpora un README con la información del cómo jugar.

Bibliografia

1. “Cards Against Humanity” [Online]. Disponible (inglés): https://www.cardsagainsthumanity.com (accedido 4 Ene. 2024).
2. “Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International” [Online]. Disponible (inglés): https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode (accedido 4 Ene. 2024).
3. “Regles del joc i cartes blanques i negras de Cards Against Humanity” [Online]. Disponible (catalán): https://cdn.sanity.io/files/vc07edlh/production/417171df7b5571ac575579ac262279b1b6472eca.pdf (accedido 9 Ene. 2024).
4. “Cards Against Humanity: Family Edition” [Online]. Disponible (inglés) https://cdn.sanity.io/files/vc07edlh/production/aae064add091655a7bca35a9df27e57d6a7ccfc7.pdf (accedido 9 Ene. 2024).
5. “Twitch integration | Cult of the Lamb Wiki” [Online]. Disponible (inglés): https://cult-of-the-lamb.fandom.com/wiki/Twitch_integration (accedido 9 Ene. 2024).
6. “Streamer Mode – Dead Cells Wiki” [Online]. Disponible (inglés): https://deadcells.fandom.com/wiki/Streamer_Mode (accedido 9 Ene. 2024).
7. “How do I get the Twitch Extension? – Larian Support” [Online]. Disponible (inglés): https://larian.com/support/faqs/how-do-i-get-the-twitch-extension_54 (accedido 9 Ene. 2024).
8. E. Folmer, “Designing Usable and Accessible Games with Interaction Design Patterns”. 17 de mayo de 2007. gamedeveloper.com [Online]. https://www.gamedeveloper.com/design/designing-usable-and-accessible-games-with-interaction-design-patterns (en inglés, accedido 9 Ene. 2024).