Non-rectangular semi-transparent window

[texus]

This is just some code that I wanted to share.
It loads an image from a file and will give the window the shape of that image. You can also set the opacity of the window.

I only wrote code for Windows and Linux. I will try to have a look at OS X next month. In case I update the code you can find it on github.

Edit: The code now works on Windows, Linux and Mac.
On mac you have to compile both files, on windows and linux just Transparent.cpp.
On windows you only need the sfml libraries, on linux you also have to add "-lX11 -lXext" to the linker flags and on mac you should add "-framework Cocoa".

Transparent.cpp:

(click to show/hide)

#include <SFML/Graphics.hpp>

#if defined (SFML_SYSTEM_WINDOWS)
    #include <windows.h>

    bool setShape(HWND hWnd, const sf::Image& image)
    {
        const sf::Uint8* pixelData = image.getPixelsPtr();
        HRGN hRegion = CreateRectRgn(0, 0, image.getSize().x, image.getSize().y);

        // Determine the visible region
        for (unsigned int y = 0; y < image.getSize().y; y++)
        {
            for (unsigned int x = 0; x < image.getSize().x; x++)
            {
                if (pixelData[y * image.getSize().x * 4 + x * 4 + 3] == 0)
                {
                    HRGN hRegionDest = CreateRectRgn(0, 0, 1, 1);
                    HRGN hRegionPixel = CreateRectRgn(x, y, x+1, y+1);
                    CombineRgn(hRegionDest, hRegion, hRegionPixel, RGN_XOR);
                    DeleteObject(hRegion);
                    DeleteObject(hRegionPixel);
                    hRegion = hRegionDest;
                }
            }
        }

        SetWindowRgn(hWnd, hRegion, true);
        DeleteObject(hRegion);
        return true;
    }

    bool setTransparency(HWND hWnd, unsigned char alpha)
    {
        SetWindowLong(hWnd, GWL_EXSTYLE, GetWindowLong(hWnd, GWL_EXSTYLE) | WS_EX_LAYERED);
        SetLayeredWindowAttributes(hWnd, 0, alpha, LWA_ALPHA);
        return true;
    }

#elif defined (SFML_SYSTEM_LINUX)
    #include <X11/Xatom.h>
    #include <X11/extensions/shape.h>

    bool setShape(Window wnd, const sf::Image& image)
    {
        const sf::Uint8* pixelData = image.getPixelsPtr();
        Display* display = XOpenDisplay(NULL);

        // Try to set the window shape
        int event_base;
        int error_base;
        if (XShapeQueryExtension(display, &event_base, &error_base))
        {
            Pixmap pixmap = XCreatePixmap(display, wnd, image.getSize().x, image.getSize().y, 1);
            GC gc = XCreateGC(display, pixmap, 0, NULL);

            XSetForeground(display, gc, 1);
            XFillRectangle(display, pixmap, gc, 0, 0, image.getSize().x, image.getSize().y);
            XSetForeground(display, gc, 0);

            for (unsigned int y = 0; y < image.getSize().y; y++)
            {
                for (unsigned int x = 0; x < image.getSize().x; x++)
                {
                    if (pixelData[y * image.getSize().x * 4 + x * 4 + 3] == 0)
                        XFillRectangle(display, pixmap, gc, x, y, 1, 1);
                }
            }

            XShapeCombineMask(display, wnd, ShapeBounding, 0, 0, pixmap, ShapeSet);
            XFreePixmap(display, pixmap);
            XFreeGC(display, gc);
            XFlush(display);
            return true;
        }
    }

    bool setTransparency(Window wnd, unsigned char alpha)
    {
        Display* display = XOpenDisplay(NULL);
        unsigned long opacity = (0xffffffff / 0xff) * alpha;
        Atom property = XInternAtom(display, "_NET_WM_WINDOW_OPACITY", false);
        if (property != None)
        {
            XChangeProperty(display, wnd, property, XA_CARDINAL, 32, PropModeReplace, (unsigned char*)&opacity, 1);
            XFlush(display);
            return true;
        }
        else
            return false;
    }

    #undef None // None conflicts with SFML
#elif defined (SFML_SYSTEM_MACOS)
    bool setShape(sf::WindowHandle handle, const sf::Image& image);
    bool setTransparency(sf::WindowHandle handle, unsigned char alpha);
#else
    bool setShape(sf::WindowHandle handle, const sf::Image& image)
    {
        return false;
    }

    bool setTransparency(sf::WindowHandle handle, unsigned char alpha)
    {
        return false;
    }
#endif

int main()
{
    // Change this to the wanted transparency
    const unsigned char opacity = 185;

    // Load an image with transparent parts that will define the shape of the window
    sf::Image backgroundImage;
    backgroundImage.loadFromFile("image.png");

    // Create the window and center it on the screen
    sf::RenderWindow window(sf::VideoMode(backgroundImage.getSize().x, backgroundImage.getSize().y, 32), "Transparent Window", sf::Style::None);
    window.setPosition(sf::Vector2i((sf::VideoMode::getDesktopMode().width - backgroundImage.getSize().x) / 2,
                                    (sf::VideoMode::getDesktopMode().height - backgroundImage.getSize().y) / 2));

    // These functions return false on an unsupported OS or when it is not supported on linux (e.g. display doesn't support shape extention)
    setShape(window.getSystemHandle(), backgroundImage);
    setTransparency(window.getSystemHandle(), opacity);

    // We will also draw the image on the window instead of just showing an empty window with the wanted shape
    sf::Texture backgroundTexture;
    sf::Sprite backgroundSprite;
    backgroundTexture.loadFromImage(backgroundImage);
    backgroundSprite.setTexture(backgroundTexture);

    // Main loop to display the image while the window is open (pressing the escape key to close the window)
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed || (event.type == sf::Event::KeyPressed && event.key.code == sf::Keyboard::Escape))
                window.close();
        }

        window.clear(sf::Color::Transparent);
        window.draw(backgroundSprite);
        window.display();
    }

    return 0;
}
 

Transparent.mm (only needed on mac)

(click to show/hide)

#include <SFML/Graphics.hpp>
#import <Cocoa/Cocoa.h>

@implementation NSOpenGLView (Opaque)
-(BOOL)isOpaque
{
    return NO;
}
@end

bool setShape(sf::WindowHandle handle, const sf::Image& image)
{
    NSWindow* wnd = (NSWindow*)handle;

    GLint opaque = 0;
    [[[wnd contentView] openGLContext] setValues:&opaque forParameter:NSOpenGLCPSurfaceOpacity];
    [wnd setBackgroundColor:[NSColor clearColor]];
    [wnd setOpaque:NO];

    return true;
}

bool setTransparency(sf::WindowHandle handle, unsigned char alpha)
{
    NSWindow* wnd = (NSWindow*)handle;

    CGFloat opacity = alpha / 255.0f;
    [wnd setAlphaValue:opacity];
    [wnd setOpaque:NO];

    return true;
}

Result:

[zmertens]

That's pretty neat!

[Mario]

You should split that code, one for the non-rectangular shape, one for alpha transparency.

[texus]

Good idea. While developing I needed them together on linux while I was trying various methods to get it working, but in this finished version they have indeed became independent.

[texus]

I found some time already to add support for Mac OS X. Check github for the updated code.

There is one problem though. In order to make the non-rectangular window work I also had to make a change inside SFML. I had to add the following function in the SFOpenGLView class:

-(BOOL)isOpaque {
    return NO;
}

Without that change the window can only be semi-transparent and will not get the custom shape on mac.

[Hiura]

Can you try adding in your .mm file something like that:

@implementation SFOpenGLView (Opaque)
-(BOOL)isOpaque { return NO; }
@end

Does it work?

Override a method via ObjC Category

[texus]

No, it just gives me the error that no interface declaration can be found for 'SFOpenGLView'.

[texus]

I got it working. Instead of overriding the function of SFOpenGLView like that (for which the declaration isn't public), I could just override the one in NSOpenGLView. Thanks for the advice.

[Hiura]

Brilliant! 

[dwarfman78]

Is it possible to add it to SFML as a standard feature in the next release ?