# How do I implement 2d color animation like in this video?

link on youtube 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?

• @Bálint sorry, it's fixed now
– Rei
Sep 1, 2017 at 18:37

How about first rendering the bright colors, then rendering the dark colours as jagged spikes multplicatively over the bright colors and then doing an additive gauss blur of all the colours and add the result to the original layer (the layer which had it's colours multiplied by those of the jaggies)?

The spikes could be made using points radiating from the moon connecting to two points somwehere on the area of the moon, forming a triangle.

I would create this effect using a flow map and a shader. This video shows a great example of how these effects are achieved. Wel worth watching.

The basic idea is this: Textures are maps with r, g, b and alpha values. Usually these are used to store a color and is shown as-is on the screen. However, these values can be used for anything. Most well known are normalmaps or bumpmaps. In these the RGB values are used as XYZ vectors for representing angles on the texture for lightreflection calculations. A flowmap does something similar, it uses the R and G components as X,Y offsets to simulate waterflow, smoke or any other warping effect. With a well crafted flowmap effects like these can be created without the need for complex custom code for each effect.

As for your question, I assume a flowmap was created to have the shape of the effect originate from the center with irregular shapes. Another texture with purple to black and transparent hues is then rendered with that flowmap over the background. Check the video I linked and I think it becomes more clear what is going on.

There are many examples, but I think the Heartstone gold card effect shows how powerful such system can be. Many different effect are used with a single well thought out shader system.

[1]: https://youtu.be/OYjMnMZe1Vg “Heartstone gold cards”