L'histoire du développement de The Light Remake. Partie 1





Bonjour lecteur! Je m'appelle Sergey, je suis un développeur de jeux vidéo indépendant. J'ai déjà plusieurs projets indépendants dans mon portefeuille, dont certains ont été auto-publiés sur Steam. Le jeu Light or The Light, sorti en 2012, a été mon premier stylo et pionnier dans le monde du développement de jeux. Le projet a été distribué gratuitement, mais la réaction du public et les retours des joueurs m'ont motivé sérieusement à poursuivre le travail. «La Lumière» est devenue pour moi quelque chose comme une parabole philosophique sur l'humanité et son destin. L'intrigue est abstraite et ne poursuit aucun but précis, c'est juste une occasion de réfléchir sur un vaste sujet.



Étant donné que le jeu original n'est jamais arrivé à la sortie sur Steam, j'ai décidé de corriger cette omission et en juin 2019, j'ai commencé une refonte à grande échelle du projet afin qu'il puisse correspondre à son époque et être considéré comme un jeu à part entière à la fois visuellement et en termes de gameplay.







De quoi parle-t-on?



Cet article se concentrera spécifiquement sur le projet "Light" et sur le travail effectué pour porter le jeu vers une version plus récente du moteur Unity. Cela implique beaucoup de nuances techniques. L'article sera présenté en deux parties.



Partie 1



La version originale du jeu a été construite sur Unity 4.2 en 2012. Ensuite, dans mon domaine d'information, il n'était toujours pas question de matériaux PBR, de tests de réflexion et d'autres méthodes actuellement pertinentes. Les shaders de base dans Unity étaient très simples et pas très réalistes. Bien sûr, de nombreux éléments supplémentaires pourraient être ajoutés, tels que des réflexions de fresnel, mais la programmation des shaders était un mystère pour moi. Les principaux shaders utilisés étaient Normal Bumped Specular et AlphaTest diffus pour les objets avec transparence (feuilles d'arbres, grilles métalliques bouclées).



Il n'y avait pas d'ombres pendant la durée de vie, presque tout l'éclairage était cuit dans la texture et la résolution de ces ombres était très faible par endroits. La cuisson de la lumière par-dessus tout le reste a réduit l'effet de bosse du shader spéculaire Bumped à près de zéro, donnant aux objets l'apparence d'un carton plat en y regardant de plus près.



L'image a été considérablement transformée par des post-effets sur l'appareil photo, en particulier Bloom et Correction des couleurs. Ils ont ajouté de la couleur et de la variété, bien qu'ils soient trop intrusifs par endroits.







Au moment de la création de ce projet, j'avais encore des idées vagues sur l'optimisation, le batching (combiner en un seul maillage), l'occlusion - culling (couper les objets invisibles), etc. Mais en raison du fait que techniquement la scène n'était pas chargée de quelque chose de compliqué, n'avait pas d'éclairage pendant la durée de fonctionnement, d'herbe avec un canal alpha, etc. - le jeu est sorti assez optimisé et a bien fonctionné sur du matériel faible, donnant une image agréable pour 2012.



Après 7 ans, vous regardez n'importe laquelle de vos créations avec des yeux différents. Les technologies ont beaucoup évolué, les outils ont changé, les dernières versions du moteur Unity sont très différentes de leurs prédécesseurs. En lien avec tout ce qui précède, le transfert du projet de la version 4 à la version 2017 (j'ai décidé de m'arrêter pour plusieurs raisons) est un travail assez long et laborieux. De plus, étant donné que le projet original ne pouvait pas être qualifié de jeu à part entière (la plupart des actions du jeu ont été effectuées à l'aide d'un script avec une fonction de déclenchement), il était nécessaire d'écrire toute la logique à partir de zéro, interaction avec les objets, inventaire, système de menus, système sauvegardes, réalisations, paramètres, etc. En général, un travail de très grande envergure m'attendait!



Début. Shaders et lumière



La première chose qui est démoralisante lors de l'ouverture d'un projet dans un nouveau moteur est que tout le visuel est cassé. De nombreux shaders et post-effets importés de sources tierces cessent de fonctionner. Les shaders qui continuent de fonctionner sont légèrement différents. L'éclairage de la scène change, les lightmaps s'envolent, tout doit être recalculé.







Nouveau Standart



Il a été décidé de commencer par remplacer les anciens shaders par un nouveau PBR Standart. Dans l' article précédentsur le développement du 35MM, j'ai déjà évoqué un nouveau type de shaders PBR (Physically Based Rendering), qui implique un rendu physique correct. Le nouveau matériau Standard n'a plus les habituels o.Gloss et o.Spéculaire des versions précédentes, nous avons ici une carte de métallicité (o.Metallic) et de douceur. En outre, il existe plus d'emplacements pour les textures de différentes catégories. Par exemple, nous avons la possibilité d'ajouter une carte d'occlusion pour un ombrage doux. Cet effet est très utile car il vous permet de souligner le volume et l'ombrage dans les zones du modèle où il y a moins de lumière. Sans cette carte et cette lightmap - la texture, les objets semblent plats et irréalistes.







Il y a le même Albédo de Détail et le même Détail Normal - ces cartes ajoutent des détails à nos textures existantes, par exemple, vous pouvez placer une carte normale supplémentaire avec de petites fissures et la teinter en ajustant le degré d'influence. En conséquence, la texture de relief basse résolution originale apparaîtra plus détaillée. Pour certains matériaux, j'ai utilisé cette technique, tandis que d'autres sont restés inchangés.







Végétation



Après avoir remplacé les matériaux de base, je suis passé à la végétation. La version originale du jeu utilisait un shader Alpha Test standard sans spéculateur et une carte normale. Bien sûr, cet état de fait en 2019 ne me convenait pas. Vous pouvez acheter ou trouver une solution toute faite sur Internet, il existe des packs entiers avec des shaders et des modèles prêts à l'emploi avec de nombreuses fonctionnalités, imitation du balancement au vent, etc. Mais traditionnellement, j'essaie de résoudre moi-même ces problèmes et d'expérimenter. C'est quelque chose d'un intérêt sportif. Mon nouveau shader Vegetable est basé sur la référence Toon Ramp du tutoriel Unity.



Le modèle d'éclairage LightingRamp présenté a permis de dessiner la silhouette des ombres à la fois du côté éclairé du polygone et du côté opposé. Cela imitait la capacité du feuillage à transmettre la lumière - la translucidité.







Un shader similaire peut également être utilisé pour rendre des tissus transparents tels que des rideaux.







Malheureusement, dans ce mode, le rendu automatique du verso du polygone à l'aide de la méthode Cull Off ne donnait pas un résultat très correct, donc la Backface a dû être ajoutée manuellement dans l'éditeur. Ensuite, la texture normale et spéculaire a été ajoutée au shader. Je ne pouvais pas utiliser le modèle d'éclairage du shader PBR et connecter les sondes de réflexion, mais à l'aide de masques et de la carte d'émission, j'ai ajouté l'imitation d'occlusion ambiante. Et enfin, il était extrêmement nécessaire de relancer le tout et de donner du mouvement à la végétation. Avec la fonction Vertex et le même masque, les zones souhaitées des plaques de feuillage prennent vie. Le décalage de sommet est basé sur l'exemple d'extrusion normale avec modificateur de sommet du manuel Unity.







Vous pouvez régler la vitesse et l'amplitude. Au fait, dans ces expériences, la nouvelle fonction de gestion des variables globales des shaders s'est avérée utile ... Vous pouvez facilement assigner n'importe quelle variable ou texture à tous les shaders nécessaires à partir du script.







Éclat



L'approche du dispositif d'éclairage même de la scène a été considérablement modifiée. Dans l'original, toute la lumière était transformée en lightmaps et le rendu fonctionnait en mode Avance. Dans le remake, un aspect important était l'utilisation de la lumière en temps réel pour pouvoir changer l'heure de la journée. Le mode de rendu a été changé en Différé. La lumière principale (soleil) a été utilisée en mode mixte, l'éclairage directionnel et les ombres ont été dessinés en temps réel, et l'éclairage global a été cuit dans les textures. Cela a permis de changer le niveau et la direction de la lumière, tout en conservant l'effet de l'éclairage global doux et des reflets, qui donnent toujours à l'image un réalisme supplémentaire. Les textures Lightmap n'étaient pas cuites pour tous les objets, principalement pour les grands et plus ou moins simples. Les balayages petits et difficiles à créer sont restés dynamiques et ont été mis en évidence soit avec des sondes lumineuses,des tests de réflexion, ou simplement la lumière ambiante de base (qui est spécifiée dans les principaux paramètres d'éclairage). La cuisson a été faite avec un lightmapper progressif.















Jour et nuit



Pour changer l'heure du jour, un shader skybox a été créé avec deux textures: jour et nuit. Les deux options ont été complétées par une fonction de décalage pour simuler le mouvement des nuages. Les textures du ciel nocturne et la lueur anormale pour la scène du vol de missiles de combat ont également été ajoutées. Toute cette honte était contrôlée par un script spécial qui faisait pivoter la skybox et le soleil, à certaines positions du soleil, la couleur de la skybox changeait, les textures étaient mélangées en utilisant la méthode Lerp et le ciel nocturne et les étoiles étaient révélés en douceur. L'effet de la lueur du ciel après le lancement des missiles a également été ajouté sur un calque séparé.







Pour l'optimisation au niveau de lumière minimum (environ 0,1-0,2), les ombres ont été désactivées en douceur. Pour changer l'heure, il était nécessaire de prendre en compte quelques points plus importants. La scène a été suivie par des particules - duvet de peuplier. Leur matériau ne réagissait pas à la lumière (à ce moment-là je n'avais pas encore trouvé de shader approprié), donc la couleur du matériau duvet devait être changée avec un script en fonction de l'heure de la journée.



De plus, lors du changement d'heure, le script a ajusté la couleur souhaitée pour le post-effet Global Fog, car le jour, le brouillard devrait ressembler à une brume gris-bleu clair et la nuit, il devrait avoir un ton plus foncé, presque noir.







Modèles et nouveau contenu



L'essentiel de l'emplacement et les maquettes de base: la maquette du bâtiment principal, les arbres, les bancs, les lampadaires sont restés d'origine. De nombreux autres accessoires ont été entièrement ou partiellement refaits. Le modèle de la lampe à pétrole a été repensé, un nouveau générateur diesel avec des éléments animables séparés a été créé, un nouveau modèle de projecteur de cinéma, etc.















Les bâtiments voisins qui auparavant ne pouvaient pas être pénétrés ont été repensés et mis à la disposition du joueur. L'aménagement intérieur du bâtiment principal a également été modifié. En plus de retravailler l'ancien contenu, de nouveaux ont également été ajoutés, par exemple un modèle de bus PAZ, une machine de jeu, un distributeur de soda, un puzzle - un panneau électrique, une porte hermétique au sous-sol, des articles d'inventaire, etc. Une partie du contenu a été créée indépendamment, certains modèles ont été externalisés.







Pour presque tous les objets pour lesquels des lightmaps ont été cuits, un scan UV2 a été créé manuellement, avec l'emplacement le plus optimal des fragments pour l'économie. Par exemple, pour les bâtiments, toutes les zones difficiles à atteindre (par exemple, les plafonds et les murs des étages supérieurs), que le joueur ne verra pratiquement pas, occupent un espace minimal sur le scan.



Effets et shaders personnalisés.



Eau A







chaque nouveau projet, je souhaite prendre en compte les nuances sur lesquelles nous fermions les yeux auparavant. L'image globale est créée à partir de détails séparés et même des éléments peu importants peuvent affecter la perception. De plus, c'est une sorte de défi - à chaque fois améliorer quelque chose avec lequel j'ai déjà travaillé. Il est particulièrement satisfaisant de trouver des solutions par vous-même, plutôt que d'utiliser des actifs prêts à l'emploi. Dans tous les projets précédents, j'ai travaillé avec de l'eau. En règle générale, il s'agissait d'un vertex shader assez simple qui ne réagissait pas au joueur et à l'éclairage de la scène. Il était basé sur Mirror Reflection du Unity Wiki, qui était un exemple d'implémentation de miroir.







La surface était dynamique du fait du déplacement des sommets (imitation d'ondes), mais toujours trop monotone et quelque peu ennuyeuse. Par essais et erreurs pour le projet Light, j'ai réussi à créer une version Surface d'un shader similaire, qui, comme un échantillon, peut: recevoir une texture de réflexion spéculaire d'un script Mirror, déformer des sommets pour simuler des ondes, écrire un écran dans une texture Grabpass pour créer des réfractions sous l'eau, avoir des bords Alpha doux lors de l'intersection avec la géométrie (fondu en profondeur). De plus, pour l'effet de réaction sur le joueur, les informations sur les coordonnées de la position du joueur sont transmises au shader. Un point dynamique est dessiné au point de coordonnées, ce qui simule les éclaboussures lorsque le personnage est directement dans la colonne d'eau. La chose la plus importante permise par le shader de surface était de recevoir un éclairage de n'importe quelle source lumineuse. Ainsi, l'eau semble plus tangible,substance volumétrique et vous permet de jouer avec elle en utilisant des effets de lumière.







Caustiques



Un autre détail important a été la création de l'effet caustique - des reflets lumineux tombant sur la surface. Dans l'obscurité des tunnels du sous-sol inondés d'eau, cette technique était essentielle. L'effet a été créé à l'aide d'un objet Projector et d'un matériau brillant avec une texture animée. Le shader mélange 2 textures caustiques, qui sont déplacées dans des directions différentes, résultant en un effet dynamique. Dans la plupart de mes shaders, pour économiser de l'argent, j'utilise généralement des masques de texture contenant 4 canaux (RGBA) - chacun dans un but précis. Le canal R peut avoir une texture de base, le canal G a des points lumineux plus doux et le canal B a une texture de bruit pour déformer le motif caustique.







La surface de l'eau a un collisionneur avec une étiquette spéciale. Dès que le personnage entre dans l'eau, le script le détecte à l'aide de la méthode raycast et allume en douceur la caustique. Dans ce cas, plusieurs conditions sont également précisées, comme la présence d'un briquet, d'une lampe de poche ou d'une lampe à pétrole à proximité dans les mains.







Particules



Un effet intéressant a été mis en œuvre pour les petites particules dans l'air qui sont visibles à la lumière. L'idée elle-même a été inspirée par le projet Homesick, dans lequel j'ai vu une fois une chose similaire. À une certaine distance, les particules ont une texture régulière, quelque chose comme la texture du duvet de peuplier. Mais à l'approche de la caméra, la texture du shader passe en douceur à la deuxième version, rappelant l'effet de défocalisation. En dynamique, ça a l'air plutôt sympa et les particules semblent plus tangibles.







Comme indiqué ci-dessus, presque toutes les surfaces de base de la scène utilisent une version modifiée du shader PBR Standart. Certains ont ajouté des masques avec différentes options de spot pour plus de détails sur les textures Albedo. Ajout d'un masque anti-taches pour simuler les flaques de pluie sur des surfaces comme l'asphalte ou les pavés. L'ombrage de carreaux de sol dans le bâtiment principal a une carte supplémentaire pour les réflexions, qui sont rendues par le script Miroir de la même manière qu'une surface d'eau. Pour l'optimisation, seuls les objets de base et de grande taille sont inclus dans le rendu des réflexions, et à une certaine distance, le rendu des réflexions est désactivé.



Brouillard / fumée



Un détail important que je voulais prendre en compte lors de la création du remake est le brouillard dynamique et l'effet de l'éclairage sur celui-ci, en particulier la lumière d'une lanterne. Dans les travaux antérieurs, le shader principal pour la fumée et le brouillard était le mélange de particules standard et ses modifications. C'est un shader de vertex qui est bon en termes de performances, mais qui ne réagit pas du tout à la lumière. L'affichage du brouillard avec un tel matériau sera toujours le même à l'ombre et à la lumière, il ne peut pas être éclairé avec une lanterne et il n'a pas toujours l'air attrayant et naturel. Dans les catacombes souterraines que j'avais conçues, la brume était censée être mise en évidence par une lanterne de l'obscurité, soulignée par un éclairage dynamique. Pour résoudre ce problème, un shader d'un actif gratuit a été utilisé . Le shader ne peut pas se vanter de hautes performances, mais visuellement, il a parfaitement fait face à sa tâche.







Décalques



Un autre point important était de trouver un shader approprié pour les décalcomanies. Le jeu prévoyait beaucoup de toutes sortes de graffitis, qui étaient le plus souvent installés à l'aide de l'ancien plugin du système de décalcomanie (depuis l'ancienne version de Unity 4.6). Pour les graffitis, les inscriptions et les signes, un grand atlas de 4096 par 4096 a été créé.Les images sur les décalcomanies sont translucides et rendues en mode alpha transparent, donc dans le cas d'un éclairage dynamique, elles ne semblent pas toujours adéquates, car le shader alpha standard n'est pas capable de recevoir les ombres.



Un shader spécial à deux passes a été créé pour résoudre le problème. La première passe dessine les parties sombres de l'image, la seconde les parties claires à l'aide de la méthode de fusion Blend DstColor One. Je ne comprends peut-être pas tout à fait correctement la méthode de dessin, je m'abstiendrai donc d'explications détaillées, mais j'ai réussi à obtenir le résultat souhaité: dans l'ombre, l'image est enterrée dans l'obscurité, et dans la lumière elle apparaît et joue même avec les couleurs. Le shader à deux passes n'a eu aucun effet sur les performances, car le système Decal combine initialement tous les décalcomanies en un seul grand maillage. Il existe probablement de meilleures façons, mais cette option me convient parfaitement.











Terre / herbe



Un autre shader à deux passes a été créé pour la surface du sol. Le territoire même à l'emplacement est fait par la géométrie en 3d max. Mais pour le rendu de l'herbe, un terrain supplémentaire a été créé. J'ai dû ajuster manuellement les hauteurs du terrain aux bons endroits pour correspondre au terrain. Ensuite, le rendu du terrain lui-même a été désactivé et plusieurs variantes des mailles d'herbe préparées ont été appliquées à la surface avec un pinceau. L'herbe indigène sur le terrain est terriblement lourde sur la scène en termes de performances, car elle n'est pas mélangeable et chaque élément crée un appel de tirage supplémentaire (peut-être que quelqu'un me corrigera si je me trompe), mais cette méthode est extrêmement pratique en termes de travail. La densité de l'herbe n'est pas élevée et là où elle ne l'est pas, la simplicité de la surface est très frappante. En relation avec cela, j'ai utilisé un shader à deux passes comme expérience,qui a été mentionné ci-dessus. Le premier passage est une géométrie opaque régulière, le second est un duplicata légèrement surélevé de la surface en mode de test Alpha. En gros, une copie de la surface du sol / de l'herbe est en outre dessinée avec une transparence dure et des sommets décalés vers le haut. Cette méthode complète quelque peu l'herbe plate et crée l'illusion de détails et de volume supplémentaires.







Lumière à l'extérieur de la fenêtre Des



sprites translucides unilatéraux ont été placés à certains endroits à l'extérieur des fenêtres du bâtiment principal pour simuler les reflets. En outre, le post-effet Global Fog a un paramètre de brouillard blanc brillant, qui est activé lorsque le héros se déplace plus profondément dans le bâtiment. Autrement dit, lorsque le personnage se trouve dans les couloirs sombres du boîtier, l'environnement extérieur acquiert en douceur une lueur blanchâtre. Cela crée un assez bel effet artistique et permet de mettre en valeur le plan proche et éloigné.







Ceci conclut la première partie de l'article. Lien vers la deuxième partie. Merci à tous pour votre attention!



All Articles