Téléchargez notre nouvel exemple de projet 2D : Crypte perdue
Nous avons mis nos nouveaux outils 2D à l'épreuve pour créer une démo de side-scroller en 2D. Dans ce billet, nous montrons comment ces outils 2D intégrés peuvent vous aider à créer des visuels haut de gamme avec Unity.
Des équipes hautement qualifiées réalisent de magnifiques jeux en 2D avec Unity depuis des années, mais nous voulions permettre à tout le monde, des artistes individuels aux grandes équipes, de disposer d'encore plus d'outils 2D pour créer de beaux jeux. Et nombre d'entre elles seront prêtes pour la production dans le cadre d'Unity 2019.3, actuellement disponible en version bêta.
Nous avons créé Lost Crypt en utilisant la suite complète d'outils 2D. Cette scène vivante présente des animations, des effets de lumière, des terrains organiques, des shaders et du post-traitement, le tout réalisé nativement en 2D. Il montre comment des équipes et des projets de toutes tailles, ciblant n'importe quelle plateforme, peuvent désormais obtenir plus rapidement des résultats plus attrayants et plus beaux.
Lost Crypt devrait bien fonctionner sur n'importe quel ordinateur de bureau et nous avons également mis en place des contrôles à l'écran avec le nouveau Input System au cas où vous souhaiteriez l'exécuter sur un appareil iOS ou Android. Lors de nos tests, il a fonctionné à 30 FPS sur des appareils courants comme un iPhone 6S.
Une fois que vous avez téléchargé Lost Crypt depuis l'Asset Store, nous vous recommandons de commencer par un Nouveau Projet vierge et de sélectionner 2D, puis d'importer le projet à partir de My Assets dans le Package Manager, ou en cliquant sur My Assets sur la page de votre Asset Store. Le projet comprend tous les paquets 2D dont vous avez besoin. Il écrasera alors les paramètres du projet, en changeant les paramètres de rendu pour le moteur de rendu 2D au sein de l'Universal Render Pipeline.
Une fois que vous l'avez importé, vous verrez la scène principale. Lorsque vous cliquez sur Play, vous devriez pouvoir jouer normalement en utilisant les flèches du clavier et la barre d'espacement pour sauter.
Les scripts et la logique du jeu sont assez simples, car l'objectif principal de la démo était d'utiliser les outils 2D pour matérialiser le concept art de la démo.
Nous avons décomposé la démo en plusieurs tâches et choisi les outils 2D à utiliser pour ce défi visuel.
Le personnage a été conçu dans Photoshop et importé directement avec le 2D PSD Importer. Ouvrez le fichier Sara.psb avec l'éditeur de sprites pour voir la configuration et le rig du personnage. Si vous ouvrez le fichier dans Photoshop, vous verrez que nous avons conservé les différentes parties et les noms des calques.
L'une des fonctionnalités disponibles avec le pipeline de rendu universel est le nouveau matériau Sprite-Lit. Par rapport au matériau habituel Sprite-Default, celui-ci permet aux Sprites de réagir aux conditions d'éclairage en 2D.
Nous avons importé les cartes normales du personnage dans l'éditeur de sprites, en utilisant le menu déroulant Textures secondaires. Vous pouvez ajouter des cartes de normalité et de masque à des personnages animés en 2D, à des Sprites ordinaires, à des mosaïques et à des formes de Sprites.
Le personnage dispose de résolveurs IK 2D dans les jambes pour aider l'animateur à se concentrer sur le positionnement correct des chevilles et des extrémités des pieds, afin que les jambes suivent de manière réaliste.
Une fois le personnage riggé, nous avons réalisé les différentes animations à l'aide de l'outil Animation et de l'Animator pour contrôler ces états. Vous pouvez voir comment l'outil fonctionne dans cette conférence de la GDC 2019.
La queue de cheval du personnage est un GameObjects enfant différent et est contrôlée par la physique 2D. Il réagit de manière réaliste aux mouvements car chaque os de la queue de cheval possède un composant 2D "Hinge Joint" avec certaines restrictions. Cela permet à ses cheveux de bouger librement sans trop s'enrouler ou réagir de manière excessive aux mouvements du personnage.
L'une des possibilités les plus puissantes de l'éclairage dynamique sur les sprites est de modifier l'apparence de l'environnement. En utilisant les mêmes sprites, vous pouvez changer l'ambiance, l'heure du jour ou l'obscurité d'une zone, ce qui ouvre la voie à une multitude de mécanismes de jeu, depuis les mécanismes de furtivité jusqu'aux mondes riches et vivants.
Nous avons contrôlé les lumières de la scène à l'aide de simples scripts qui contiennent une valeur de gradient de couleur (couleur de la lumière du jour à la nuit) et les lumières et les matériaux changent de couleur en fonction du paramètre Time dans le GameObjects parent. Avec ce type d'installation, vous pouvez contrôler visuellement la façon dont les différentes lumières se mélangent.
L'une des difficultés rencontrées par les développeurs de jeux en 2D à leurs débuts consistait à créer efficacement des terrains organiques tels que des collines, des pentes ou des sols irréguliers, ce qui n'était possible qu'en utilisant des feuilles de tuiles soigneusement conçues. Des années plus tard, il était plus facile d'y parvenir en utilisant plusieurs sprites représentant des parties du terrain, mais le flux de travail ou les performances pourraient être améliorés.
Avec 2D Sprite Shape, vous pouvez générer des terrains et des collisions de la même manière que vous le feriez dans une application de dessin vectoriel. Vous pouvez ajuster les brosses (profils de forme des sprites) et commencer à créer sans vous soucier d'avoir à ajuster de nombreux sprites ou colliders au fur et à mesure de l'itération sur l'environnement.
Lost Crypt utilise également certains éléments supplémentaires de Splines, comme le script NodeAttach, pour attacher des éléments à la spline, de sorte qu'ils suivent cette dernière. Dans cette démo, les rochers utilisent ce script et la ConformingSpline du calque des fleurs pour suivre la forme de la spline de l'herbe. Vous pouvez utiliser cette fonctionnalité pour le gameplay ou pour des éléments décoratifs comme nous l'avons fait dans le calque d'herbe au premier plan.
Le Tilemap est probablement l'un des outils 2D les plus essentiels, non seulement pour économiser de l'espace mémoire avec de petits morceaux de graphiques qui peuvent être "tuilés" et répétés, mais aussi parce qu'il est crucial pour la conception des niveaux.
Dans Lost Crypt, nous avons utilisé le 2D Tilemap Editor (disponible via Package Manager) pour recréer l'intérieur de la crypte où il utilise quelques outils supplémentaires Tilemap extra (disponibles sur GitHub) pour rendre le processus de level-design plus efficace. Par exemple, nous avons utilisé Rule Tile, un type de tuile qui vous permet de peindre des tuiles comme s'il s'agissait de pinceaux. Il sélectionne automatiquement la bonne tuile en fonction des tuiles voisines ou des extrémités.
Certains éléments courants dans les jeux sont les effets de feu, nous en avons donc ajouté un dans Lost Crypt. Nous avons commencé par créer quelques torches GameObjects à l'aide du système de particules et du graphique de shaders pour la 2D et nous avons utilisé le nœud Sprite-Lit Master pour le shader de sortie. Nous avons créé l'animation du feu dans une feuille de Sprite traditionnelle que le système de particules utilise pour jouer l'animation.
Le shader que nous avons créé pour la flamme utilise une couleur de teinte HDR pour augmenter l'intensité de l'éclat autour de l'objet à l'aide du post-traitement Volume. Le GameObjects parent contient quelques particules d'étincelles et quelques lumières qui éclairent l'alcôve.
Les réflexions et réfractions (par exemple, l'eau, la glace, les miroirs ou les écrans qui affichent une autre zone du niveau) sont un autre cas d'utilisation courant des shaders, très répandu dans les jeux.
Nous avons réalisé l'effet d'eau dans la crypte entièrement avec Shader Graph. Nous avons exposé plusieurs paramètres (comme la couleur de l'eau, la vitesse des vagues, la distorsion, l'effet d'ondulation, etc.), ce qui nous a permis d'ajuster l'apparence finale dans la scène. Afin de projeter une image miroir de l'environnement, nous avons ajouté une caméra supplémentaire qui produirait l'image dans une texture à lire par le Shader Graph. En outre, nous avons ajouté une passe de bloom en post Processing pour faire briller les caustiques de l'eau, ce qui donne un bel effet à la surface de l'eau.
Nous avons notamment animé l'environnement en faisant osciller les branches des arbres dans le vent. Pour obtenir cet effet, nous avons décidé de n'utiliser qu'un seul shader pour le feuillage de chaque arbre - Prefab - afin de créer de la variété et d'éviter la répétition.
Sur le graphique Vegetation Wind-Lit, vous pouvez voir comment nous avons créé deux effets. L'un d'eux est l'effet d'animation ou de balancement, que nous avons créé en déplaçant la position du sommet en fonction de quelques paramètres qui modifient un motif de bruit. Le deuxième effet utilise le canal G ou vert pour ajuster la tonalité de la lumière périphérique autour du feuillage.
Les styles de mélange de lumière sont une collection de propriétés dans le moteur de rendu 2D qui décrivent comment les lumières doivent affecter les Sprites. Par exemple, vous pouvez créer un style de fusion qui n'affectera qu'un canal particulier. Lorsque vous ajoutez une lumière dans la scène qui utilise ce style de fusion, elle n'affecte que les zones du sprite que les informations du canal de la carte de masque déterminent.
Dans l'exemple ci-dessous, la lumière paramétrique utilise notre style de fusion Éclairage direct, qui n'affecte que les zones indiquées dans le canal R de la carte de masque de ce sprite.
Lost Crypt possède une courte cinématique lorsque notre aventurier s'empare de la baguette magique dans la crypte. Pour rendre ce moment un peu plus spécial, nous avons changé l'ambiance de l'environnement et spawn particules au bon moment avec Timeline, puisque nous voulons observer le passage à la nuit. Pour suivre les particules volant dans les bois, nous avons changé de caméra Cinemachine en ayant également une caméra de mélange de pistes d'animation.
L'anneau lumineux qui apparaît lorsque vous saisissez la baguette utilise des lumières de type Sprite. Le graphisme de l'anneau s'étend et s'estompe, créant une aura qui illumine l'environnement.
Nous avons obtenu l'effet de lueur des particules principalement avec l'effet Bloom dans le post-traitement Volume. De même, le matériau/shader pour les particules et la traînée utilise une couleur HDR pour définir l'intensité que l'effet de post-traitement doit appliquer à cet objet.
Observez bien les bois, vous y verrez des créatures spectrales. Pour ce faire, nous avons créé un shader qui peut être utilisé pour d'autres fantômes. Ils sont transparents, mais un effet de fresnel ajoute de la brillance sur les bords du sprite, ce qui les fait osciller comme des créatures flottantes.
Un effet intéressant du shader est le suivi de la position de transformation du GameObjects de la baguette. Par exemple, lorsque la baguette est proche des goules, celles-ci deviennent plus lumineuses. Pour ce faire, nous avons attaché un petit script à la baguette qui met à jour sa position dans le nuanceur de matériaux.
Les goules ont également une petite animation qui passe d'un graphique à l'autre. Pour ce faire, nous avons créé une carte de masque avec des graphiques différents dans chaque canal : R avec un visuel, G avec le visuel alternatif et B pour l'effet de fresnel.
Pour une dernière couche de polissage, nous avons ajouté quelques effets de post-traitement inclus dans le pipeline de rendu universel. Par exemple, nous avons créé un GameObjects vide et y avons attaché le composant Volume. Dans Lost Crypt, nous utilisons la floraison, la balance des blancs et la vignette, mais il existe de nombreux autres effets qui peuvent être utilisés dans les projets 2D, comme le flou de mouvement, la correction des couleurs et les effets de grain de film.
Nous espérons que la démonstration de Lost Crypt vous aidera à comprendre comment vous pouvez utiliser notre suite intégrée d'outils 2D pour des cas d'utilisation similaires. Si vous avez des questions sur la Crypte perdue, vous pouvez nous contacter sur le forum.
Si vous avez des questions spécifiques sur nos outils 2D, consultez les fils de discussion dédiés dans la section 2D du forum et sous Beta & Experimental features.
Vous voulez découvrir les coulisses de la crypte perdue en temps réel ? Inscrivez-vous à notre webinaire animé au cours duquel Andy Touch, Global Content Evangelist, expliquera comment nous avons utilisé les lumières 2D, les shaders et le post-traitement dans Lost Crypt. L'équipe 2D de la R&D se joindra également à nous pour répondre à vos questions sur la suite d'outils 2D ou sur le projet lui-même.
Le nombre de places étant limité, n'hésitez pas à vous inscrire rapidement et à ajouter un rappel dans votre agenda.