Vous pouvez créer des effets visuels 2D dans Unity à l'aide de plusieurs méthodes différentes. Pour créer un effet de feu, par exemple, vous pouvez animer les flammes image par image, animer un sprite à l'aide d'un shader créé dans Shader Graph ou créer des particules enflammées. Pour cette dernière méthode, vous pouvez choisir le système de particules intégré qui fonctionne sur le processeur, ou utiliser le graphique VFX et la puissance du GPU pour créer des millions de particules. Les deux systèmes peuvent être utilisés dans le même projet, ce qui vous permet de choisir celui qui convient le mieux à un effet particulier.

Cet article se concentre sur VFX Graph, qui peut être utilisé dans les jeux 2D à partir de Unity 2022 LTS.

Il y a quelques points clés à prendre en compte avant de créer des effets spéciaux dans un projet Unity 2D :

• Caméras Si vous utilisez une caméra à perspective, vos effets se produisent dans un espace tridimensionnel, comme dans les jeux en 3D. Si vous utilisez une caméra orthographique, vous devez configurer le moteur de rendu du système pour qu'il utilise le bon calque de tri. Pour en savoir plus sur la perspective de la caméra , cliquez ici.
• Post-traitement Vous pouvez appliquer des effets de post-traitement à votre projet 2D si vous choisissez l'Universal Render Pipeline (URP), par exemple en ajoutant un effet de floraison à un effet de particules via le cadre URP Volume.
• Les effets peuvent être obtenus de différentes manières. Par exemple, un GameObject représentant un effet peut avoir plusieurs GameObjects enfants utilisant des systèmes différents, comme des sprites avec des shaders personnalisés ou plusieurs systèmes de particules.
• Clips d'animation: Les clips d'animation peuvent vous aider à orchestrer des effets d'animation fluides à base de sprites. Vous pouvez même utiliser le système d'animation squelettique d'Unity (avec parcimonie) pour contrôler des parties d'un sprite dans une animation de sprite.
• Asset Store Unity Pour commencer à ajouter des effets visuels à votre projet, rendez-vous dans l'Unity Asset Store, où vous trouverez de nombreux effets 2D prêts à l'emploi.

Les actifs Visual Effect Graph sont compatibles avec le moteur de rendu 2D utilisant Shader Graph dans Unity 2022 LTS. Pour créer un nouveau graphique VFX dans votre projet, suivez les étapes décrites dans la documentation.

Les contextes de sortie d' un graphique VFX définissent la manière dont l'effet sera rendu. Les contextes de sortie pour les maillages, comme Output Particle Quad, offrent la possibilité d'ajouter un graphique de shaders. Peu importe que vous commenciez avec une sortie éclairée ou non, le modèle d'éclairage sera modifié pour s'adapter au Shader Graph. Vous pouvez utiliser les shaders par défaut énumérés ci-dessous ou votre propre shader basé sur le Shader Graph.

Pour les projets 2D dans URP, vous pouvez utiliser l'un de ces trois graphes de shaders basés sur des sprites:

• Lit : Recevoir la lumière du système d'éclairage 2D
• Non éclairé : Non affecté par le système d'éclairage 2D
• Sur mesure: Pour mettre en œuvre un modèle d'éclairage 2D personnalisé

N'oubliez pas de cocher l'option Support VFX Graph dans la cible SRP à l'intérieur de Shader Graph.

Les propriétés exposées dans votre graphique de shaders sont affichées dans votre graphique VFX. Vous pouvez les remplacer si nécessaire, par exemple si vous souhaitez qu'un système de particules de VFX Graph contrôle l'évolution de la couleur de l'ombre au fil du temps.

La pluie est un effet de particules courant dans les jeux. Voici les principales étapes de la création de la pluie dans Happy Harvest avec VFX Graph et le GPU, qui permettent le mouvement de nombreuses particules individuelles :

Les particules de pluie (appelées Visual Effect Rain dans la hiérarchie) sont rendues dans la couche de tri, au-dessus du sol mais derrière les objets. En effet, des effets d'éclaboussures d'eau se produisent lorsque les particules de gouttes rencontrent le sol, afin de simuler la réaction de la pluie réelle. Si les gouttes de pluie sont visibles sur une surface verticale telle qu'un lampadaire, l'image peut sembler incorrecte. Dans le monde réel, la lumière affecte tout son environnement, y compris les gouttes de pluie. Dans Happy Harvest, le graphique VFX pour la pluie utilise un graphique de shaders basé sur Sprite Lit dans le contexte de sortie pour éclairer les particules de pluie. En l'absence d'un graphique d'ombrage de la lumière correspondant à la pluie, sa teinte ne peut pas changer pour refléter les variations de la lumière tout au long de la journée. Des éclaboussures image par image: Lorsque la particule de pluie meurt, un bloc Trigger On Die déclenche un événement GPU qui génère une seule particule de flipbook qui joue une simple animation d'éclaboussure. Happy Harvest utilise le bloc UV du Flipbook Shader Graph pour afficher les différents cadres à l'intérieur de la texture. Vous pouvez également utiliser le Flipbook Player Block dans VFX Graph pour obtenir le même effet.

Des particules de pluie apparaissent au premier plan (nommées Visual Effect Rain Foreground dans la hiérarchie). Comme ils simulent la proximité de l'objectif de la caméra, ils ne produisent pas d'éclaboussures d'eau lorsqu'ils touchent le sol.

Une variante de l'effet précédent est utilisée avec l'effet de tonnerre clignotant(Effet visuel Pluie Tonnerre d'avant-plan). Un effet sonore est ajouté pour le tonnerre à l'aide d'un composant VFX Output Event Play Audio. Ce composant est fourni avec des exemples de scripts de gestionnaires d'événements de sortie; le contexte de l'événement de sortie le déclenche dans le graphique. Un coup de tonnerre: Un moyen simple mais efficace de créer cet effet a consisté à créer une particule unique basée sur VFX Graph, initialisée au centre de la position de la caméra et suffisamment grande pour remplir l'écran. Le bloc Couleur sur la durée de vie du nœud de sortie modifie la couleur de la particule en évaluant un gradient dans le temps. Dans ce gradient, les changements de transparence simulent le clignotement et l'évanouissement de l'éclair de tonnerre.

La pluie affecte l'ensemble de la scène de Happy Harvest, mais comme seule une partie est visible par la caméra, de nombreuses particules calculées sont inutiles. Vous pouvez cocher l'option Frustum Culling dans l'inspecteur pour éviter le rendu de ces particules, ou utiliser le tuilage de caméra, une astuce employée dans la démo.

Le Camera tilling vous permet de créer et de rendre des particules dans une boîte qui correspond à votre vue de la scène, ce qui donne l'impression que les particules sont simulées partout dans la scène. Aucune particule n'est créée en dehors de la caméra, ce qui vous permet de réduire la quantité de particules générées et la capacité d'attribution de l'effet sans réglages supplémentaires.

Pour utiliser le carrelage de la caméra dans Happy Harvest, le champ de pluie est réglé pour correspondre aux dimensions de la caméra à l'aide d'une forme de position définie (Set position shape) : AABox. Le format de la caméra (saisir la taille manuellement, utiliser directement MainCamera ou utiliser l'emplacement aspectRatio) est mis à l'échelle par un multiplicateur de taille pour correspondre aux paramètres de la caméra dans la scène. La boîte AABox est légèrement plus grande que la taille réelle de l'appareil photo afin d'éviter un effet de débordement causé par l'élimination des images. Le mode de spawn des formes est réglé sur Surface car il n'est pas nécessaire de spawn sur l'ensemble du volume dans un projet 2D (l'axe Z n'étant pas utilisé).

Une fois cette configuration terminée, vous avez besoin d'un bloc de positions de tuiles et de flèches dans la sortie du système. Elle est liée à la transformation de la caméra afin de faire correspondre sa position et les dimensions de la caméra, comme vous souhaiteriez le faire dans le contexte d'initialisation du système.

Cette technique s'applique également aux effets de pluie en 3D, à l'exception du fait que le mode Shape Spawn doit être réglé sur Volume et avec une valeur différente de zéro pour l'axe Z si vous souhaitez obtenir un effet de profondeur.

Le feu est un autre effet courant dans les jeux. Dans Happy Harvest, il y a un feu de joie dans la cour et dans la cheminée de la maison du fermier. L'effet de feu se compose de trois ensembles de particules : Les flammes, les étincelles et la fumée proviennent toutes du même graphique appelé VFX_Fire.

Animer la flamme

L'animation fluide de la flamme se produit au niveau du shader dans Shader Graph et montre ce qu'il est possible d'obtenir en utilisant la puissance du GPU et des shaders.

Si vous ouvrez le fichier ShaderGraph_Firefiledans le projet, vous remarquerez qu'un seul sprite(Mask texture2D) est utilisé pour créer un masque afin de donner une forme ovale à la flamme. L'animation et le sprite sont créés par le biais d'un motif "Voronoï" défilant avec du bruit et une couleur de teinte pour la flamme et l'arrière-plan. Le masque alpha utilise la même forme de flamme mais avec un opérateur de saturation qui produit un contour plus visible.

Les effets d'étincelles et de fumée, qui ajoutent des détails polis au feu, utilisent le graphique de nuanceur de lumière standard. Une combinaison de modifications sur les blocs de vitesse, d'échelle et de position initiale permet de créer un effet vivant avec un seul sprite. Le graphique des effets d'étincelles et de fumée comprend des notes qui vous aideront à recréer les effets dans votre propre projet.

L'eau utilise des caustiques de type dessin animé ou des vagues avec des effets de transparence afin de correspondre au style artistique général de la démo. Le shader de l'eau est optimisé pour fonctionner avec les tilemaps, qui constituent la majeure partie de l'environnement de la démo.

Le matériau 2D Lit par défaut, appelé Water, se trouve dans le Tilemap Renderer de la tilemap. Ce matériau a été remplacé par un matériau personnalisé avec le shader de l'eau. Toutes les tuiles à l'intérieur d'une carte de tuiles sont rendues à l'aide du même matériau, de sorte que cette carte de tuiles n'est utilisée que pour les tuiles d'eau.

Dans le graphique ShaderGraph_Water, les effets de l'eau sont également générés à partir d'un motif de bruit de Voronoï inversé étiré pour simuler les caustiques (une méthode courante dans les caustiques de l'eau). Le mouvement oscillant est le résultat d'un tuilage et d'un décalage d'UV en temps supplémentaire avec un effet de bruit.

Effet de réfraction

L'effet de réfraction est intégré à la texture de la surface à l'aide du nœud Lerp. La réfraction utilise la texture du calque de tri de la caméra, qui est un instantané du rendu de la caméra jusqu'au calque de tri défini, ce qui signifie que tous les éléments des calques de tri précédents apparaîtront dans cette texture. Dans Happy Harvest, le rendu s'effectue jusqu'à la couche de tri des objets, qui est celle utilisée pour les éléments tels que le personnage. L'UV de la texture de la couche de tri de la caméra est déformée par une carte de normalité générée avec le nœud Normal et Hauteur, qui utilise la même texture de Voronoï que celle de la texture de la surface.

Regardez ce tutoriel utilisant la démo Lost Crypt 2D pour obtenir un tutoriel étape par étape sur d'autres effets d'eau en 2D.

Les effets évoqués jusqu'à présent n'interagissent pas avec le gameplay de Happy Harvest; ils font partie de l'environnement et jouent indépendamment de ce qui se passe dans la démo. Cependant, dans la plupart des jeux, vous devrez déclencher certains effets en fonction d'une action dans l'environnement et/ou avec le personnage. Examinons quelques effets déclenchés dans Happy Harvest.

Effets lors de l'utilisation d'objets

Certains effets sont attachés aux outils du personnage, comme le bidon d'eau. Le préfabriqué pour le bidon d'eau, Prefab_Tool_WaterCan, comporte trois clips d'animation qui modifient le sprite en fonction de la direction vers laquelle le personnage est orienté (haut, bas, côtés). Dans ces animations, il y a un événement d'animation qui appelle une fonction à l'intérieur d'un composant Tool Animation Event Handler (gestionnaire d'événement d'animation d'outil).

Ce script active ou désactive les instances correspondantes des graphiques VFX pour chaque position référencée dans l'inspecteur.

Effets lors de l'itération avec les tuiles

Certains effets se produisent sur les tuiles, comme le creusement et la récolte. Cela permet de s'assurer qu'ils ne causent pas de problèmes avec les animations du personnage ou les changements de position. Lorsqu'il est temps de labourer une cellule, l'effet de labourage joue sur cette cellule, et lorsqu'il est temps de récolter, la cellule fait appel à l'effet de récolte.

Lorsque l'effet de labourage est déclenché, il fait référence à l'effet TillingPuff_prefab du composant TerrainManager attaché à l'objet de jeu Grid. Il se déplace au centre de la tuile et joue. D'autres effets, comme la récolte, font appel au graphique VFX référencé dans l'objet scriptible Data/Crops. Lors de l'initialisation du script TerrainManager, un dictionnaire VFX pool est créé (la variable dans le script m_HarvestEffectPool) qui instancie plusieurs préfabriqués VFX à jouer en cas de besoin.

Les petits effets de Happy Harvest ajoutent du cachet à la démo et la rendent plus agréable à explorer. En voici quelques-unes :

• VFX_DustParticles: Pour répandre la poussière ambiante dans l'environnement
• VFX/Eau: pour les vagues et les éclaboussures subtiles de l'eau
• VFX_Leaves: Déclenche la chute des feuilles des buissons lorsque le joueur passe à proximité.
• Personnage Déclenche un effet de bouffée de fumée attaché au personnage ; cet effet est produit par le système de particules intégré.
• P_VFX_Moths: Déclenche le vol des papillons de nuit à proximité des projecteurs ; cette opération est également réalisée avec le système de particules intégré.

Chacun des effets basés sur le graphique VFX dans la liste ci-dessus comprend des notes expliquant l'objectif de chaque nœud.

Créé par un développeur Unity expérimenté, avec la contribution d'ingénieurs Unity et d'artistes techniques, il s'agit de notre plus grand guide de développement d'effets visuels. Ce livre électronique offre un aperçu complet de la manière d'utiliser les outils de création d'effets visuels dans Unity pour créer n'importe quel type d'effet : eau et liquide, fumée, feu, explosions, météo, impact, magie, électricité - la seule limite est votre imagination.

Vous pouvez également consulter ces deux tutoriels vidéo sur la création d'effets spéciaux avec VFX Graph :

• Comment utiliser les décalcomanies dans VFX Graph
• Comment créer un effet de portail à l'aide du graphique VFX