El artista técnico en 3D de Banzai Games, Roman Tersky, habló sobre cómo se dibuja el marco y los materiales para los personajes están organizados en el juego móvil Shadow Fight 3, y también reveló algunos trucos para configurar el entorno

Shadow Fight 3 es un juego de lucha / RPG desarrollado basado en el motor Unity3d. El proyecto se lanzó en iOS / Android en noviembre de 2017 y, desde entonces, el número total de instalaciones de juegos ha superado los 80 millones. Para llegar a una audiencia tan amplia, el equipo de desarrollo ha realizado una gran optimización del juego y, como resultado, el proyecto funciona a 60 FPS en muchos dispositivos modernos con rendimiento promedio

Los críticos y los jugadores a menudo notan el componente visual de Shadow Fight 3. En este artículo, le sugerimos que mire "bajo el capó" del juego y descubra cómo logramos lograr esta calidad.

Render de marco

Hay muchos factores que afectan directamente el rendimiento del juego y la cantidad de fotogramas que puede jugar por segundo. Uno de los indicadores más importantes para nosotros fue el número de llamadas de extracción durante la representación de uno de esos cuadros en el juego. Propongo considerar este concepto con más detalle.

Al representar un marco de juego para cada grupo estático de objetos unidos por un material, Unity lanza Llamadas de sorteo y las superpone. Cada llamada de sorteo requiere recursos de la CPU, por lo que un paso importante de optimización es reducir la cantidad de llamadas. Nuestro objetivo era minimizar este indicador a un promedio de 100 llamadas por marco de juego.


Proceso de renderizado de un solo cuadro

La primera etapa de renderizado en Shadow Fight 3 es dibujar sombras dinámicas de personajes y efectos Glow para elementos luminosos en la armadura y las armas de los jugadores.



Ambos procesos tienen sus propias características y deben considerarse con más detalle.

Sombras

Además de la cámara principal, a la que se representa el marco principal, se instala una cámara de proyector ortográfico adicional en el escenario, diseñada para dibujar sombras de los personajes en una superficie separada llamada ShadowReciever. Esta cámara sigue el punto medio entre los oponentes y cada cuadro crea su proyección en el plano dependiendo de su posición actual. El resultado se representa como una textura alfa, que reemplaza la textura con el renderizado del fotograma anterior en el material dinámico del objeto ShadowReciever. Este enfoque evita la necesidad de calcular sombras reales y dibujarlas en todos los modelos de ubicación, lo que afectaría significativamente el rendimiento general.


Área de ShadowReciever

En este marco, este proceso tomó 20 llamadas de extracción.

Resplandor

El proceso de crear un efecto de brillo en la armadura y las armas de los personajes es similar al proceso de crear sombras dinámicas. Se crea un cubo BlurCube alrededor de un modelo con elementos luminosos, en el que los efectos de resplandor se proyectan en cada cuadro en función de la información almacenada en el canal azul de la textura RGB del material de este objeto (es decir, el canal azul actúa como una "máscara" para la proyección del resplandor - más sobre esto a continuación, en la sección de materiales). Luego, se aplica el desenfoque y la información se guarda como una textura alfa, que reemplaza la textura con el resultado de representar el fotograma anterior en el material dinámico de BlurCube.


Blurcube

En nuestro marco, este proceso tomó 15 llamadas de extracción + 2 más para difuminar el efecto.

Dibujo de mallas

En primer lugar, partes de la armadura, armas de los personajes, luego partes de la ubicación del plano cercano, luego el distante, y también el fondo, que es un plano con una textura de 1024x512, se dibujan individualmente. Los siguientes son sistemas de partículas dibujadas, pequeños detalles del plano cercano y lejano, y finalmente, modelos con animación de vértices (más sobre esto a continuación). Al final, para 2 llamadas, se aplican las sombras calculadas y dibujadas previamente y los efectos de brillo (Resplandor).

UI

Además de las cámaras anteriores, otra también participa en la representación del cuadro final, diseñado para dibujar la interfaz de usuario por separado. A diferencia de la cámara-proyector principal y ortográfica, no es exclusiva de cada ubicación, sino que existe durante toda la sesión del juego. Por lo tanto, después de representar la escena, los personajes y todos los efectos, la interfaz de usuario se representa y se coloca en la parte superior del marco principal, y con ella, el efecto de una viñeta de oscurecimiento se superpone en los bordes.


Resultado de renderizado de la cámara principal


Resultado de renderizado de la cámara UI


Resultado final de renderizado del cuadro

En total, el renderizado del cuadro final del juego requirió 92 sorteos.

¿Cómo es el material de la armadura del personaje?

Para crear el material de la armadura del personaje, se utilizan texturas con una resolución de 512x512: difusa (1) , máscaras RGB (2) , MatCap (3) , un mapa difuso adicional para la forma de sombra (4) , así como una pequeña textura de ruido MorphMask (5) utilizado para creando el efecto de la transición del personaje a una forma de sombra.



Y si todo es estándar con la tarjeta Difusa (esta es solo la textura de la armadura misma), nos detendremos en el resto con más detalle:

Máscaras de textura RGB

Dado que la textura RGB consiste convencionalmente en tres canales de color especificados por números del 0 al 1 para cada píxel, es conveniente usarlo para almacenar diversos datos sobre el material en cada punto específico del escaneo UV del objeto.

En nuestro caso, los canales de la textura RGB (máscara) contienen información para los siguientes procesos:

• Rojo (canal rojo) indica qué elementos del material cambiarán de color si los oponentes en la misma armadura participan en la batalla (utilizamos este sistema para que el jugador no confunda su personaje con el oponente; ciertas partes de la armadura especificadas en el canal Rojo , repintado para el oponente en un color alternativo, que fue establecido por el artista por separado);
• El verde (el canal verde) está destinado a indicar a qué elementos de la armadura se aplica la textura MatCap para dar el efecto de una superficie metálica, así como la fuerza del efecto de este efecto (cuanto más claro, más fuerte es el brillo metálico);
• El azul (canal azul) contiene información sobre los detalles que se aplicarán Glow, creando el efecto de una superficie luminosa.

Matcap

  Textura MatCap Canal verde Textura RGB 

Para crear un efecto de reflexión para elementos metálicos de armadura y armas de personajes para cada ubicación, se crea una textura única de MatCap con una resolución de 512x512, que se basa en una captura de pantalla procesada de la ubicación con todas las características de su estructura e iluminación.

Dependiendo de la ubicación en la que se libra la batalla, la textura correspondiente de MatCap se aplica al material de la armadura y las armas de los personajes. El efecto de la superficie metálica se aplica a ciertas secciones del material, según la información en el canal verde de la textura RGB del material. Este enfoque es económico de procesar, pero crea el efecto de una superficie reflectante realista de elementos metálicos, teniendo en cuenta todas las características de la arena actual.

  Antes de aplicar MatCap Después de aplicar MatCap 

Forma de sombra

Cuando el personaje adopta la forma de sombra Difusa, la textura del material se reemplaza por una adicional creada específicamente para la forma de sombra.

Para una transición suave de una textura a otra, se usa una máscara Morph de ruido, con la cual se logra un efecto de sustitución gradual:

Iluminación de la ubicación

Toda la iluminación y las sombras en la ubicación se hornean en texturas de mapa de luz con una resolución de 2048x2048, lo que elimina la necesidad de calcular la iluminación en tiempo real y aumenta significativamente la productividad.



La única fuente de luz direccional está diseñada para iluminar a los personajes de acuerdo con la atmósfera general de la arena en la que tiene lugar la batalla. Sin embargo, con este enfoque, en cualquier punto de la ubicación, la iluminación de los personajes sería la misma, independientemente de si están bajo las copas de los árboles o bajo la luz solar. Esta pregunta podría resolverse calculando sombras dinámicas de objetos ambientales y superponiéndolas en modelos de personajes, pero esto afectaría en gran medida el rendimiento del juego.

Como alternativa a cada ubicación, almacenamos un gradiente de mapa de sombreado único e independiente: de hecho, esta es una textura con una resolución de 1024x1, que es un gradiente basado en una captura de pantalla de ubicación y que transmite el grado de sombreado en cada parte de la misma. Cuando un personaje se mueve por la arena, el color de su armadura después de aplicar la iluminación direccional se multiplica por el color del degradado correspondiente a su posición actual en la ubicación. Por lo tanto, en áreas sombreadas, la iluminación aplicada es más débil que en áreas abiertas.


Mapa de sombreado del mapa


Iluminando personajes en la parte sombreada de la ubicación


Iluminando personajes en el área abierta

Como toque final, la tecnología Rim Lighting se utiliza para resaltar los bordes del modelo de personaje, que es claramente visible, por ejemplo, en un lugar con una aldea en llamas. Esta tecnología le permite resaltar el contorno de los personajes para que se lean bien en el fondo de la arena.

Efectos dinámicos de arena

Un papel importante en la "revitalización" de las ubicaciones de Shadow Fight 3 lo juegan los efectos de efectos especiales y los objetos dinámicos, como banderas, hojas en movimiento en los árboles, hierba que se balancea, etc.

Fx

La mayoría de los efectos FX (fuego, lluvia, rayos solares, etc.) en SF3 se realizan de acuerdo con el principio de aplicar material animado a modelos estáticos de bajo poli. Sin embargo, hay efectos construidos en un sistema de partículas.

Objetos dinámicos

Hay dos tipos de objetos dinámicos en ubicaciones de SF3: físicos: impulsados ​​por medio de simulación de tejido y aplicando un impulso a ellos simulando ráfagas de viento, así como modelos 3D con animación de vértices. Para tales objetos, se crea una pista de animación en bucle que pone en movimiento los vértices del modelo 3D.

  Animación de follaje vértice Simulación de tela en banderas. 

Reflexiones

Las ubicaciones en SF3 se basan en el principio de un escenario teatral. Al igual que la audiencia en el teatro, la cámara del juego está dirigida en una sola dirección y nunca la cambia. Los objetos del entorno también se ejecutan según el principio del escenario teatral: existen exactamente tantos como el jugador puede ver. No hay nada en los lados y detrás de la cámara, y todos los modelos tienen geometría solo en aquellos lugares que pueden caer en el campo de visión de la cámara.

Para resolver los problemas de reflexión con el máximo rendimiento en arenas donde hay superficies reflectantes (piso de mármol, agua, etc.), los elementos que deberían reflejarse se duplicaron y su tamaño a lo largo del eje Z se estableció en un valor negativo. La posición duplicada se establece de modo que desde el lado ambos objetos se vean como reflejos el uno del otro. El material de las superficies reflectantes tiene translucidez, cuya resistencia depende de la naturaleza de la superficie. Si el objeto reflejado está a una distancia suficiente y el detalle se desvanece en el fondo, en lugar de un duplicado, el Plano se instala con una textura basada en una captura de pantalla de la superficie reflejada reflejada a lo largo del eje Z. Este enfoque no solo mejora el rendimiento del juego, sino que también ofrece un resultado muy realista.

  Resultado final sin género 

Conclusión

El tema de la optimización de renderizado para dispositivos móviles ahora es más relevante que nunca. Lo que viste en este artículo son las soluciones que desarrollamos específicamente para el proyecto Shadow Fight 3. Actualmente, Banzai Games ha comenzado a desarrollar dos nuevos juegos en los que intentaremos mejorar aún más los gráficos, aplicando los desarrollos actuales y agregando algo nuevo

El equipo de Banzai Games requiere un desarrollador de gráficos. Lea más sobre la vacante aquí .