I want to create a button for a game's UI. The background uses a gradient and then I blit a surface on top of the gradient and use SDL_SetColorKey to delete the unwanted pixels. The surfaces are not the same size: the clipping mask is 200 x 50 and the gradient 1 x 50, so I need to stretch the gradient to the same width of the cliping mask, I can't use a wider image because the purpose of doing this is to save memory and storage and using the same gradient image on multiple clipping_masks of different widths.

I found I can use SDL_BlitScaled but I need to blit the surface to itself and it appears to be useless because the surface remains the same size, am I doing something wrong? Is there a way to do it without blitting the surface to itself?

SDL_Rect final_size;
final_size.w = 200;
final_size.h = 50;
final_size.x = 0;
final_size.y = 0;
SDL_BlitScaled(gradient_surface, NULL, gradient_surface, &final_size);
//do some stuff with those textures
SDL_CreateTextureFromSurface(renderer, final_button_surface);

SDL2 is very capable of doing exactly what you ask. SDL2 is also more efficient and has much more utility. I highly recommend upgrading to SDL2 by following the instructions provided in the Migration Guide on SDL Wiki.

EDIT: It took me a few days to migrate my project from SDL 1.2 to 2.0.3; most of the migration process was changing from SDL_Surface to SDL_Texture and figuring out how the new SDL_Renderer and SDL_Window types work together.

| improve this answer | |
  • \$\begingroup\$ Umm I am using SDL2 but I need to load an image to a surface and the create a texture from that surface (and destroy the surface later) \$\endgroup\$ – user3195897 Jul 6 '14 at 5:05
  • \$\begingroup\$ Then you can use SDL_LoadBMP (or IMG_Load if you have SDL_Image extension library installed). Use SDL_CreateTextureFromSurface to make it a texture, and by using SDL_RenderCopy, you can specify the exact dimensions you want your image to fill and it will scale it for you. Check out this tutorial: programmersranch.com/2013/11/… \$\endgroup\$ – igrad Jul 6 '14 at 18:08
  • \$\begingroup\$ I tried that but I discovered that I can't clip the background because SDL_SetColorKey only works with SDL_Surfaces not Textures. \$\endgroup\$ – user3195897 Jul 6 '14 at 22:31
  • \$\begingroup\$ If you have SDL_Image installed, you can load a PNG instead of a BMP, which allows you to have a transparent background, thus eliminating the need for colorkeying. I use PNGs for all my (primitive) art. If you don't like PNGs, "[SDL2_Image] supports the following formats: BMP, GIF, JPEG, LBM, PCX, PNG, PNM, TGA, TIFF, WEBP, XCF, XPM, XV" - libsdl.org/projects/SDL_image \$\endgroup\$ – igrad Jul 6 '14 at 22:38
  • \$\begingroup\$ I use a png and IMG_Load to load the gradient, I want to do this to eliminate the need of an image for each button, instead I just upload a background and use SDL_ttf to create the text of those buttons and then I use the text as a clipping mask so the letters have a gradient instead of a single color. \$\endgroup\$ – user3195897 Jul 6 '14 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.