SDL Surface clipping mask

Question

I am creating a GUI for my game, so I use some buttons like . So you can see it is only text surrounded by a rectangle. But I currently use a huge png image with all the buttons I need arranged as I want it, it is really inefficient, so how can I upload a single smaller image of the rectangle, a sample of the gradient I want and use SDL_tff to create a surface. Say: I copy the rectangle and the text in an SDL_Surface, it should have two colors (black and white), now make white pixel transparent and black pixels to be replaced with the gradient to create the buttons and place them using SDL_Rects.

Answer 1

You can start with your gradient texture and render your texture to a surface where you want your button to be. You can manually apply the gradient by only copying over the pixels from the gradient map onto the destination where the destination pixels have alpha (or multiply the two).

Note, when using GL/DX, you can use the stencil buffer (http://en.wikipedia.org/wiki/Stencil_buffer) to apply a mask to a render target and then render your gradient over the screen:
Create a new render target to a texture, render the font onto the stencil buffer (usually through an intermediate texture), draw the gradient on the render target, apply.