I’m trying to create an animation for my gui and I have no idea where to start:
Imagine a square 40x40, for every pixels it scrolls up, all rows of pixels in the square above the original Y position lose 10% opacity.
So, when the square scrolls up 1 pixel, the first row has 90% opacity.
When the square scrolls up another pixel, the first row has 80% opacity, and the second row has 90% opacity etc… etc…
How would I do that (possibly without a massive performance loss)? I prefer textures over surfaces.
I believe you would need to convert to a surface (or have a surface as well as a texture) in order to manipulate the data (texture data is write-only) - this would mean the standard SDL pixel reading system can be used : Read in a pixel as usual; convert to RGBA; subtract the appropriate alpha value and then write back.
You would probably need to destroy and re-create the texture on each change, but that should be okay.
I not sure can it help you, but I suggest to create vertical alpha gradient (another image with only alpha values and zeros in other channels) and combine this two images. Try to test it may be you get acceptable result.
