Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Own window design from .png with shadows  (Read 5126 times)

0 Members and 1 Guest are viewing this topic.

chadushkind

  • Newbie
  • *
  • Posts: 10
    • View Profile
Own window design from .png with shadows
« 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.
« Last Edit: March 05, 2016, 11:06:30 am by chadushkind »

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10234
    • View Profile
    • development blog
    • Email
Re: Own window design from .png with shadows
« Reply #1 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.
Official FAQ: https://www.sfml-dev.org/faq.php
Nightly Builds: https://www.nightlybuilds.ch/
——————————————————————
Dev Blog: https://dev.my-gate.net/
Thor: http://www.bromeon.ch/libraries/thor/

chadushkind

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Own window design from .png with shadows
« Reply #2 on: March 04, 2016, 09:42:14 pm »
For example.

What I want:


What I got:

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10234
    • View Profile
    • development blog
    • Email
AW: Own window design from .png with shadows
« Reply #3 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?
Official FAQ: https://www.sfml-dev.org/faq.php
Nightly Builds: https://www.nightlybuilds.ch/
——————————————————————
Dev Blog: https://dev.my-gate.net/
Thor: http://www.bromeon.ch/libraries/thor/

chadushkind

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Own window design from .png with shadows
« Reply #4 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.

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10234
    • View Profile
    • development blog
    • Email
AW: Own window design from .png with shadows
« Reply #5 on: March 04, 2016, 11:02:49 pm »
Can you post the image in question and the code you're using?
Official FAQ: https://www.sfml-dev.org/faq.php
Nightly Builds: https://www.nightlybuilds.ch/
——————————————————————
Dev Blog: https://dev.my-gate.net/
Thor: http://www.bromeon.ch/libraries/thor/

chadushkind

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Own window design from .png with shadows
« Reply #6 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.

victorlevasseur

  • Full Member
  • ***
  • Posts: 206
    • View Profile
Re: Own window design from .png with shadows
« Reply #7 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.

chadushkind

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Own window design from .png with shadows
« Reply #8 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.

victorlevasseur

  • Full Member
  • ***
  • Posts: 206
    • View Profile
Re: Own window design from .png with shadows
« Reply #9 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.
« Last Edit: March 05, 2016, 11:45:38 am by victorlevasseur »

chadushkind

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Own window design from .png with shadows
« Reply #10 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. :-(

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10234
    • View Profile
    • development blog
    • Email
Re: Own window design from .png with shadows
« Reply #11 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.
Official FAQ: https://www.sfml-dev.org/faq.php
Nightly Builds: https://www.nightlybuilds.ch/
——————————————————————
Dev Blog: https://dev.my-gate.net/
Thor: http://www.bromeon.ch/libraries/thor/

chadushkind

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Own window design from .png with shadows
« Reply #12 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?

G.

  • Hero Member
  • *****
  • Posts: 1560
    • View Profile
Re: Own window design from .png with shadows
« Reply #13 on: March 05, 2016, 06:24:00 pm »
I think you can take a look (or use) at Texus's Code

texus

  • Sr. Member
  • ****
  • Posts: 486
    • View Profile
    • TGUI
    • Email
Re: Own window design from .png with shadows
« Reply #14 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).
« Last Edit: March 07, 2016, 12:59:02 am by texus »
TGUI: C++ SFML GUI