Transparent background

Hello,
I have been trying to create a cocos based web overlay on a react native app.

The overlay needs to have a transparent background. However, the cocos build creates an opaque background. ( even if I set the Canvas and its background elements to be transparent in index.html ).

I tried the earlier solutions mentioned in this forum.

  • Set the ClearColor property of the Camera to be transparent.
  • Set the ENABLE_TRANSPARENT_CANVAS in Macro configurations.

However, this doesnt work for me. It still shows a black opaque background. I am using Cocos 3.8.3. Is there something else that needs to be done that I am missing ?

In different versions of Cocos, the method to enable ENABLE_TRANSPARENT_CANVAS varies slightly. In version 2.x, you need to add cc.macro.ENABLE_TRANSPARENT_CANVAS = true; before cc.game.run . In version 3.x, you can enable ENABLE_TRANSPARENT_CANVAS in the project settings under MacroConfig. Additionally, you need to change the main camera’s ClearFlags to SOLID_COLOR and set the ClearColor 's A channel to 0。

Please have a try.