SDL create transparent surface - sdl

I was searching for how to create a transparent surface in SDL, and I found the following: http://samatkins.co.uk/blog/2012/04/25/sdl-blitting-to-transparent-surfaces/
Basically, it is:
SDL_Surface* surface;
#if SDL_BYTEORDER == SDL_BIG_ENDIAN
surface = SDL_CreateRGBSurface(SDL_HWSURFACE,width,height,32, 0xFF000000, 0x00FF0000, 0x0000FF00, 0x000000FF);
#else
surface = SDL_CreateRGBSurface(SDL_HWSURFACE,width,height,32, 0x000000FF, 0x0000FF00, 0x00FF0000, 0xFF000000);
#endif
and it works, but it seems pretty damn awful to me, so I was wondering if there is some better way of doing this.

What you have there is a check to see if the computer uses big endian or little endian. SDL is multiplatform, and computers use different endiannness.
The author of that article was writing it in a "platform agnostic" manner. If you are running this on a PC, you'll probably be safe just using:
surface = SDL_CreateRGBSurface(SDL_HWSURFACE,width,height,32, 0x000000FF, 0x0000FF00, 0x00FF0000, 0xFF000000);
You don't need the conditionals.
That being said, the code will not be portable to other platforms that use big endiandess

I have a bit of experience with SDL2 with my IT class. But I've been developing a simplified version of functions to that use SDL and the way I load my images is is like this:
ImageId LoadBmp(string FileName, int red, int green, int blue){
SDL_Surface* image = SDL_LoadBMP(FileName.c_str()); // File is loaded in the SDL_Surface* type variable
GetDisplayError(!image, string("LoadBmp:\n Couldn't load image file ") + FileName); // Check if the file is found
Images.push_back(image); // Send the file to the Images vector
SDL_SetColorKey(Images[Images.size() - 1], SDL_TRUE, // enable color key (transparency)
SDL_MapRGB(Images[Images.size() - 1]->format, red, green, blue)); // This is the color that should be taken as being the 'transparent' part of the image
// Create a texture from surface (image)
SDL_Texture* Texture = SDL_CreateTextureFromSurface(renderer, Images[Images.size() - 1]);
Textures.push_back(Texture);
return Images.size() - 1; // ImageId becomes the position of the file in the vector}
What you would probably looking for is
SDL_SetColorKey(Images[Images.size() - 1], SDL_TRUE, // enable color key (transparency)
SDL_MapRGB(Images[Images.size() - 1]->format, red, green, blue)); // This is the color that should be taken as being the 'transparent' part of the image
by doing so, you set the RGB given to be considered as transparent. Hope this helps! Here's the SDL Ready Template I'm currently working on you should be able to use some of those!
https://github.com/maxijonson/SDL2.0.4-Ready-Functions-Template

Actually we call it Alpha blending and you can look at it here:
http://lazyfoo.net/tutorials/SDL/13_alpha_blending/index.php

Related

PySDL2 display grayscale numpy array on window surface

I have a grayscale image converted into numpy array.
I am trying to render this image on the sdl2 window surface.
sdl2.ext.init()
self.window = sdl2.ext.Window("Hello World!", size=(W, H))
self.window.show()
self.events = sdl2.ext.get_events()
for event in self.events:
if event.type == sdl2.SDL_QUIT:
exit(0)
self.windowsurface = sdl2.SDL_GetWindowSurface(self.window.window)
self.windowArray = sdl2.ext.pixels2d(self.windowsurface.contents)
self.windowArray[:] = frame[:,:,1].swapaxes(0,1)
self.window.refresh()
Right now I see the image in blue form. I want to render it as grayscale image. I have also tried to explore the sdl2.ext.colorpalettes but no success.
How can I display the grayscale numpy array on the sdl2 window surface
I've been playing around with this today, and from what I can tell the reason is a difference in dtypes, the surface is a numpy.uint32 while an image loaded from a gray scale image is only numpy.uint8. so full white in uint8 is 0xff when stored as auin32 it becomes 0x000000ff which is blue.
My dummy approach for testing is some numpy bit shifting:
self.windowArray[:] = self.windowArray[:] + (self.windowArray[:] << 8) + (self.windowArray[:] << 16)
I'm sure there is a better approach but at least it identifies the problem

Animated transition/wipe using SDL2 and black/white mask?

I've been tearing my hair out over how to do this simple effect. I've got an image (see below), and when this image is used in a game, it produces a clockwise transition to black effect. I have been trying to recreate this effect in SDL(2) but to no avail. I know it's got something to do with masking but I've no idea how to do that in code.
The closest I could get was by using "SDL_SetColorKey" and incrementing the RGB values so it would not draw the "wiping" part of the animation.
Uint32 colorkey = SDL_MapRGBA(blitSurf->format,
0xFF - counter,
0xFF - counter,
0xFF - counter,
0
);
SDL_SetColorKey(blitSurf, SDL_TRUE, colorkey);
// Yes, I'm turning the surface into a texture every frame!
SDL_DestroyTexture(streamTexture);
streamTexture = SDL_CreateTextureFromSurface(RENDERER, blitSurf);
SDL_RenderCopy(RENDERER, streamTexture, NULL, NULL);
I've searched all over and am now just desperate for an answer for my own curiosity- and sanity! I guess this question isn't exactly specific to SDL; I just need to know how to think about this!
Arbitrarily came up with a solution. It's expensive, but works. By iterating through every pixel in the image and mapping the colour like so:
int tempAlpha = (int)alpha + (speed * 5) - (int)color;
int tempColor = (int)color - speed;
*pixel = SDL_MapRGBA(fmt,
(Uint8)tempColor,
(Uint8)tempColor,
(Uint8)tempColor,
(Uint8)tempAlpha
);
Where alpha is the current alpha of the pixel, speed is the parameterised speed of the animation, and color is the current color of the pixel. fmt is the SDL_PixelFormat of the image. This is for fading to black, the following is for fading in from black:
if ((255 - counter) > origColor)
continue;
int tempAlpha = alpha - speed*5;
*pixel = SDL_MapRGBA(fmt,
(Uint8)0,
(Uint8)0,
(Uint8)0,
(Uint8)tempAlpha
);
Where origColor is the color of the pixel in the original grayscale image.
I made a quick API to do all of this, so feel free to check it out: https://github.com/Slynchy/SDL-AlphaMaskWipes

Rendering a Glyph to a bitmap image in C++ using SFML

I want to generate a bitmap image of a glyph so that I can compare it to pixel values of unknown letters in another image.
I'm using Visual Studio 2008, my project is in C++ and I'm using SFML. I can load in a font from a ttf file fine, and I tried to do something like:
sf::Font myFont;
myFont.loadFromFile("Path\\arial.ttf");
sf::Texture myTexture = myFont.getTexture(48);
sf::Image textureImage = myTexture.copyToImage();
sf::Glyph myGlyph = myFont.getGlyph(65, 12, false); // get the 'A' glyph
sf::Image glyphImage;
glyphImage.create(myGlyph.bounds.width, myGlyph.bounds.height, sf::Color::White);
glyphImage.copy(textureImage, 0, 0, myGlyph.textureRect);
I believe this doesn't work because I am just creating an image from the part of the texture where the glyph is located, rather than the pixel values of the glyph itself.
Can someone please help?
This works fine for me:
unsigned int size = 20;
sf::Glyph glyph = font.getGlyph('A', size, false);
sf::Texture bitmap = font.getTexture(size);
sf::Image image;
image.create(glyph.bounds.width, glyph.bounds.height);
image.copy(bitmap.copyToImage(), 0, 0, glyph.textureRect);
Note that in this sample the character size is the same when getGlyph and getTexture are called, which was not the case in your code above.
Also, instead of magic number like 65 use 'A' for readability.

How to create one bitmap from parts of many textures (C++, SDL 2)?

I have *.png files and I want to get different 8x8 px parts from textures and place them on bitmap (SDL_Surface, I guess, but maybe not), smth like this:
Now I'm rendering that without bitmap, i.e. I call each texture and draw part directly on screen each frame, and it's too slow. I guess I need to load each *.png to separate bitmap and use them passing video memory, then call just one big bitmap, but maybe I'm wrong. I need the fastest way of doing that, I need code of this (SDL 2, not SDL 1.3).
Also maybe I need to use clear OpenGL here?
Update:
Or maybe I need to load *.png's to int arrays somehow and use them just like usual numbers and place them to one big int array, and then convert it to SDL_Surface/SDL_Texture? It seems this is the best way, but how to write this?
Update 2:
Colors of pixels in each block are not the same as it presented at the picture and also can they be transparent. Picture is just an example.
Assumming you already have your bitmaps loaded up as SDL_Texture(s), composing them into a different texture is done via SDL_SetRenderTarget .
SDL_SetRenderTarget(renderer, target_texture);
SDL_RenderCopy(renderer, texture1, ...);
SDL_RenderCopy(renderer, texture2, ...);
...
SDL_SetRenderTarget(renderer, NULL);
Every render operation you perform between setting your Render Target and resetting it (by calling SDL_SetRenderTarget with a NULL texture parameter) will be renderer to the designated texture. You can then use this texture as you would use any other.
Ok so, when I asked about "solid colour", I meant - "in that 8x8 pixel area in the .png that you are copying from, do all 64 pixels have the same identical RGB value?" It looks that way in your diagram, so how about this:
How about creating an SDL_Surface, and directly painting 8x8 pixel areas of the memory pointed to by the pixels member of that SDL_Surface with the values read from the original .png.
And then when you're done, convert that surface to an SDL_Texture and render that?
You would avoid all the SDL_UpdateTexture() calls.
Anyway here is some example code. Let's say that you create a class called EightByEight.
class EightByEight
{
public:
EightByEight( SDL_Surface * pDest, Uint8 r, Uint8 g, Uint8 b):
m_pSurface(pDest),
m_red(r),
m_green(g),
m_blue(b){}
void BlitToSurface( int column, int row );
private:
SDL_Surface * m_pSurface;
Uint8 m_red;
Uint8 m_green;
Uint8 m_blue;
};
You construct an object of type EightByEight by passing it a pointer to an SDL_Surface and also some values for red, green and blue. This RGB corresponds to the RGB value taken from the particular 8x8 pixel area of the .png you are currently reading from. You will paint a particular 8x8 pixel area of the SDL_Surface pixels with this RGB value.
So now when you want to paint an area of the SDL_Surface, you use the function BlitToSurface() and pass in a column and row value. For example, if you divided the SDL_Surface into 8x8 pixel squares, BlitToSurface(3,5) means the paint the square at the 4th column, and 5th row with the RGB value that I set on construction.
The BlitToSurface() looks like this:
void EightByEight::BlitToSurface(int column, int row)
{
Uint32 * pixel = (Uint32*)m_pSurface->pixels+(row*(m_pSurface->pitch/4))+column;
// now pixel is pointing to the first pixel in the correct 8x8 pixel square
// of the Surface's pixel memory. Now you need to paint a 8 rows of 8 pixels,
// but be careful - you need to add m_pSurface->pitch - 8 each time
for(int y = 0; y < 8; y++)
{
// paint a row
for(int i = 0; i < 8; i++)
{
*pixel++ = SDL_MapRGB(m_pSurface->format, m_red, m_green, m_blue);
}
// advance pixel pointer by pitch-8, to get the next "row".
pixel += (m_pSurface->pitch - 8);
}
}
I'm sure you could probably speed things up further by pre-calculating an RGB value on construction. Or if you're reading a pixel from the texture, you could probably dispense with the SDL_MapRGB() (but it's just there in case the Surface has different pixel format to the .png).
memcpy is probably faster than 8 individual assignments to the RGB value - but I just want to demonstrate the technique. You could experiment.
So, all the EightByEight objects you create, all point to the same SDL_Surface.
And then, when you're done, you just convert that SDL_Surface to an SDL_Texture and blit that.
Thanks to everyone who took part, but we solved it with my friends. So here is an example (source code is too big and unnecessary here, I'll just describe the main idea):
int pitch, *pixels;
SDL_Texture *texture;
...
if (!SDL_LockTexture(texture, 0, (void **)&pixels, &pitch))
{
for (/*Conditions*/)
memcpy(/*Params*/);
SDL_UnlockTexture(texture);
}
SDL_RenderCopy(renderer, texture, 0, 0);

FreeImage: Get pixel color

I'm writing a little application that reads color of each pixel in image and writes it to file. First I did it in Python, buit it's too slow on big images. Then I discovered FreeImage library, which I could use, but I can't understand how to use GetPixelColor method.
Could you please provide an example on how to get color, for example, of pixel[50:50]?
Here is information about GetPixelColor: http://freeimage.sourceforge.net/fnet/html/13E6BB72.htm.
Thank you very much!
With FreeImagePlus using a 24 or 32 bit image, getting the pixel at coords 50, 50 would look like this:
fipImage input;
RGBQUAD pixel;
input.load("myimage.png");
height = in.getHeight();
in.getPixelColor(50, height-1-50, &pixel);
Be aware that in FreeImage the origin is bottom left, so y values will probably need to be inverted by subtracting y from the image height as above.
To get pixel color from an input image: img, from a function call let's say: void read_image(const char* img) follow the below code snippet.
Here is the code snippet for above read_image function:
FREE_IMAGE_FORMAT fif = FreeImage_GetFIFFromFilename(img);
FIBITMAP *bmp = FreeImage_Load(fif, img);
unsigned width = FreeImage_GetWidth(bmp);
unsigned height = FreeImage_GetHeight(bmp);
int bpp = FreeImage_GetBPP(bmp);
FIBITMAP* bitmap = FreeImage_Allocate(width, height, bpp);
RGBQUAD color; FreeImage_GetPixelColor(bitmap, x, y, &color);
variable color will contain the color of the image pixel. You can extract rgb values as follows:
float r,g,b;
r = color.rgbRed;
g = color.rgbGreen;
b = color.rgbBlue;
Hope it helps!