10
\$\begingroup\$

I was watching the teaser trailer for Seasons After Fall, and I was struck by the effect they use to transition between seasons (around 21-24 seconds):

Animation showing the reveal effect

The level art, including the background and the foreground platforms, change from a sepia-coloured autumn to a lavender winter, with the effect spreading outward from the player character a bit like water soaking through paper.

It looks like more than just a palette change, as details in the leaf and bark patterns change in the transition.

How could I achieve an effect similar to this in a 2D Unity game?

\$\endgroup\$
12
\$\begingroup\$

One way to accomplish this would be to blend between the two backgrounds using an alpha map. A simple approach would be to render the "back" (hidden) background, and then the "front" (initially-visible) background. Use the alpha channel of the front background, or a separate alpha texture, to control the transparency of the front background as you would any transparent or translucent sprite. Where this alpha map is less than one, parts of the back background will show through.

Then it's just a matter of building that alpha map according to the effect you'd like. In the video you show off, it looks like such a map was built with a "painterly" kind of approach. This might involve randomly placing circles of zero alpha (that feather off to 1.0 alpha around their edges). Start placing these circles tightly biased around the origin of the reveal, and over time relax the bias so they spread outward. As you do this you'll probably want to expand the radius of the circles as well.

You can tweak this approach as you need it to tailor the effect to your desires; plain circles might end up looking a little too "blotchy" for example, and you might instead want to randomly stamp a randomly-selected pre-authored "brush stroke" into the mask instead. Even random placement itself might look a little too disorderly, and you might instead opt for stamping the alpha mask along some pre-authored curve or spline to highlight a particular style.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Oops, I was typing a very similar answer at the same time you were, it seems. ^_^; Apologies for the overlap. \$\endgroup\$ – DMGregory Feb 27 '17 at 17:26
  • \$\begingroup\$ Thank you for the reply, I will try this out and get back to you of it works! Thank you once again \$\endgroup\$ – Jessca Stone Feb 27 '17 at 17:44
  • \$\begingroup\$ You could also hand-draw four or five transitions and just randomize the rotation a little. I doubt anyone will care when it's that quick, and worst-case scenario, you can play with rotation and horizontal scaling. \$\endgroup\$ – Fund Monica's Lawsuit Feb 28 '17 at 3:22
  • \$\begingroup\$ Sorry, to disturb again, but I was wondering if you can elaborate on that more, as I was testing it my own one out but it was a bit clunky and I couldn't make it transparent either. Sorry again for the disturbance and thank you! \$\endgroup\$ – Jessca Stone Mar 1 '17 at 21:48
  • \$\begingroup\$ Offhand it sounds like a lot of things could potentially be wrong there; I can't really help you debug it here, but it's possible somebody in the Game Development Chat might be able to, and you can sometimes find me there as well. \$\endgroup\$ – user1430 Mar 1 '17 at 22:49
7
\$\begingroup\$

I'd approach this using a custom shader on my SpriteRenderers that takes two textures, one for each version you want to transition between.

(Even if using this effect to transition between more than two states, I'd still try to structure the game so we only need two for rendering at any one time: the old state and the next state. We'll let that transition play to completion before we let the player initiate a transition to a third state, at which point we can replace our previous "old" state since it's no longer visible)

This shader would cross-fade between the two textures, using a third single-channel texture as a mask for the effect (eg. black = 100% old state, grey = 50/50 blend, white = 100% new state). I'd map this mask texture in screenspace.

Then I'd set up a second camera to render to a RenderTexture, to generate this mask. This second camera would move with my main camera and match its FoV/orthographic size, so any animation in my view applies to both the world and reveal mask consistently. This camera would render before my main camera, and be set up to see only content on a specially-designated "reveal" layer. In the video example, it looks like they use a particle system to splat-out a collection of little cloud shapes into this reveal texture, which expand over time, giving the transition an organic-looking spreading edge.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Thank you for the reply, I will try this out and get back to you of it works! Thank you once again! \$\endgroup\$ – Jessca Stone Feb 27 '17 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.