Sprite mask reduces opacity

[Bubble]

Hi, I’m using the sprite masking extension for the first time. I have an object that will have a shadow but I only want the shadow to be visible on the platform, not in the air.

I know there’s shadow clone and reflection extensions but I need to be able to adjust the angle of the shadow to match the angle of the platform so I’m making my own shadow.

The next pic shows the scene editor with a yellow platform with a green fake platform behind it acting as the object mask. It’s not in alignment for the pic to make sense.

When I have the object mask on, the shadow object goes to about 50% opacity as shown in the bottom left. Is this meant to happen?

Then on the bottom right there’s a pic of the shadow object without the mask. Because it’s a shadow the reduced opacity is okay but I’d rather be able to control it myself.

So, is this reduced opacity expected behavior or is there something wrong? The ball is a physics object but I got the same opacity thing with a top down movement object.

[Drona]

Hi Bubble,

It seems the color of the sprite is the reason for that.

This is my setup: a yellow rectangle with a red and a blue circle:

This is what happens when I use the blue sprite:

and this, when I use the red sprite:

[E1e5en]

Hi!
The color of the mask sprite should be red.

[Bubble]

@Drona

when I use the red sprite:

@E1e5en

The color of the mask sprite should be red

Wow, red works! But I don’t understand how you could know that. It’s not mentioned in the documentation or the configuration. And in an example from a while back, @MrMen used a white mask with, I assume, no problems.

I need help. How do I create a menu in a vertical slider?

I’ve hacked the very basics of a vertical sliding menu using 2 extensions - Sprite Mask and DraggableSliderControl. Here’s what it all looks like : [ScrollingMenu] and here’s how to achieve it : Add SpirteMasking and DraggableSliderControl to your project : [image] Create an object group and place all the menu option objects in this group. I called mine MaskAffected : [image] Add a white sprite. I called mine TheMask. Add an extra layer. I called mine NonMovingLayer. On the base la…

[Drona]

@Bubble

Wow, red works! But I don’t understand how you could know that.

I just noticed that while reading through the forum, for example in Silver-Streak’s reply here:

[Solved] Is there such a thing as image masks (not for collision)

There is a mask extension in the extensions list. By using a red sprite you can mask other parts of another sprite.

When you opened this topic I thought the problem may occur because of the color of the sprite and checked it.

[Bubble]

I did a bit of searching to get more info on masks needing to be red and now I’m even more confused. A year after that post, there was this one that I think I understand from the author of the extension:

Text Masking doesn't work

That’s not how the mask works. The mask will not be displayed, so you need to make it a separate sprite than the background, and the section that should be displayed should be red.

And later on in the same thread:

Text Masking doesn't work

The mask doesn’t have to be red. Just needs to be any solid color. In my example it is orange, but I have also used black and white.

Has something changed? If it does need to be red, then can that instruction be put in the extension description?

[E1e5en]

There is nothing more precise than an experiment
Options:

Result:

[Onomatopoesie]

I was wondering the exact same thing and did a little research. GDevelop uses the PIXI renderer. The documentation says the following about it: For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask. (PixiJS API Documentation)
So the red channel can be used to make an image transparent or partially transparent.
Here is an example:
The following mask is used on the sprite. I used five rectangles with the following values in RGBA: (255,0,0,255), gradient (255,0,0,255) to (0,0,0,255), gradient with the color blue and gradient with the color red to alpha 0 and as comparison a rectangle with the color magenta.
And this is how the result looks like.

So you can use white or also magenta, because both have the red channel with the value 255! It is always about the red channel.
I hope this hint was helpful and also helps others who deal with this extension.