Get Image of rotated sprite

[dunkha]

Hi,

how to get rotated Image with rotated pixel map after rotating a sprite? It looks like if I rotate a sprite and then copy the image of the texture belonging to the sprite the pixels in the image are not correct. All the pixels return the color of the rectangle. It's like the image was just resized to fit the new rotated rectangle. But that can't really be the case? There must be some way how SFML draws the pixels to the screen. I just don't know how it's done.

Sprite sprite;
sprite.rotate(45);
Image img = sprite.getTexture()->copyToImage();

// loop through the image
// lets pretend that the sprite is at position (0, 0) here all the time
for (int i = 0; i < sprite.getGlobalBounds().width; i++) {
    for (int j = 0; j < sprite.getGlobalBounds().height; j++) {
        // all the pixels return the color of the rectangle
        std::cout << unsigned(img.getPixel(i, j).a); << std::endl;
    }
}

// I just quickly wrote this code here. There might be some errors but I hope you get the idea
 

I added an image as an attachment to demonstrate this. There areas A should not return the color value of the rectangle while the area B should return.

I bet there is some really simple thing I'm missing here.

[AFS]

Check this line:

Image img = sprite.getTexture()->copyToImage();
 

You are getting an image of the texture of the sprite, not an image of the rotated sprite itself. That's why it's not working.
 
What you could try is to render the sprite on a RenderTexture, and get the image from there. Something like the following:

// ...

sprite.rotate(45);
int width = sprite.getGlobalBounds.width;
int height = sprite.getGlobalBounds.height;

sf::RenderTexture renderTexture;
renderTexture.create( width, height );
renderTexture.clear( sf::Color::White );
renderTexture.draw( sprite );
renderTexture.display();

sf::Image img = renderTexture.getTexture().copyToImage();

// Rest of your code here...
 

I haven't tested the code, so there may be some errors.

Let me know how it goes.

[dunkha]

Hello,

thanks for the reply and sorry it took me so long. I have not had time to continue my project lately.

I tried your code but I ended up with the same result. I get the same color from each one of the pixels even though I rotate the image. In my case it is white 255.

I'm actually using png-images with transparent background. Does that mean the image doesn't hold any pixels for the transparent coordinates? In that case I could add some background color and mask it off. I know it's possible. I'm going to try it.

Edit: Actually, that can't be the case because it should not return value 255 then. Perhaps it should return value 0 because of reading a value from a coordinate that doesn't hold any pixel. I'm using the sprite height and width to go through the pixels. I have confirmed that the size of the sprite does change when rotating the sprite.

[eXpl0it3r]

"No pixel" is not a thing. Every pixel in SFMK is represented as RGBA. Notice the 'A' which represents the alpha value, i.e. transparency. Now any color can be transparent, be it black, white, green, yellow, as long as you set the alpha value to 255, you'll get a fully transparent color.

[dunkha]

"No pixel" is not a thing. Every pixel in SFMK is represented as RGBA. Notice the 'A' which represents the alpha value, i.e. transparency. Now any color can be transparent, be it black, white, green, yellow, as long as you set the alpha value to 255, you'll get a fully transparent color.

Thank you for the reply. Yes, I see. We are talking about alpha value here not rgb value. I was talking nonesense there with png images

I ran some more tests. It turned out that if I copy the image from RenderTexture I will get the transformed image. At least, the image size is the same as that of rectangle and I noticed that if I copied the image from my texture of the sprite the image size remained the original size (not including transformation). But still I got problems and I think it is because of this:

renderTexture.clear( sf::Color::White );

This seems to fill the entire texture with white color. Not just the rectangle inside the texture and that's why I get alpha value 255 from each of the pixels. I tried to change the color parameter to:

sf::Color(0, 0, 0, 0)

But then the whole rectangle is filled with color(0, 0, 0, 0) (transparent black). It doesn't seem to help if I draw the sprite to the texture after clearing it. So now I should somehow clear the rectangle and then draw the sprite to it so that it would include the pixels of the rectangle.

[Hapax]

I presume that AFS suggested to fill the colour with white as your example image shows it on a white background.

As you mentioned, the way to have a transparent background on a render texture is to clear it with a transparent colour (any). You can use sf::Color::Transparent for this (it is transparent black).
You can then draw onto that, display it and then use it as a texture to draw elsewhere and the transparent parts should remain.
What went wrong when you tried this? What was your code for this?

[dunkha]

Hello, it's been a while since I have had time to work on this problem. Such a big delay but here I go again and I'm still struggling with this problem. Something fundamental is still wrong and I got something to show now. Here I am trying to print each of the pixels of my rectangle:

// Here "a" is the sprite
sf::RenderTexture renderTexture;
renderTexture.create(a.getGlobalBounds().width, a.getGlobalBounds().height);
renderTexture.clear(sf::Color(0, 0, 0, 0));
renderTexture.draw(a);
renderTexture.display();

// Then I pass the sprite and the image of the renderTexture to a method inside another class...
// I stripped the method to show only important stuff

sf::Rect<float> rect = sprite.getGlobalBounds();
unsigned rprint = 0;

for (int i = 0; i < rect.width; i++) {
    for (int j = 0; j < rect.height; j++) {
        // If alpha value of the pixel is greater than 0 print 1 else print 0
        rprint = unsigned(img.getPixel(i, j).a) > 0 ? 1 : 0;

        // a boolean that is true only if P was pressed just to avoid prints no needed
        if (doprint) {
            std::cout << rprint << std::ends;
        }
    }

    std::cout << "" << std::endl;
}

And here is what I get from the print if the rectangle (100x100) is rotated (the rotated size was about 138x138):

0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010

As you can see only some of the pixels at the edges of the rectangle seems to be holding alpha value greater than 0 which should be impossible. What's wrong?

[Laurent]

What is "sprite"? What is "img"? We have no idea where the variables you're printing come from, so it's hard to help you.

[dunkha]

Sorry,

img is the image of the render texture and the sprite is the original sprite "a". Names are different because the code is inside another method.

Here is how I create the image:

renderTexture.getTexture().copyToImage() and pass it to the method for printing. The Sprite a I pass there like it is.

Anyway, I just noticed that this line:
renderTexture.clear(sf::Color(0, 0, 0, 0));
clears the whole texture with alpha value 0. I tried to change it to:
renderTexture.clear(sf::Color::Blue);.

So it seems that clear is just filling the texture and doesn't really care about alpha values of the sprite. I'm not sure why I still got some strange differing values at the edges of the image.

Edit: The strange values at the edges of the sprite obviously are out of bounds of the image because the rotated rectangle width and height have some decimals. I should round down the width and height when looping through the pixels. Anyway, I still got the problem with alpha values.

New Edit: This call should draw the rectangle into the texture but it doesn't seem to be happening:
renderTexture.draw(a);
So everything was correct in the first place when I cleared the texture with transparent. But for some reason nothing is drawn to the texture or at least it looks like that when looping through the pixels.

[dunkha]

I was able to solve the missing pixels problem. First, I made a little change how I draw the sprite to the window. I now create new sprite from the render texture and then draw the created sprite to window like this:

sf::Sprite c(renderTexture.getTexture());
window.draw(c);

Earlier it was like this:

window.draw(a);

where I drew the original sprite to the window.

After the change I noticed the whole sprite was not drawn to the window or it was but there was nothing to show. Empty pixels were drawn to the window.

After some tests I was able to find out that when I draw sprite to render texture it is not drawn according to the dimension of the sprite but according to the dimension of the window. I tested it by changing the size of the render texture to 600x600 and now I can see the rectangle drawn to the window. I added a screenshot to demonstrate this.

To fix this I should control how the sprite is drawn to the render texture. What part is drawn but all I can do is to control the size of the render texture and the position of the sprite. I can't control which part of the sprite is drawn to the render texture or maybe I could somehow I just don't know how. Another way to solve the problem would be to create a render texture size of the window and only loop the part of the image the rectangle of the sprite is in but that would not be effective way because I should always create a new image size of the window.

[dunkha]

Finally I was able to solve the last piece of the puzzle. I had to add these lines to tell the render texture where should it draw the sprite:

sf::View view(a.getGlobalBounds());
renderTexture.setView(view);

Now instead of drawing the sprite from coordinates 0, 0 it is drawn from the coordinates where the sprite is located. My pixel perfect collision detection is now working and next it is time for optimisation. Thanks for all the help and especially AFS who helped me to get to the right track to solve this problem.

If someone is reading this topic to solve a problem similar to mine I must say that the code presented in the topic has changed quite a bit from the beginning and is not valid anymore. However, I can help. Just leave a reply to the topic.