Effet Révélation du changement de saison

10

Je regardais la bande-annonce de Seasons After Fall , et j'ai été frappé par l'effet qu'ils utilisent pour la transition entre les saisons (environ 21-24 secondes):

Animation montrant l'effet révélateur

L'art de niveau, y compris l'arrière-plan et les plates-formes de premier plan, passe d'un automne de couleur sépia à un hiver de lavande, avec un effet se propageant vers l'extérieur du personnage du joueur un peu comme de l'eau qui imprègne le papier.

Cela ressemble à plus qu'un simple changement de palette, car les détails des motifs de feuilles et d'écorce changent pendant la transition.

Comment pourrais-je obtenir un effet similaire à celui-ci dans un jeu 2D Unity?

Jessca Stone
la source

Réponses:

12

Une façon d'y parvenir serait de mélanger les deux arrière-plans à l'aide d'une carte alpha. Une approche simple serait de rendre l'arrière-plan "arrière" (caché), puis l'arrière-plan "avant" (initialement visible). Utilisez le canal alpha de l'arrière-plan avant, ou une texture alpha distincte, pour contrôler la transparence de l'arrière-plan avant comme vous le feriez pour tout sprite transparent ou translucide. Lorsque cette carte alpha est inférieure à un, des parties de l'arrière-plan apparaîtront.

Ensuite, il suffit de construire cette carte alpha en fonction de l'effet que vous souhaitez. Dans la vidéo que vous montrez, il semble qu'une telle carte ait été construite avec une approche "picturale". Cela peut impliquer de placer de manière aléatoire des cercles de zéro alpha (qui diminuent à 1,0 alpha autour de leurs bords). Commencez à placer ces cercles étroitement biaisés autour de l'origine de la révélation et, au fil du temps, relâchez le biais pour qu'ils se propagent vers l'extérieur. En faisant cela, vous souhaiterez probablement également étendre le rayon des cercles.

Vous pouvez modifier cette approche selon vos besoins pour adapter l'effet à vos désirs; les cercles lisses pourraient finir par sembler un peu trop "tachés" par exemple, et vous pourriez plutôt vouloir tamponner de manière aléatoire un "coup de pinceau" pré-créé au hasard dans le masque. Même le placement aléatoire lui-même peut sembler un peu trop désordonné, et vous pouvez plutôt opter pour l'estampage du masque alpha le long d'une courbe ou d'une spline pré-créée pour mettre en surbrillance un style particulier.


la source
Oups, je tapais une réponse très similaire en même temps que vous, semble-t-il. ^ _ ^; Toutes mes excuses pour le chevauchement.
DMGregory
Merci pour la réponse, je vais l'essayer et je vous répondrai que cela fonctionne! Merci encore une fois
Jessca Stone
Vous pouvez également dessiner à la main quatre ou cinq transitions et simplement randomiser un peu la rotation. Je doute que quiconque se soucie de ce scénario rapide et pire, vous pouvez jouer avec la rotation et la mise à l'échelle horizontale.
Fund Monica's Lawsuit
Désolé de déranger à nouveau, mais je me demandais si vous pouvez en dire plus, car je le testais moi-même, mais c'était un peu maladroit et je ne pouvais pas non plus le rendre transparent. Désolé encore pour le dérangement et merci!
Jessca Stone
À première vue, il semble que beaucoup de choses puissent potentiellement se tromper là-bas; Je ne peux pas vraiment vous aider à le déboguer ici, mais il est possible que quelqu'un dans le chat de développement de jeu soit en mesure de le faire, et vous pouvez parfois me trouver là aussi.
7

J'aborderais cela en utilisant un shader personnalisé sur mes SpriteRenderers qui prend deux textures, une pour chaque version entre laquelle vous souhaitez effectuer la transition.

(Même si vous utilisez cet effet pour faire la transition entre plus de deux états, j'essaierais quand même de structurer le jeu, nous n'avons donc besoin que de deux pour le rendu à la fois: l'ancien état et l'état suivant. Nous laisserons cette transition jouer. jusqu'à la fin avant de laisser le joueur initier une transition vers un troisième état, auquel cas nous pouvons remplacer notre ancien "ancien" état car il n'est plus visible)

Ce shader se fondrait entre les deux textures, en utilisant une troisième texture monocanal comme masque pour l'effet (par exemple, noir = 100% ancien état, gris = mélange 50/50, blanc = 100% nouvel état). Je mapperais cette texture de masque dans l'espace d'écran.

Ensuite, je mettais en place une deuxième caméra pour effectuer un rendu sur une texture de rendu, afin de générer ce masque. Cette deuxième caméra se déplacerait avec ma caméra principale et correspondrait à sa taille FoV / orthographique, donc toute animation à mon avis s'applique à la fois au monde et révèle le masque de manière cohérente. Cette caméra effectuerait le rendu avant ma caméra principale et serait configurée pour ne voir que le contenu sur un calque "révéler" spécialement désigné. Dans l'exemple vidéo, il semble qu'ils utilisent un système de particules pour répartir une collection de petites formes de nuages ​​dans cette texture révélatrice, qui se dilate au fil du temps, donnant à la transition un bord de propagation d'apparence organique.

DMGregory
la source
Merci pour la réponse, je vais l'essayer et je vous répondrai que cela fonctionne! Merci une fois de plus!
Jessca Stone