Shader(?) for transforming one sprite to another

[Cyrana]

Hello forum! : )

I want to achieve the following:

One sprite (e.g. an elephant) transforming to another one (e.g. flower).

It shall be similar to the way Pokémon are evolving. They turn very bright and change their bright/glowing shape to the other form. Then change from a glowing back to the real colors.
Opposed to a Pokémon evolution, I need no shifting back and forth. Just a straight transformation, needed for a quick effect.

I probably need a shader for this, am I right?
Would this be particularly difficult? Are there any common patterns for this?

I could rasterize the whole image, check where non-transparent pixels sit but mapping them to a new shape seems difficult.

Thanks for taking your time to read my thread, looking forward for your tips <3

[Mortal]

not necessary, but yeah, it can be done it with shader.
check this link: https://www.shadertoy.com/results?query=transition
they have cool transition effects

[Cyrana]

Thanks, I browsed that page a bit but could not find anything that seems similar to what I would want.

I searched "transition", "transformation" - appended 2d, too.

Well, seems like I have to commission someone or learn it myself.
If you have any neat resources I would be happy to see them : )

Have a sweet weekend : )

[Hapax]

By "transform", do you mean what is often known as "morph"?

Probably going to need a dedicated morph library - or at least raw OpenGL - to achieve that in real-time. That is, if a library even exists

[Cyrana]

Yes, like morphing from one sprite to another. But colours do not matter as they should start "glowing", losing colours for a bright white.

What I thought:

Turn one sprite white (add some glow effects, too).
Check the shape of the other sprite.
Turn sprite #1 white pixels to the shape of sprite #2.
Create the same bright effect for sprite #2.
Place it below sprite #1, make sprite #1 disappear.
Sprite #2 turns back to its original colours.

[Hapax]

Morphing a single colour (only white) shape will be a lot easier but there are still numerous approaches.

One idea would be create actual geometry (white only) that matches the two solid white shapes of the sprites and then interpolate the two. If these shapes have an identical amount of vertices, it will work more smoothly and simply.

Another idea would be to create a grid of (white) squares to match the pixels (that would be white) and move them from their position in one sprite to their position in the other sprite. They will, of course, required somewhat equivalent locations and it will be much more simple if they have the same number of squares/pixels.

[Mario]

Depending on the size of the sprites you could actually use a simple game of life algorithm (note that this has an issue with holes that appear only in the target sprite):

• Once every transformation step, iterate over all pixels of your current/previous sprite.
• If the pixel is transparent/outside and next to an existing edge while also being inside the target, fill it.
• If the pixel is painted/inside and next to an existing edge while also being outside the target, clear it.
• Once there are no more changing pixels, you're done and can start using the actual colored target sprite.

Keep in mind that this is rather expensive and you shouldn't do it on too big sprites/textures.

[Cyrana]

Thanks Hapax and Mario,

About the Hapax's first and second method:
Well, shapes can be quite different are 100% unpredictable as the effect shall cope with sprites added by the user. Canvas size is known, though.

How would your methods work if there is an uneven amount of coloured pixels?

Mario, sadly default sprites are quite huge already - the effect happens to multiple objects at once, too.

I'm not even sure, if there is a cheap method for this. Maybe working in rough chunks instead of pixel-by-pixel.