SFML community forums

Help => Window => Topic started by: chadushkind on March 04, 2016, 07:13:28 pm

Title: Own window design from .png with shadows
Post by: chadushkind on March 04, 2016, 07:13:28 pm
Hello guys.

1) I have a .psd design and some layers of it uses blending mode with shadows.
2) I create a .png of background image which takes layers with shadow.
3) I create a window that has "sf::Style::None" style.

And as result I taking the window where shadows of background image replaced by black pixels.

What i do in my code:
1) Create window with "sf::Style::None".
2) Load background-image to sf::Image, load image to sf::Texture, and create sf::Sprite from this texture.

Also it all looks like very bold border around image.

Thanks for answers.
Title: Re: Own window design from .png with shadows
Post by: eXpl0it3r on March 04, 2016, 07:33:28 pm
I'm not sure, but are you trying to create a partially transparent window? That is unfortunately not supported directly through SFML.
Title: Re: Own window design from .png with shadows
Post by: chadushkind on March 04, 2016, 09:42:14 pm
For example.

What I want:
(http://i.imgur.com/Ci2DHRt.png?1)

What I got:
(http://i.imgur.com/CgYhsu6.png)
Title: AW: Own window design from .png with shadows
Post by: eXpl0it3r on March 04, 2016, 10:31:01 pm
Feels like you've exported that wrong. What if you open the PNG in an image viewing tool?
Title: Re: Own window design from .png with shadows
Post by: chadushkind on March 04, 2016, 10:45:46 pm
Viewer Program shows image with shadows. All is fine. I also tried saving .png as "Export for Web -> PNG 24 bit"(photoshop) menu option, but it too didn't work.
Title: AW: Own window design from .png with shadows
Post by: eXpl0it3r on March 04, 2016, 11:02:49 pm
Can you post the image in question and the code you're using?
Title: Re: Own window design from .png with shadows
Post by: chadushkind on March 04, 2016, 11:16:36 pm
#include <SFML/Graphics.hpp>
#include <Windows.h>

int CALLBACK WinMain(
        _In_ HINSTANCE hInstance,
        _In_ HINSTANCE hPrevInstance,
        _In_ LPSTR     lpCmdLine,
        _In_ int       nCmdShow
        )
{
        // window
        sf::RenderWindow Window(sf::VideoMode(300, 400), "Window", sf::Style::None);

        sf::Vector2i mousePos;  // mouse coordinates relatively of window

        bool grabbedWindow = false;
        sf::Vector2i grabbedOffset;                                                                            
        sf::IntRect TaskBar(10, 24, (int)Window.getSize().x-10, 25);    // pseudo title bar

        // get image
        sf::Image imgBackground;
        imgBackground.loadFromFile("/path/to/image");

        // background image
        sf::Texture txBackground;
        sf::Sprite sprBackground;
        txBackground.loadFromImage(imgBackground);
        sprBackground.setTexture(txBackground);

        sf::Event Event;
        while(Window.isOpen())
        {
                mousePos = sf::Mouse::getPosition(Window);

                // events
                while(Window.pollEvent(Event))
                {
                        // closing
                        if(Event.type == sf::Event::Closed || (Event.type == sf::Event::KeyPressed && Event.key.code == sf::Keyboard::Escape))
                                Window.close();

                        // LMB
                        else if(Event.type == sf::Event::MouseButtonPressed && Event.mouseButton.button == sf::Mouse::Left)
                        {
                                // title bar contains mouse
                                if(TaskBar.contains(mousePos))
                                {
                                        grabbedOffset = Window.getPosition() - sf::Mouse::getPosition();
                                        grabbedWindow = true;
                                }
                        }
                        // LMB
                        else if(Event.type == sf::Event::MouseButtonReleased && Event.mouseButton.button == sf::Mouse::Left)
                        {
                                if(TaskBar.contains(mousePos))
                                        grabbedWindow = false;
                        }

                }
               
                if(grabbedWindow)
                        Window.setPosition(sf::Mouse::getPosition() + grabbedOffset);

                Window.clear(sf::Color::Transparent);
                Window.draw(sprBackground);
                Window.display();
        }
}

/path/to/image - whatever .png image with outer shadows and without background color. I posted an example up in this thread.
Title: Re: Own window design from .png with shadows
Post by: victorlevasseur on March 05, 2016, 09:23:12 am
Window.clear(sf::Color::Transparent);
I think this color is the problem. If you changes it to White or Black the sprite's transparency will probably work.
Title: Re: Own window design from .png with shadows
Post by: chadushkind on March 05, 2016, 11:05:00 am
Window.clear(sf::Color::Transparent);
I think this color is the problem. If you changes it to White or Black the sprite's transparency will probably work.

No, it's only fill the window by specific color.
Title: Re: Own window design from .png with shadows
Post by: victorlevasseur on March 05, 2016, 11:39:28 am
Did you try ?

The problem is that the background color of the window is set to transparent so sprites seem not able to apply their alpha.
By the way, setting the background color to transparent will not let you see through the window.
Title: Re: Own window design from .png with shadows
Post by: chadushkind on March 05, 2016, 12:03:01 pm
Yes, I did. With window filled by color shadows is like on image. But I don't need to have background color. :-(
Title: Re: Own window design from .png with shadows
Post by: eXpl0it3r on March 05, 2016, 01:03:32 pm
As I already said...

I'm not sure, but are you trying to create a partially transparent window? That is unfortunately not supported directly through SFML.
Title: Re: Own window design from .png with shadows
Post by: chadushkind on March 05, 2016, 01:14:44 pm
As I already said...

I'm not sure, but are you trying to create a partially transparent window? That is unfortunately not supported directly through SFML.

Ok, it's called partially transparent window. If SFML don't support it, can I do create this through winapi's "Layered Windows"? Somebody know good articles?
Title: Re: Own window design from .png with shadows
Post by: G. on March 05, 2016, 06:24:00 pm
I think you can take a look (or use) at Texus's Code (http://en.sfml-dev.org/forums/index.php?topic=18337)
Title: Re: Own window design from .png with shadows
Post by: texus on March 05, 2016, 06:45:28 pm
The code that I wrote will only work when the entire window has the same transparency.

This looks interesting: http://duckmaestro.com/2010/06/06/per-pixel-alpha-blending-in-win32-desktop-applications/
I haven't really looked at it but in the end it says that per pixel transparency should be possible when using UpdateLayeredWindow while SetLayeredWindowAttributes (which is used in my code) only works for uniform transparency. So maybe you can get it working with the code they show in that article.

I'll probably look into it in more detail myself tomorrow and see if I can update my windows code to support this.

Edit: I just got the per pixel transparency working. If I find the time tomorrow I will clean up the code and put it here. It will of course only work on windows and the image can only be set once (the window contents is loaded from the image, no drawing can be done by sfml with the current implementation).
Title: Re: Own window design from .png with shadows
Post by: texus on March 07, 2016, 02:56:30 pm
Here is the code you need:
(click to show/hide)

The attached result.png shows how it looks when running the program.
Title: Re: Own window design from .png with shadows
Post by: chadushkind on March 07, 2016, 07:55:30 pm
Works perfect! Thank you very much. But can you explain about BLENDFUNCTION, DC, BITMAPS, etc. or give a good article about it all? And why UpdateLayeredWindow need to call not in cycle?
Title: Re: Own window design from .png with shadows
Post by: texus on March 07, 2016, 08:12:15 pm
I can't give a good explanation on these things since I barely know enough myself to get it working.
If you just want to know how a specific structure or function looks like you should check the MSDN documentation, everything is explained in detail there.

Quote
And why UpdateLayeredWindow need to call not in cycle?
That is just how it works. By calling that function you are basically giving control of the rendering to windows.