Diseño de interfaz de hoja de personaje retrospectiva





Se acerca el año 2021, lo que significa que han pasado casi 4 años desde que me uní al desarrollo de Pathfinder: Kingmaker como desarrollador de interfaces. Durante este tiempo, el juego ha evolucionado de un pequeño prototipo con una funcionalidad mínima a un sistema enorme y complejo. El juego ha pasado por un lanzamiento, un año de corrección de errores activa y soporte DLC, así como también para la portabilidad a la consola. Y ahora que el desarrollo de este proyecto puede considerarse completo, es hora de mirar hacia atrás y tratar de recopilar una retrospectiva de cómo se diseñaron y construyeron las interfaces.



Decidí comenzar con la interfaz principal, en mi opinión, del juego, desde la hoja de personaje.



Introducción



Computer Pathfinder: Kingmaker es una adaptación del juego de mesa de Paizo Pathfinder, que es muy popular en el mundo de habla inglesa y un poco menos en todo lo demás. Y para que todos los participantes del desarrollo, sin excepción, entendieran bien lo que estaban haciendo, el equipo tuvo una excelente práctica: un juego de mesa semanal basado en el módulo original de Kingmaker.







Y esto ayudó mucho al inicio del desarrollo de esta y otras interfaces, porque es la hoja de personaje que tienes en papel en tus manos, sentada a la mesa.





Tomado de aquí: http://runelords.peepersbog.org/index.html



A diferencia de mis colegas, que tenían más experiencia en juegos y desarrollo, toda mi experiencia con los juegos de rol de mesa se redujo a jugar en mi juventud con fragmentos de las reglas D'n'D y pasar Baldur's Gate en un momento en el que ni siquiera me di cuenta de que fue creado por juego de mesa. Y, por supuesto, esta experiencia es una gran desventaja cuando necesitas transferir un juego de mesa a una computadora. Sin embargo, ahora entiendo que en ese momento la falla se convirtió en dignidad, porque permitió mirar la interfaz desde el punto de vista de una persona que no sabe nada del juego. En esencia, la tarea se convirtió en "explícate a ti mismo cómo funciona", lo que, por supuesto, es mucho más fácil. Después de todo, nadie puede decir cómo usar algo, excepto como una persona que acaba de aprender esto. En el momento en que se estableció la tarea de diseñar la hoja de personaje en el juego, todo parecía muy simple:transfiéralo a formato digital, elimine lo innecesario y listo! Y, por supuesto, resultó estar mal. Cuanto más profundizaba en la estructura de las reglas del juego de mesa, más claro quedaba que Pathfinder no era un juego de reglas, sino de excepciones a las reglas.



Diseño de información



Los datos de entrada fueron, en primer lugar, la hoja de personaje original, la documentación de los diseñadores del juego, el Libro de reglas básico del juego de mesa y una cierta cantidad de diseño de interfaz listo para usar, en particular, el inventario.



Obviamente, era imposible simplemente convertir la hoja de personaje en papel en una versión de pantalla.

En la versión para computadora, se redujo el número de habilidades, pero al mismo tiempo, se agregó la visualización de condiciones y mejoras. Además, se agregaron algunas características que, por regla general, no se mostraban en la versión en papel.



Repensar el papel existente, junto con la nueva computadora, llevó a la idea de dividir la pantalla en tres columnas. Aunque, sería más correcto decirlo, a la idea de estirar la disposición ya existente del inventario. Se suponía que el tercio izquierdo de la pantalla se convertiría en un núcleo de información "transversal" de las interfaces del personaje y absorbería las características principales. Y la parte clave de este bloque era ser un retrato. A diferencia de otros juegos de rol modernos, donde la representación principal del personaje es una muñeca en 3D, teníamos un retrato dibujado para el rol de identificar al jugador como el héroe del juego. Esto se ha enfatizado por varias razones: 1. Este es el género, la herencia espiritual de Baldur's Gate. 2. Un retrato puede expresar emociones más complejas y caracterizar mejor al personaje, haciendo que la experiencia de juego sea más profunda. Los otros componentes del bloque tenían que responder a las preguntas "¿quién?" ¿y cual?":Caótico buen semiorco, bárbaro, fuerte y guapo, pero estúpido, golpea con un martillo como este, protección así. Los dos tercios restantes debían revelar detalles sobre habilidades y destrezas e historia. Como resultado de la proyección de información, todos los posibles bloques de caracteres se agruparon y distribuyeron en columnas y páginas. Por tanto, existía una partición lógica.















Por supuesto, esto resultó no ser una partición óptima, pero se convirtió en un buen punto de partida para un diseño posterior.



Me gustaría destacar la visualización de las progresiones de clase como un tema separado. La peculiaridad de Pathfinder aquí es que, a diferencia de muchos juegos de un género similar, el desarrollo del personaje aquí no se puede formalizar en un mapa de desarrollo estático. Un jugador puede elegir una clase diferente en cualquier nivel y convertirse, por ejemplo, en un mago de nivel 5 y un ladrón de nivel 3, y esto es imposible de predecir. Además, cada clase tiene arquetipos, cuya elección reemplaza algunas de las habilidades y no necesariamente al mismo nivel. Y algunas de las habilidades aparecen en la clase solo después de que el jugador decide la deidad de su personaje u origen.

Para la persona no iniciada, la descripción de casi cualquier clase parece un conjunto de habilidades obtenidas en un orden aleatorio y no está claro cómo se relacionan entre sí. Entonces, en la etapa de recopilación de información, la tarea consistía en comprender el patrón de organización de las clases y formular una idea de cómo simplificar su presentación.



El resultado son varias tablas de comparación con habilidades y características de clase. Quizás el uso de estas tablas no fue tanto en sí mismas como en las conclusiones y observaciones a las que llegamos en el proceso de compilación.

En el proceso de estudiar las estructuras de desarrollo de diferentes clases, todas las habilidades se dividieron en grupos:



  • Habilidades determinantes que determinan el comportamiento de la clase o la aparición de habilidades adicionales: escuela de magia favorita, dominios, origen, mascota.
  • Habilidades con rango, donde la esencia de la acción no cambia, pero sus características aumentan: fuerza, duración, etc.
  • Habilidades con un componente común similar. Un paladín, por ejemplo, tiene auras que otorgan bonificaciones a cosas completamente diferentes.
  • Habilidades parametrizables, donde se puede elegir uno de los parámetros. Por ejemplo, un oponente favorito.
  • Habilidades solitarias que pueden relacionarse con algo incomprensible.


Se decidió visualizar todo lo recolectado ya en la etapa de recolección de información con el fin de evaluar el tamaño y características cuantitativas.







Esta visualización más tarde se convirtió en el esqueleto de las páginas de desarrollo de personajes en todas las interfaces. Escribimos un algoritmo para encadenar habilidades. No todo era susceptible de automatización aquí, y combinamos algunas de las capacidades manualmente en aras de una imagen agradable.



Además de las cadenas de habilidades, las clases afectan la capacidad de usar armadura y operar con armas de un tipo u otro, y también quería sistematizar de alguna manera este problema. Sin embargo, aquí la sistematicidad tuvo lugar solo en los grupos de armas, que ya fueron determinados por los creadores del tablero. De lo contrario, cada clase tenía sus propias adiciones que desafiaban la sistematización. El ejemplo más claro es el clérigo, que empuña cualquier arma sencilla, además del arma favorita del dios al que adora. Conclusión: es necesario mostrar la lista completa de armas y marcar cuál de ellas posee el personaje.



Con el bagaje recibido de información sobre el juego de mesa, comenzamos a trabajar en diseños de interfaz.



Marcado de búsqueda



Tener un desglose lógico de los bloques de información proporciona un buen punto de partida para comenzar a diseñar algo, pero esto no es suficiente. Es bastante difícil llegar a algo sin limitaciones. Nuestro cerebro necesita una sistematización constante del entorno y si no tiene nada a lo que aferrarse, esto se convierte en un problema. Además de la partición lógica, esa limitación fue el sistema de tres columnas, que fue generado por la interfaz de inventario preexistente. Ahora llegó la etapa de crear una presentación visual de información en bloques separados y un intento de combinarlos de alguna manera. Los bloques que resultaron ser buenos, desde el punto de vista de mis colegas y mío, fluyeron en los siguientes diseños. Otros están tachados y permanecen solo en los archivos, que obtuve específicamente para este artículo.



A continuación se muestran algunas de las primeras pantallas y experimentos de diseño. Todos ellos se pueden combinar tratando de exprimir toda la hoja de personaje en una pantalla. Y si los bloques de ataque, defensa y habilidades en general no tenían mucha variabilidad, entonces los bloques sobre habilidades y beneficios contenían un número desconocido de entidades.



Además, en ese momento, subestimé en gran medida la cantidad de opciones de habilidades y, a menudo, traté de encajarlas en bloques muy pequeños. Por cierto, al mismo tiempo estábamos tratando de encontrar una manera de colocar los beneficios en el tercio izquierdo para que también fueran visibles en la pantalla de inventario. Al hablar del bloque de beneficios, surgió un punto interesante: los colegas que conocen profundamente las reglas compartieron los estados del personaje (cansado, cegado, etc.) y los beneficios (efectos positivos o negativos de los hechizos). Esto está escrito en las reglas y se integra bien en la mecánica. Para la vista de la interfaz, todas estas entidades eran iconos con texto que cambiaban los valores de otras estadísticas. Y esta discrepancia se expresa claramente en el código del juego, donde el código de la interfaz conduce a un denominador común de entidades mecánicas.













En los diseños se utilizan retratos de Baldur's Gate.



Después de una serie de experimentos e intentos de encajar todo en una pantalla, quedó claro que la paginación sería el mejor enfoque aquí, y parte de la información tendría que sacrificarse poniéndola en "un clic más".



Y si todo el árbol de progresión, la biografía del personaje y la posesión de armas podían desalojarse sin dolor a otra pantalla, entonces no quería renunciar a la exhibición de habilidades. Nacieron varias variantes más, incluida una representación radial de un personaje de varias clases. Lo pirateamos el mismo día y no lo desarrollamos, porque no era adecuado para personajes que se desarrollaban en la misma clase y tenía una serie de limitaciones técnicas.















Ha habido experimentos con habilidades de agrupación. Era necesario separar las habilidades llamadas Feat, que el personaje elige independientemente de la clase, de las habilidades especiales, que son únicas para cada clase. Además estaban los Rasgos, la historia del personaje que el jugador elige en la mesa para un juego de rol más interesante, pero en nuestro caso, solo otra forma de influir en los valores de las características. Y también queríamos mostrar muchas características que, sin embargo, no siempre eran útiles en relación con una clase de personaje en particular. Por ejemplo, realmente no le importa al mago cuán grande sea su Bono de Ataque Base, no lo usa cuando lanza bolas de fuego. Pero aún así, algunos bloques ya han comenzado a buscar su diseño casi final con verificación de contenido.









Dado que se trata de un artículo retrospectivo, ahora puedo decir que incluso esas comprobaciones no pueden tener en cuenta todas las opciones de contenido que pueden aparecer durante el proceso de desarrollo. Por ejemplo, el bloque de ataque fue diseñado para solo 4 valores y no tuvo en cuenta que con alguna combinación de clases de personajes y hechizos, podrían convertirse en 6. Además, en el momento del diseño, todos los participantes estaban seguros de que el diseño no se movería después de la obra de arte. Pero esto también resultó ser una ilusión. El juego es difícil de planificar de antemano, es un proceso vivo de constante creatividad, desarrollo y cambio. Y las soluciones universales y seguras, desafortunadamente, a menudo se parecen a una hoja de cálculo de Excel, sin rostro y sin emociones. Quería tener menos soluciones de este tipo. Entonces, al final, en alemán, en el caso de dos armas en la mano,los encabezados comienzan a pegarse juntos e incluso el ajuste de diseño receptivo y la escala de fuente no pueden soportarlo. Y la lección aquí es esta: cuando el producto está casi terminado, vale la pena alejarse de él y volver a mirar las decisiones ya tomadas, es posible que ya no sean adecuadas. También hay refactorización en el diseño.



Pero aprenderemos esta lección un poco más tarde. Y luego, después de las primeras iteraciones de la búsqueda de diseño, recopilé el primer documento de diseño que podría discutirse de manera sustancial con colegas. Había agrupaciones de habilidades, bloques grandes con clases seleccionadas, tablas de hechizos. En la progresión, agregamos una cadena sobre el desarrollo del libro de hechizos, y algunas de las características fueron completamente abolidas.



Finalizando el diseño











Los diseños utilizaron iconos de League of Legends.



Las discusiones son siempre un proceso largo en nuestro país, lastradas por numerosos choques de opiniones e intereses. No recuerdo una sola reunión que duró menos de 3 horas. Algunos creen que es más importante proporcionar tanta información mecánica como sea posible, otros, que la inmersión en la historia y la atmósfera es más importante y que los detalles mecánicos se pueden ocultar más profundamente. La mayoría de las veces, estos debates son la única forma eficaz de salir del punto muerto y, como resultado del intercambio de opiniones, pasar a la siguiente iteración con nuevas ideas. Las páginas de la biografía de los personajes y el árbol de desarrollo de la clase en su conjunto fueron aprobados por todos los participantes. Pero desde la página principal se decidió eliminar información sobre habilidades, tabla de hechizos y otras características numéricas de los personajes. Decidieron hacer de la trama del juego el centro de la interfaz. Para el personaje principal, esto se convirtió en la "Rueda de la cosmovisión",y para los compañeros, hemos creado un conjunto de cartas de historia, los eventos clave de este personaje, que se abrirán al jugador a medida que progrese. En este caso, los beneficios también se eliminaron del tercio izquierdo, pero recibieron suficiente espacio para mostrarse junto con el nombre y el parámetro de duración. Por lo tanto, la pantalla se volvió mucho más limpia y también cambió el enfoque al hecho de que este es principalmente un juego de rol, y solo entonces uno mecánico.y solo entonces mecánico.y solo entonces mecánico.









Las habilidades se han movido a una página separada. Esto hizo posible utilizar no solo iconos, sino también los nombres de las propias habilidades. Posteriormente, esto resultó ser muy importante, porque al final no tuvimos el tiempo y los recursos suficientes para dibujar iconos para cada habilidad. Además, codificar el significado de cada habilidad en un icono, y más aún descifrarlo más tarde para el jugador, es una tarea demasiado difícil. Pero, de nuevo, en retrospectiva, debo señalar que subestimé enormemente el número de habilidades en el bloque de Habilidades especiales y sobreestimé su número en el bloque de Rasgos. Esto resultó en un diseño muy desequilibrado de esta pantalla. Lo cual afortunadamente tenemos la oportunidad de arreglar en el próximo juego Pathfinder: Wrath of The Righteous.







También en una página separada obtuve toda la información sobre las características de combate del personaje. Esto, nuevamente, resultó ser una muy buena decisión, porque al final del desarrollo, el número de características en él casi se triplicó.







Los diseños anteriores aparecieron inmediatamente después de esa reunión. A continuación, omitiré algunas pequeñas iteraciones y mostraré la versión final. En él, se ajustaron algunos elementos y se seleccionaron ilustraciones, teniendo en cuenta el presupuesto y el estilo general.













Diseño artístico



Este diseño ya estaba ensamblado en la versión alfa del juego. Vale la pena hacer aquí una digresión importante. En nuestro equipo de UI, a pesar de la división más frecuente entre diseñadores y programadores, utilizamos este tipo de perfiles de desarrolladores, cuando el diseñador, el diseñador de maquetación y el programador son una persona y el artista es otra. Esto le permite distinguir entre las partes técnicas e inmersivas de la interfaz. Y en el momento en que se terminó el diseño, todavía no había ningún artista con nosotros. Además, en ese momento estábamos seguros de que las interfaces serían oscuras, con algún tipo de respaldo de madera-cuero y botones de bronce. Pero pasó el tiempo, y cuando finalmente encontramos a una persona adecuada para nosotros en espíritu y comenzamos a buscar una solución artística, resultó que no queríamos cuero ni madera en absoluto. Los colores de nuestras interfaces se invirtieron y se convirtieron en un papel, un libro de cuento de hadas sobre aventuras,liberado de la pluma de uno de los héroes. Pero los elementos artísticos introdujeron condiciones y restricciones adicionales, que finalmente llevaron a un cambio en el diseño en diversos grados y revelaron algunos problemas, como, por ejemplo, como describí anteriormente sobre los ataques. Pero, en general, creo que las interfaces se han beneficiado mucho. Por lo tanto, la sensación general del juego se volvió integral y la interfaz dejó de ser solo una necesidad necesaria, para convertirse en parte del juego.















Concluyendo la historia sobre la parte de la creación de una interfaz de PC, me gustaría decir que, desafortunadamente, no todas las decisiones de diseño se incluyeron en última instancia en el lanzamiento debido a los recursos limitados. Algunos no los consideramos exitosos y los revisamos como parte del trabajo en un nuevo proyecto, y muchos definitivamente los dejaremos. Pero el ciclo de vida de Pathfinder: las interfaces de Kingmaker no terminó ahí. Tuvimos que migrar a la consola.



Portar a la consola



Pasó poco menos de un año desde el lanzamiento del juego hasta el momento en que comenzamos a portarlo a la consola. Durante este tiempo, logramos agregar muchas características, detalles, completar mucho y decepcionarnos de muchas maneras. Recibimos muchos comentarios de los jugadores e identificamos piedras con las que no queríamos tropezar más. En mayor medida, las piedras se referían al código, muchas cosas se volvieron difíciles de mantener y en algunos lugares estaban demasiado entrelazadas con la mecánica. Entonces, acercándonos a las interfaces de la consola, ya hemos acumulado algo de base de conocimientos, pero también había un problema. Para nosotros, esta fue la primera experiencia en el desarrollo de interfaces para la consola. Analizamos cuidadosamente proyectos similares, identificamos lo que nos gusta y lo que no, leímos los requisitos técnicos, tomamos varias consultas de equipos más experimentados y comenzamos a desarrollar.



La interfaz de la consola, a diferencia de una PC, tiene varias características:



  1. 1. Se les ve en la televisión, sentados en el sofá. Esto llevó a un aumento en el tamaño del texto a lo largo del juego.
  2. 2. Según TRC, es necesario tener una zona de guardado del 5%, en la que no se debe ubicar contenido importante.
  3. 3. El cursor es una decisión complicada en la consola. Por lo tanto, ya no tenemos información sobre herramientas en la que pueda poner una descripción de parámetros y habilidades.


En el primer "paso" por las pantallas del personaje, se intentó heredar la disposición y disposición de los elementos.











Sin embargo, surgieron problemas no resueltos. El principio de qué y cuándo permitir asignar no está claro. Por ejemplo, si permito que las puntuaciones de habilidad se resalten en la pantalla principal, ¿debo permitir que se resalten en la página de progresión?



¿Dónde mostrar la descripción del artículo seleccionado? ¿Cómo desplazarse por esta descripción sin pasar a un nuevo nivel de anidación? Aparecen casos de control no intuitivos. Por ejemplo, si un jugador selecciona el elemento más a la derecha con el joystick izquierdo, la descripción se muestra a la izquierda y se desplaza con el joystick derecho.



Sobre la base de estos problemas, así como de la suposición de que el jugador de la consola todavía no es la audiencia principal del juego de mesa Pathfinder, la conclusión sugiere que la presentación de la información y la estructura de las pantallas deberían simplificarse.



Entonces, después de intentar heredar de la versión para PC, se propuso la siguiente estructura como plantilla básica para las interfaces de pantalla completa:







En el lado izquierdo, decidimos colocar información estática de la cual nunca ocurrirá ninguna acción.



En la parte derecha, colocamos la descripción contextual de la entidad seleccionada, es decir, de hecho, movimos allí la información sobre herramientas que aparecía en la versión para PC cuando se pasaba el cursor por encima. El joystick derecho del controlador se utilizó para desplazarse por la información.



Colocamos todos los elementos de enfoque (botones, selectores, parámetros, características con descripción) en el centro. Moverse entre ellos se realiza mediante DPAD o el joystick izquierdo. En el caso de una gran cantidad de contenido, la barra de desplazamiento siempre intenta posicionarse de forma que el elemento sea visible cuando se selecciona. Por tanto, no era necesario un control de desplazamiento independiente para la parte central.



Para moverse entre las pantallas de la hoja de personaje, hemos definido "parachoques" R1-L1.

El cambio entre caracteres se realiza usando el menú de grupo radial cuando presiona el gatillo derecho R2.



Como resultado, hemos dividido la interfaz en 7 pantallas.















Esta interfaz fue la primera que portamos a la consola y prácticamente no cambió para el lanzamiento. Sin embargo, tuvimos que cambiar la parte inferior, que estaba reservada para las pistas. La falta de una lista completa de pantallas resultó ser muy inconveniente. Mientras jugábamos, constantemente perdíamos el correcto. Y el hecho de que, por ejemplo, los acompañantes tengan una página de sus historias, mientras que el personaje principal no la tiene, solo agregó inconvenientes a la navegación. Entonces, el área de pistas finalmente se convirtió en un menú, a través del cual los parachoques aún realizaban movimiento.















Otra cosa interesante aquí es la navegación por progresión. A diferencia de una cuadrícula normal, en la que solo puede moverse horizontal o verticalmente, puede haber una situación en la que cuando presiona "arriba" es difícil estimar hacia dónde quiero moverme. Si hay dos elementos, uno exactamente encima del elemento actual pero dos líneas más arriba y el otro una línea más alta, pero 15 ° a la derecha, entonces, ¿qué elemento elegir, el que está más cerca o el que se encuentra en la dirección del vector de movimiento del palo? ¿Y si ocurre la misma situación al moverse en diagonal? Para resolver este problema, escribimos una navegación que tiene en cuenta la dirección y la distancia al siguiente elemento. La prioridad de estos parámetros fue determinada por los coeficientes, que fueron seleccionados ya manualmente en función de los sentimientos.



Quedamos satisfechos con el resultado final de trabajar en esta interfaz. Aunque, por supuesto, parecía que no funcionó mantener el enfoque en el aspecto de la trama, como en la versión para PC. Pero es conveniente tanto en términos de navegación como en términos de legibilidad, lo cual es muy importante cuando se reproduce desde dos metros del televisor. Además, aquí siempre se ve un retrato de cuerpo entero, lo que, en mi opinión, contribuye enormemente a la atmósfera.



Conclusión



No me corresponde a mí juzgar si funcionó bien o no. Siempre puedes hacerlo mejor o de manera diferente. Siempre estamos contentos de recibir críticas y sugerencias, siempre tenemos dudas, pero ¿estamos eligiendo la solución adecuada?



El juego no es solo una fábrica, donde un tal Noname hace su repuesto en nombre de la empresa. El juego es una colección de creatividad de desarrolladores individuales, personas, para cada uno de los cuales, este trabajo se convierte en una parte integral de su vida y parte de la vida de otras personas, jugadores.



Gracias a las personas que participaron en el trabajo de la hoja de personaje:

Mikhail Rotfort - UI principal

Vasily Levinov - Artista de UI

Vasily Boldyrev - Programador

Nikita Velikovsky - Programador

Maxim Savenkov - Programador

Oksana Merger - Programador de UI

Alexey Gusev - Ingeniero de control de calidad

Alexander Mishulin - Director creativo

Victor Surkov - Director de arte

Oleg Shpilchevsky - Jefe de Owlcat Games



Autor: Pavel Turchin - Desarrollador de interfaz de usuario



All Articles