CC 2.4.11 - Render Texture: Opacity Issue

Cocos Creator
#1

Hi,

I’ve been having issues with opacity and Render Textures in CC 2.4.11 which I don’t know how to solve.
No matter how I configure the cameras I cannot get it to work correctly, there is always something that doesn’t work. I’ve tried so many different combinations.

I have created a very easy to understand demo project showing how it behaves and it’s easy from this demo to swap things around, create new cameras etc.:
2-4-11-RT-Camera.zip (916.6 KB)

Please, if anyone has any ideas on how to get render textures to work correct with opacity please let me know, because I’m completely stuck :frowning:.

Thank you so much for your time and help, it’s very much appreciated!

#2

Why not open clearFlags Color? After opening, the transparency can be changed normally

#3

Thanks for your response @zzf_Cocos.

Did you download the demo, in the demo I show with clearFlags: Color ON and OFF. Both have different issues.

You can see that with ON (example 1 in demo) → You have issues with opacity, it has more opacity than it should.

You can see that with OFF (example 2 in demo) → You have correct opacity but cannot fade something out completely.

Please check the demo, it should explain the situation pretty well and also work as a playground for testing.

Thanks!

#4

So the real reason is that in your Default camera, it renders a background element with opaque blue color, this will affect blending results with every semi-transparent elements in Default group.

In example1 (Turned on color clear in User Interface camera):
The different color of sprite is due to the blending, caused sprite in User Interface is lighter because it’s blending with semi-transparent background of the render texture

In example2 (Turned off color clear in User Interface camera):
The wrong fading effect is because the Render Texture of User Interface camera is never cleared, so when the Sprite - Fade become totally transparent, no pixel is written in that area, but the semi-transparent pixels from previous frame is still there, this caused the fading never go to real zero.

So in both case, the correct setup should be

  1. Turn on color clear in all RT camera (Default and User Interface) and onscreen camera.
  2. Remove background node in Default group, setup background in the Render group, either with a background node or with clear color
1 Like
#5

Try modifying this:

图片
图片420×905 9.08 KB

图片
图片427×845 9.31 KB

图片
图片419×845 8.46 KB

1 Like
#6

@pandamicro & @zzf_Cocos You’re champions!

Thank you so much, both strategies works.

I first tried the generic solution, but since in a real game it isn’t so straight forward as in my Demo where you would just have a one colored background and no other overlapping elements, I think the “src Blend Factor”: “ONE” is the way to go for the graphics which will use opacity and blend on top of other RT.

Of course it is a bit cumbersome to always remember to change the blend factor of the graphics using opacity in a RT, but I don’t see another way around it.

It could also be me, that don’t know exactly how to use it, but I will investigate some more and try out different things and let you know if I have any further questions.

I will update this thread with my findings, for others to read in the future :blush:

Your help has been great and highly appreciated, Thank you!

2 Likes