Advertisement

Need help achieving a programmatic 2D effect/animation

Started by September 03, 2017 03:49 PM
3 comments, last by Ivan Reinaldo 7 years, 5 months ago

" rel="external">youtube link

at 1:38 - 1:42, purple things (I think this is particle system) that come off from the moon.

Someone else had decompiled the game in the past, and the assets shows that the dark blue area around the moon (after purple things come off) is just background image. So my assumption is that there are many of those 'purple things', that use additive blending to give different density of 'purpleness'.

The details that I'm looking at are:

  1. As those purple things come off completely from the moon, it forms jagged shapes
  2. At the edge of those jagged shapes, color blends smoothly instead of sharp turn between purple and dark blue(I know how to do it with simple shapes, but in here, the jagged shape itself constantly changes)
  3. further from edge between dark blue and purple, at the light purple direction, the density of purple is nice and smooth

I'm pretty familiar on animating objects by manipulating transform,  but this one seems like a lot of color works with programatically created shapes, any idea?

Here's a picture to clarify

 

msJmK.png

A place to start would be to choose your favorite noise function (simplex is great, although you can likely get away with something even cheaper). If you want to scale the result and control the smoothness of the outline, make it periodic (eg by sampling your noise along a circle). 

You can likely get away with sampling your outline once at the start of the effect. Just make sure it has enough points to seem detailed when fully expanded. Then map the sampled 1D noise vector onto a circle. Use the noise value as an alpha modifier for the current "ray".

Each frame increase the radius of the outline by some amount (you can increase it by a fixed amount, an amount proportional to the noise value or you can modulate it separately from a different noise vector).

Use a simple triangle strip to fill the shape. Like this:

triangle_fan-300x280.png

Modulate the alpha across the shape with a separate low frequency noise function. Render this result at something like half resolution to a separate render target.

Blur the intermediate result. You can lower the size of the render target to 1/4 or even 1/8 to increase the amount of blur without paying for it. You'll have to try out different scales to find out what values suit your taste best.

Finally, blend the intermediate onto the final scene. Play around with the different noise values (frequency and type) to get the effect you want.

Advertisement

I wonder if that was made procedurally or even particles. Could be "simple" polar texture mapping, animate the tex coord, use a wrapping/tiling texture and blend ... somehow. To really know, we'd need the source of that game.

You should tell what you got at your disposal (language, graphics API or engine), since if you want to go procedural you'd need pixel shader access or something, as irreversible shows.

As for procedural: It can be as complex as you want. I recommend a look at shadertoy. Here some examples which I think do something you're after or at least serve as a starting point.

Eclipse1

Eclipse2

(PS: I searched shadertoy with the key words plasma, halo, radial, circular and polar. Visually though the best results came back with "eclipse" :P

Edit: Here a bare example of what I had in mind above: PolarMappingAnimation .

Should have mentioned earler: shadertoy needs WebGL to work. Sorry. 

@irreversible @unbird

Thank you, I get what you guys meant. I got an idea in mind too, I'm not sure if it's even plausible though.

I'll code and post it here to see which gives the best result.

Coming back in 2 weeks or so :D

Yes, I can use pixel shader (just trying to recreate effect on a whim, not on a project or something, I'll use anything as long as I can grasp the logic)

This topic is closed to new replies.

Advertisement