Flor Espiritual es el primer evento de Riot que abarca múltiples juegos y que permite a los jugadores experimentar el mundo de Flor Espiritual tanto en League of Legends como en Legends of Runeterra. Pero antes de sumergirnos en su desarrollo, echemos un vistazo a lo que es el evento de Flor Espiritual.
Flor Espiritual es un evento que sucede dentro de la historia (lo que quiere decir que forma parte de la narrativa oficial y propiedad intelectual de League of Legends) que retrata el florecimiento de una flor espiritual (ficticia) en Jonia. Los jonios usan las propiedades intrínsecas del tiempo de la flor para comunicarse con sus seres queridos difuntos y celebrar su paso pacífico al más allá o lamentar su incapacidad para descansar.
Pero LoL y LoR son dos juegos muy diferentes, uno es un MOBA y el otro es un JCC. Tienen una estética y jugadores diferentes, así que, ¿cómo es que nos aseguramos de que los jugadores tengan una experiencia cohesiva en ambos juegos?
El diseño visual se une a esta conversación
El diseño visual de Riot se divide en dos áreas clave: están los diseñadores que trabajan en los productos, crean recursos individuales como los íconos, foros e interfaces de usuario de nuestros juegos, y los diseñadores que trabajan en los recursos de marca y publicidad (texto únicamente en inglés), quienes se aseguran de que los jugadores entiendan exactamente qué es lo que obtendrán antes de entrar al juego.
Aquí descubriremos cómo es que los diseñadores visuales de ambas áreas trabajan juntos para asegurarse de que el lenguaje de diseño y el estilo sean consistentes entre varios juegos.
Así que comencemos desde el inicio: descubramos la marca visual de Flor Espiritual.
La creación de la identidad visual de Flor Espiritual
Por Craig "Riot MrParkinson" Parkinson, diseñador visual de League of Legends
Comencé por preguntarle al equipo de desarrollo de temáticas (conformado por los artistas, escritores y productores que se dedican a crear el multiverso de LoL) qué era exactamente Flor Espiritual. Mientras me contaban sobre la temática, hubo algunas palabras clave que repetían, como peculiar, espiritual, elegante, pacífico, abstracto y seductor. Así que anoté esas palabras en un documento y empecé por ahí.
Flor Espiritual se centra en el más allá y en los espíritus que lo habitan. Estos espíritus están intrínsecamente interconectados en el reino espiritual y viven en relativa paz. Usé eso como guía mientras trabajaba en las referencias visuales y en crear paneles de humor que evocaran esos sentimientos.
Después, desmenucé las referencias en áreas claves que necesitaba para explorar y revisé el lenguaje de las formas, colores y texturas. Esto me ayudó a decidir la dirección que quería que tomara la marca de Flor Espiritual. Pero tenía que preguntarme cómo uniríamos todas las piezas (inspiraciones clave del anime, mitología del este asiático y LoL) y lograr una cohesión entre ellas.
El idioma de las formas
Quería capturar la elegancia del evento con su idioma de las formas único. Necesitaba que fuera algo abstracto y suave, pero, al mismo tiempo, necesitaba que se sintiera fresco y desconocido. Usé esto como guía y comencé a explorar los tipos de formas que estaba buscando.
La geometría me llegó casi al instante. Podía usar estas formas elegantes para construir ciertos simbolismos que hicieran referencia a varias cosas dentro del festival Flor Espiritual. Funcionaba bien con la temática general porque la intención de la geometría depende en realidad de lo que el espectador ve en ella. Puede significar muchas cosas y nada a la vez.
Usé imágenes de referencia del arte del este asiático, como formas florales, espirales y nubes. Mientras ensayaba con esto y pensaba en cómo encajaría en la IU, sentí que faltaba algo: un vínculo más profundo con el trabajo del equipo de desarrollo temático. ¿Qué tal si usaba el arte conceptual de los aspectos dentro del diseño mismo?
Quería basarlo en lo que los jugadores podían ver y con lo que podían interactuar en el juego, así que los añadí como una especie de componentes de encuadre. La geometría en la que trabajé se convirtió en los patrones folklóricos que puedes ver en la camisa de Yasuo. Al usar eso como base, pensé en cómo estos distintivos patrones folklóricos y formas podrían ayudar a los elementos de marca. Eso fue lo que me llevó a la siguiente parte: el color y la textura.
Color y textura
El equipo de desarrollo de temática creó una hermosa paleta de color para el evento que estaba inspirada en la acuarela. Todo estaba diseñado para que se sintiera muy peculiar y como si fuera un sueño. Mientras veía pinturas de acuarelas como referencia, pude notar las distintas texturas que tenían, incluso la forma en la que la tinta caía sobre un trozo de pergamino.
Quería mantener el diseño visual atado a estos aspectos para que todo se uniera en armonía, pero aún necesitaba unas texturas únicas para asegurarme de que no se viera como una plasta de color. Usé elementos como corteza de árbol, pinceladas e incluso las venas de las hojas como inspiración, y a partir de ahí hice una pequeña porción vertical del diseño visual del evento.
Después de todo este descubrimiento inicial, y de la respuesta positiva del equipo, me volví loco. Creo que diseñé cerca de 90 logotipos, más o menos. Fue una locura. Cada vez que presentaba uno y recibía más comentarios, lo delimitaba hasta llegar a lo que tenemos ahora.
Una vez que se decidió todo, creé una guía y se la di a los demás equipos que trabajaron en el evento. Eso fue lo que el equipo de Legends of Runeterra usó para comenzar.
Adaptando la Flor a LoR
Por Tom "Riot Tomukus" Sayer, diseñador de efectos visuales sénior de Legends of Runeterra
Yo trabajo en el diseño e implementación de activos dentro de Legends of Runeterra. Eso quiere decir que trabajo con los diseñadores de experiencia de usuario, ingenieros, artistas conceptuales, escritores y básicamente todo el equipo de LoR para asegurarme de que los jugadores tengan algo que ver y con qué interactuar en nuestro juego.
Mi trabajo inicia cuando recibimos un modelo en malla de los diseñadores de experiencia de usuario. Eso es, básicamente, un conjunto de cajas grises, negras y blancas que nos dan una idea de dónde va cada pieza que necesitamos crear. Mi trabajo es reorganizar estas cosas y decidir la jerarquía de cada elemento individual, es decir, decidir cuáles estarán en el fondo y cuáles estarán en primer plano. Esto lo hago con base en la información que es más importante para los jugadores.
Cuando diseñamos el espacio del cliente para Flor Espiritual, decidimos poner un seguidor de progreso para que los jugadores puedan ver su avance mientras ganan recompensas. Funciona de manera similar a las recompensas del progreso, lo que permite que los jugadores seleccionen una región y progresen en ella. El diseño visual necesitaba tomar toda esta información para asegurarse de que el seguidor de Flor Espiritual fuera consistente de manera visual con el estilo que diseñaron en LoL y para que se viera diferente de las recompensas del progreso.
Para lograr eso, revisé las guías de activos y diseño visual que preparó Riot MrParkinson para nosotros y las traduje a un formato que funcionara para LoR. A pesar de que LoL y LoR se encuentran dentro de la misma propiedad intelectual (y que son de la misma empresa), tienen un arte y diseño visual únicos. El cliente de LoL cuenta con una IU moderna y plana. Tiene cierta dimensión y florituras en ciertas partes, pero es diferente de la de LoR, que cuenta con un enfoque más esqueumorfista.
El diseño esqueumorfista se siente un poco más real. Si piensas en los primeros teléfonos inteligentes, podrás recordar que los diseños de las aplicaciones eran muy realistas. Las aplicaciones de notas contaban con una textura de papel y la fuente que aparecía al teclear se veía muy similar a cuando tomamos notas con un bolígrafo o un lápiz. Esto sucedía porque la gente no estaba muy acostumbrada a tomar notas en una pantalla táctil. Usamos ese mismo enfoque con LoR para sumergir a los jugadores en el mundo de Runaterra. Cualquier cosa con la que interactúes debe sentirse como un objeto físico. Cuando llegó el momento de aplicar este enfoque al diseño visual de Flor Espiritual, tuvimos que ajustarlo un poco para que funcionara con LoR. Puedes notar estos detalles en la IU, pero el ejemplo más notorio está en la nube.
Cuando Riot MrParkinson nos dio las guías visuales, me di cuenta de que incluyeron nubes como elementos de inspiración. Estaban estilizadas como el arte del este asiático, lo que funciona bien para LoR porque también está bastante estilizado. Tienen muchas espirales y suelen dar un aspecto de suavidad. Pero, para lograr que funcionara para nuestro cliente, tuve que añadir una textura y hacer que la nube se viera más metálica, porque ese es el estilo general que usamos.
Cuando comencé con la nube, consulté referencias; es decir, abrí Adobe Illustrator, pegué las referencias visuales de Riot MrParkinson en el tablero de arte y comencé a dibujar. Sabía que quería que fuera metálico y voluminoso, lo que significaba que, en lugar de trazar la referencia, debía dibujarla.
Yo mismo comencé a dibujar en Illustrator porque así pude conseguir un vector limpio. Después, pude pintar las líneas para hacerlas más gruesas o delgadas. Posteriormente, importé el vector a Photoshop como una forma.
Una vez que el vector estaba en Photoshop, usé estilos de capas, como el biselado y el relieve, añadí superposiciones de degradados y pinceladas, y creé sombras y resplandores paralelos e interiores. Cuando encontré lo que buscaba, puse estos estilos de capas en el vector de la nube.
Terminé el estilo de capa con una sombra paralela porque quería que la nube estuviera en primer plano y para que se sintiera como si estuviera flotando en la parte superior del fondo.
Y luego lo pinté.
Agregué un par de estilos de luces y algunas áreas de sombras. Para asegurarme de que no se viera como una pieza de metal plana en la parte superior del cliente, añadí algunas líneas oscuras para que pareciera que se está inclinando hacia el jugador.
Una vez que me sentí satisfecho, compartí el diseño con el equipo. Hice esto mismo con todos los activos del evento. Fueron cerca de 40. Es importante lograr que cada activo se sienta como si estuviera hecho a mano, ¡porque lo está!
Espero que cualquier jugador que inicie sesión en LoL y que después inicie sesión en LoR (o al revés) vea lo que creamos y lo reconozca al instante como parte del mismo evento. Eso significaría que hicimos bien nuestro trabajo y que les dimos a los jugadores de ambos juegos una buena experiencia cohesiva.
