Does Axmol Support Masking with Opacity?

[TyelorD]

One of the big limitations of the CCClippingNode on Cocos2d-x is the fact that the mask's transparency is only used for a threshold, and doesn't actually affect the translucency of the things being masked.

I was curious if AXYS supported this rendering technique, as it would be quite useful for certain applications, as well as making things like circle masks look much better by handling the anti-aliasing of the circle clipping mask properly.

Thanks for your time!
Tyelor K.

[aismann]

@TyelorD,
have you an example for understanding what you mean?
Maybe you can add a cpp-test example plz?

[TyelorD]

Edit: Ugh, the images didn't upload properly so I have to fix it really quick...

I'm not sure an example would help in this case, it would just show a masked sprite with aliased edges, when the intention would be to support masks with transparency.

For example, assume you have a simple gradient from fully opaque to fully translucent that you'd like to use for a clipping mask. In all versions of Cocos2d-x, you'd give it an "alpha threshold" which determines the alpha value at which the mask turns on/off the textures it's clipping. Assuming a linear gradient, and a value of 0.5f, this would simply mean that half of the image is masked entirely, and the other half is entirely visible (i.e. no semi-transparent pixels for the masked sprite, it'd simply be half the image is there and half the image isn't).

What I was asking is if a shader was written for AXYS that solves this problem by using the mask's alpha values to modify the translucency of the masked textures.

Hopefully this picture better explains what I'm asking for:
Example Mask:

Example Clipped Texture:

Assuming an alpha threshold of 0.5f, Cocos renders the following as such:

This is what I'm asking if AXYS supports, and the preferred result (doesn't require any "alpha threshold"):

Hope this helps to explain what I'm asking a bit better! :)

[aismann]

You should create your own shader. Thats all.
Not realy an axys issue i belive.

[TyelorD]

Not realy an axys issue i belive.

You're right, it's not an issue nor a bug. It's a feature that I was wondering if AXYS supports. I'd assume it's a fairly simple shader to write, and was simply hoping that someone already did. In most other game engines this kind of shader is built in as a part of their masking and clipping solutions, and so I was hoping that someone did the same for AXYS.

Edit: I will admit, while not being a bug, it does feel like one. Especially when you try to clip any texture using large rounded shapes like circles and ovals. You'll see very ugly, hard stair-casing (aliasing) rounded edges on the rendered output. A better clipping solution, with a properly written shader, would eliminate this issue and allow us to use anti-aliased rounded shapes for masks.

Edit 2: I attempted to create this fragment shader for a couple hours today in-between work tasks, but was unable to get anywhere with it. It seems like we have no proper way in Cocos to bind the clipping mask texture to the Fragment Shader, in order to be able to multiply its opacity by the opacity of the clipped texture and check that for discarding. In addition I think the blending mode for the ClippingNode might need to be different to allow for the output color in the fragment shader to be blended with the output pixel, otherwise based on OpenGL's documentation I believe the alpha value would get lost.

If anyone knows more about this issue, has written the shader themselves and would like to share it, or wants to help me out, then I'd love to see your response! I hope to solve this in a way where the current behavior for ClippingNode is intact, but that it also handles opacity masking properly, as in the images I showed above.

[aismann]

@TyelorD
Are you think "your answer is the answer"? Plz set the answer flag on it. Thanks.

[TyelorD]

The answer is: no.

If I have enough time, and figure it out I'll post the shader and code changes needed to support this feature and update this answer.