L'artiste technique 3D Banzai Games Roman Tersky a expliqué comment le cadre est dessiné et les matériaux pour les personnages sont arrangés dans le jeu mobile Shadow Fight 3, et a également révélé quelques astuces pour configurer l'environnement

Shadow Fight 3 est un jeu de combat / RPG développé sur la base du moteur Unity3d. Le projet est sorti sur iOS / Android en novembre 2017, et depuis lors, le nombre total d'installations de jeux a dépassé les 80 millions. Pour atteindre un public aussi large, l'équipe de développement a réalisé une excellente optimisation du jeu et, par conséquent, le projet fonctionne à 60 FPS sur de nombreux appareils modernes avec performances moyennes.

Les critiques et les joueurs notent souvent la composante visuelle de Shadow Fight 3. Dans cet article, nous vous suggérons de regarder «sous le capot» du jeu et de découvrir comment nous avons réussi à atteindre cette qualité.

Rendu d'image

De nombreux facteurs affectent directement les performances du jeu et le nombre d'images qu'il peut jouer par seconde. L'un des indicateurs les plus importants pour nous était le nombre d'appels de tirage lors du rendu d'une telle image dans le jeu. Je propose d'examiner ce concept plus en détail.

Lors du rendu d'un cadre de jeu pour chaque groupe statique d'objets joints par un matériau, Unity lance les appels de dessin et les superpose. Chaque appel Draw nécessite des ressources CPU, donc une étape d'optimisation importante est de réduire le nombre d'appels. Notre objectif était de minimiser cet indicateur à 100 appels par image de jeu en moyenne.


Processus de rendu d'image unique

La première étape du rendu dans Shadow Fight 3 consiste à dessiner des ombres de personnages dynamiques et des effets de lueur pour des éléments lumineux sur l'armure et les armes des joueurs.



Ces deux processus ont leurs propres caractéristiques et doivent être examinés plus en détail.

Ombres

En plus de la caméra principale, sur laquelle l'image principale est rendue, un projecteur de caméra orthographique supplémentaire est installé sur la scène, conçu pour dessiner les ombres des personnages sur une surface distincte appelée ShadowReciever. Cette caméra suit le point médian entre les adversaires et chaque image crée leur projection sur le plan en fonction de leur position actuelle. Le résultat est rendu sous forme de texture alpha, qui remplace la texture par le rendu de l'image précédente dans le matériau dynamique de l'objet ShadowReciever. Cette approche évite d'avoir à calculer des ombres réelles et à les dessiner sur tous les modèles de localisation, ce qui affecterait considérablement les performances globales.


Zone ShadowReciever

Dans ce cadre, ce processus a pris 20 appels de tirage.

Lueur

Le processus de création d'un effet de lueur sur l'armure et les armes des personnages est similaire au processus de création d'ombres dynamiques. Un cube BlurCube est créé autour d'un modèle avec des éléments lumineux, sur lequel des effets de lueur sont projetés sur chaque image en fonction des informations stockées dans le canal bleu de la texture RVB du matériau de cet objet (c'est-à-dire que le canal bleu agit comme un «masque» pour la projection de la lueur - en savoir plus sur ci-dessous, dans la section sur les matériaux). Ensuite, le flou est appliqué et les informations sont enregistrées en tant que texture alpha, qui remplace la texture avec le résultat du rendu de l'image précédente dans le matériau dynamique de BlurCube.


Blurcube

Dans notre cadre, ce processus a pris 15 appels de tirage + 2 autres pour brouiller l'effet.

Dessiner des maillages

Tout d'abord, des parties de l'armure, des armes des personnages, puis des parties de l'emplacement du plan proche, puis du plan éloigné, ainsi que l'arrière-plan, qui est un avion avec une texture de 1024x512, sont dessinées individuellement. Voici les systèmes de particules dessinés, les petits détails du plan proche et lointain, et enfin, les modèles avec animation de vertex (plus de détails ci-dessous). À la fin, pour 2 appels, les ombres et les effets de lueur calculés et précédemment dessinés (lueur) sont appliqués.

UI

En plus des caméras ci-dessus, une autre est également impliquée dans le rendu de l'image finale, conçue pour dessiner l'interface utilisateur séparément. Contrairement à la caméra-projecteur principale et orthographique, elle n'est pas unique à chaque emplacement, mais existe tout au long de la session de jeu. Ainsi, après avoir rendu la scène, les personnages et tous les effets, l'interface utilisateur est rendue et placée au-dessus du cadre principal, et avec elle l'effet de vignette de gradation est appliqué sur les bords.


Résultat de rendu de la caméra principale


Résultat de rendu de la caméra de l'interface utilisateur


Résultat de rendu d'image final

Au total, le rendu de la dernière image du jeu a nécessité 92 appels de tirage.

Comment est le matériau de l'armure du personnage

Pour créer le matériau de l'armure du personnage, des textures d'une résolution de 512x512 sont utilisées: Diffuse (1) , masques RVB (2) , MatCap (3) , une carte Diffuse supplémentaire pour la forme d'ombre (4) , ainsi qu'une petite texture de bruit MorphMask (5) utilisée pour créant l'effet de la transition du personnage dans une forme d'ombre.



Et si tout est standard avec la carte Diffuse (ce n'est que la texture de l'armure elle-même), nous nous attarderons sur le reste plus en détail:

Masques de texture RVB

Étant donné que la texture RVB se compose classiquement de trois canaux de couleur spécifiés par des nombres de 0 à 1 pour chaque pixel, il est pratique de l'utiliser pour stocker diverses données sur le matériau à chaque point spécifique du scan UV de l'objet.

Dans notre cas, les canaux de la texture RGB (masque) contiennent des informations pour les processus suivants:

• Le rouge (canal rouge) indique quels éléments du matériau changeront de couleur si les adversaires dans la même armure participent à la bataille (nous utilisons ce système pour que le joueur ne confond pas son personnage avec l'adversaire; certaines parties de l'armure spécifiées dans le canal rouge , repeint pour l'adversaire dans une couleur alternative, qui a été définie par l'artiste séparément);
• Le vert (le canal vert) est destiné à indiquer à quels éléments de l'armure la texture MatCap est appliquée pour donner l'effet d'une surface métallique, ainsi que la force de l'effet de cet effet (plus il est léger, plus le lustre métallique est fort);
• Bleu (canal bleu) contient des informations sur les détails qui seront appliqués, créant ainsi l'effet d'une surface lumineuse.

Matcap

  Texture MatCap Texture RVB canal vert 

Afin de créer un effet de réflexion pour les éléments métalliques d'armure et d'armes de personnages pour chaque emplacement, une texture MatCap unique avec une résolution de 512x512 est créée, qui est basée sur une capture d'écran traitée de l'emplacement avec toutes les caractéristiques de sa structure et de son éclairage.

Selon l'endroit où la bataille se déroule, la texture MatCap correspondante est appliquée au matériau de l'armure et des armes des personnages. L'effet de la surface métallique est appliqué à certaines sections du matériau, en fonction des informations contenues dans le canal vert de la texture RVB du matériau. Cette approche est peu coûteuse à traiter, mais elle crée l'effet d'une surface réfléchissante réaliste d'éléments métalliques, en tenant compte de toutes les caractéristiques de l'arène actuelle.

  Avant d'appliquer MatCap Après avoir appliqué MatCap 

Forme d'ombre

Lorsque le personnage prend la forme Ombre diffuse, la texture du matériau est remplacée par une texture supplémentaire créée spécifiquement pour la forme ombre.

Pour une transition en douceur d'une texture à une autre, un masque Morph de bruit est utilisé, avec lequel un effet de substitution progressive est obtenu:

Éclairage de localisation

Tous les éclairages et les ombres sur l'emplacement sont cuits dans des textures lightmap avec une résolution de 2048x2048, ce qui élimine la nécessité de calculer l'éclairage en temps réel et augmente considérablement la productivité.



La seule source de lumière directionnelle est conçue pour illuminer les personnages conformément à l'atmosphère générale de l'arène dans laquelle la bataille se déroule. Cependant, avec cette approche, à n'importe quel point de l'emplacement, l'éclairage des personnages serait le même, qu'ils soient sous la couronne d'arbres ou sous le soleil. Cette question pourrait être résolue en calculant des ombres dynamiques à partir d'objets environnementaux et en les superposant sur des modèles de personnages, mais cela aurait un impact considérable sur les performances du jeu.

Comme alternative à chaque emplacement, nous stockons un dégradé de carte d'ombrage distinct et unique: en fait, c'est une texture avec une résolution de 1024x1, qui est un dégradé basé sur une capture d'écran d'emplacement et transmettant le degré d'ombrage dans chaque partie de celui-ci. Lorsqu'un personnage se déplace dans l'arène, la couleur de son armure après avoir appliqué un éclairage directionnel est multipliée par la couleur du dégradé correspondant à sa position actuelle à l'emplacement. Ainsi, dans les zones ombragées, l'éclairage appliqué est plus faible que dans les zones ouvertes.


Carte d'observation de la carte


Éclairage des personnages dans la partie ombragée de l'emplacement


Éclairage des personnages dans la zone ouverte

Comme touche finale, la technologie Rim Lighting est utilisée pour mettre en évidence les bords du modèle de personnage, qui est clairement visible, par exemple, sur un emplacement avec un village en feu. Cette technologie vous permet de mettre en valeur le contour des personnages afin qu'ils soient bien lus en arrière-plan de l'arène.

Effets d'arène dynamiques

Un effet important dans la «revitalisation» des emplacements de Shadow Fight 3 est joué par les effets FX et les objets dynamiques, tels que les drapeaux, les feuilles en mouvement sur les arbres, l'herbe qui se balance, etc.

Fx

La plupart des effets FX (feu, pluie, rayons du soleil, etc.) dans SF3 sont réalisés selon le principe de l'application de matériaux animés à des modèles statiques low poly. Cependant, il existe des effets construits sur un système de particules.

Objets dynamiques

Il existe deux types d'objets dynamiques sur les emplacements SF3: physiques - pilotés au moyen d'une simulation tissulaire et en leur appliquant une impulsion simulant des rafales de vent, ainsi que des modèles 3D avec animation de vertex. Pour ces objets, une piste d'animation en boucle est créée qui met en mouvement les sommets du modèle 3D.

  Animation du feuillage des sommets. Simulation du tissu sur les drapeaux. 

Réflexions

Les lieux de SF3 sont construits sur le principe d'une scène théâtrale. Comme le public du théâtre, la caméra du jeu est dirigée dans une seule direction et ne la change jamais. Les objets d'environnement sont également exécutés sur le principe du décor théâtral: ils existent exactement autant que le joueur peut voir. Il n'y a rien sur les côtés et derrière la caméra, et tous les modèles ont une géométrie uniquement aux endroits qui peuvent tomber dans le champ de vision de la caméra.

Pour résoudre les problèmes de réflexion avec des performances maximales dans les arènes où il y a des surfaces réfléchissantes (sol en marbre, eau, etc.), ces éléments qui devraient être réfléchis ont été dupliqués et leur taille le long de l'axe Z a été définie sur une valeur négative. La position en double est définie de sorte que sur le côté, les deux objets ressemblent à un reflet l'un de l'autre. Le matériau des surfaces réfléchissantes a une translucidité dont la résistance dépend de la nature de la surface. Si l'objet réfléchi est à une distance suffisante et que les détails s'estompent à l'arrière-plan, au lieu d'un doublon, Plane est installé avec une texture basée sur une capture d'écran de la surface réfléchie en miroir le long de l'axe Z. Cette approche améliore non seulement les performances du jeu, mais donne également un résultat très réaliste.

  Résultat final Sans sexe 

Conclusion

La question de l'optimisation du rendu pour les appareils mobiles est désormais plus pertinente que jamais. Ce que vous avez vu dans cet article, ce sont les solutions que nous avons élaborées spécifiquement pour le projet Shadow Fight 3. Actuellement, Banzai Games a commencé à développer deux nouveaux jeux dans lesquels nous allons essayer d'améliorer encore les graphismes, en appliquant les développements actuels et en ajoutant quelque chose de nouveau.

L'équipe de Banzai Games nécessite Graphics Developer. En savoir plus sur l'offre d'emploi ici .