← Todos los casos

CASO 02 · GAMIFICACIÓN Y UI DE JUEGOS

Interfaz gamificada para cinco juegos de formación

Rol
Interfaz del juego
Años
2017 — 2021
Juegos
ADA · TKS · MARS · Pacific · Merchants
Stack
React · SASS · motor GAT
GamificaciónReactSASSHUDMenús y panelesVisoresTutorialesResponsive
MARS: HUD de recursos sobre la colonia 3D
MARS · HUD de recursos sobre la colonia: oxígeno, agua, comida, energía, vivienda, felicidad y monedas.

Qué hice

En los juegos de formación de Game Strategies, la gamificación vive en la interfaz: puntos, rankings, recompensas, retos con cuenta atrás, progreso y feedback inmediato, además de menús, HUD, conversaciones, visores y tutoriales. Esa capa la diseñé y la maqueté yo en ADA, TKS y MARS, y también la del motor GAT sobre el que se construyen. En Pacific y Merchants hice la UI de menús y botones.

El 3D, la narrativa y la lógica de juego son de otros equipos; mi parte es la interfaz.

MARS: panel para construir una instalación con categorías, coste y recompensas
MARS · construir una instalación: categorías, coste, turnos y recompensas.
MARS: fin de partida con el podio de colonias y sus estadísticas
MARS · fin de partida: podio de colonias y estadísticas.
MARS: desafío con cuenta atrás y tres respuestas
MARS · desafío con cuenta atrás entre colonias.
ADA: escena 3D con el inventario de objetos y una pista
ADA · inventario de objetos y pista sobre la escena 3D.
ADA: minijuego de conexión con nivel, panel y acciones
ADA · minijuego de conexión: nivel, panel y acciones.
Triskelion: tareas del día con energía, estrés y puntos
Triskelion · tareas del día con energía, estrés, puntos y tiempo.
Pacific: menú de acciones sobre un personaje en la isla
Pacific · menú de acciones sobre cada personaje: delegar, dar feedback, desarrollar, recompensar.
Pacific: ficha de un miembro del equipo
Pacific · ficha de un miembro del equipo.
Merchants: panel de variables de la negociación
Merchants · variables de la negociación: financiación, contratos y descuentos.
Merchants: resultado de la negociación con un cofre de recompensa
Merchants · resultado de la negociación con recompensa.

Cómo lo hice

01

Maquetar antes de integrar

Cada pantalla se maquetaba primero en HTML y SASS, fuera del juego, para validar diseño y responsive antes de llevarla a React.

02

Un sistema de UI por juego

MARS tenía su propia guía de componentes: botones, barras de progreso y de carga, paneles y alertas documentados y reutilizables.

03

Componentes que se reutilizan

Componentes React de UI comunes entre juegos sobre el motor GAT: lo que funcionaba en un juego se aprovechaba en el siguiente.

En cifras

100 %

de los estilos de la interfaz de MARS

98 %

de los estilos del motor GAT

1.323

commits en ADA, TKS y MARS

+60

pantallas de MARS maquetadas en HTML