Draw only what's inside a certain shape

[happy11]

Hello, new to SFML and to programming in general.
Im trying to achive an effect where only a certain area around the mouse is visible and the rest is masked.

Something like this -



I went through the documentation of Drawable and Shape and nothing really stood out to me. Does anyone has a solution to this problem?

[Hapax]

A common way to do this is to use a shader. The shader calculates where it is from the point in question and decides whether it should draw the thing or not (or something else like black).
For a shader that can do that with circular regions, you could try this one:
https://github.com/SFML/SFML/wiki/Source%3A-Radial-Gradient-Shader
That can do it. It can also add a gradient (light fall-off if considered a visible area) to the edge, smoothing the appearing and giving the impression that it's less clear at a distance (from the point).

Some other ways will use a render texture.

For example, you can draw the shape - in white on black - of what you want to be visible on a render texture that will be drawn over the entire window (so, it's a white/black mask) and the draw the render texture to the window with multiple blend and the white bits will remain and the black bit will become black.

You can also draw to that render texture with alpha instead of white/black and use that in the blend instead. This way you can use the alpha of images.

Also, you can draw everything to the render texture, then apply the mask, and only then draw the render texture to the window.

An example of this in use to 'clip' a specific image to another image is shown in this post:
https://en.sfml-dev.org/forums/index.php?topic=19505.msg140615#msg140615

[happy11]

A common way to do this is to use a shader. The shader calculates where it is from the point in question and decides whether it should draw the thing or not (or something else like black).
For a shader that can do that with circular regions, you could try this one:
https://github.com/SFML/SFML/wiki/Source%3A-Radial-Gradient-Shader
That can do it. It can also add a gradient (light fall-off if considered a visible area) to the edge, smoothing the appearing and giving the impression that it's less clear at a distance (from the point).

Some other ways will use a render texture.

For example, you can draw the shape - in white on black - of what you want to be visible on a render texture that will be drawn over the entire window (so, it's a white/black mask) and the draw the render texture to the window with multiple blend and the white bits will remain and the black bit will become black.

You can also draw to that render texture with alpha instead of white/black and use that in the blend instead. This way you can use the alpha of images.

Also, you can draw everything to the render texture, then apply the mask, and only then draw the render texture to the window.

An example of this in use to 'clip' a specific image to another image is shown in this post:
https://en.sfml-dev.org/forums/index.php?topic=19505.msg140615#msg140615

ah shaders... I'll have to learn more about them if I want to use them.
Will it also work when I use Sprite objects and other textured objects?

I think shaders are something that is directly linked to vertex arrays.

[Hapax]

Ah. The shader I mentioned will only work with untextured objects.
It could be adjusted to work with textured objects but if you're new to shaders, this is a big ask.
Maybe one day, I'll make a version for textured objects; I didn't really think about that previously...

The render texture approaches are solid ways to do it. I'd likely do it one of those ways myself just because it's more obvious what you're doing (and render textures are cool once you get used to them!)

[happy11]

Ah. The shader I mentioned will only work with untextured objects.
It could be adjusted to work with textured objects but if you're new to shaders, this is a big ask.
Maybe one day, I'll make a version for textured objects; I didn't really think about that previously...

The render texture approaches are solid ways to do it. I'd likely do it one of those ways myself just because it's more obvious what you're doing (and render textures are cool once you get used to them!)

I see, thank you!