Game Transparent Background

How to make a Game transparent background??
Here you can see my game

I have used alpha in the camera and toggled transparent bg in the rendering setting but I am not getting it.

Here are screenshots of my settings

Hi @Nofil_khan!

The topic below may be helpful.

1 Like

It worked almost 90 percent using that script only ,but there is just a slight difference between game and bg ,Is it normal and can it be fixed

I actually get it working perfectly

Here on my web ,Now it merges seamlessly with web

Just curious if you will add this functionality to transparent canvas button (What this script is doing in in future)

var TransparetnBg = pc.createScript('transparetnBg');

// initialize code called once per entity
TransparetnBg.prototype.initialize = function() {
     var bd = document.getElementsByTagName('body')[0];
    var ht = document.getElementsByTagName('html')[0];
    var cv = document.getElementsByTagName('canvas')[0];"transparent";"transparent";"transparent";


What was the cause of the different?

I’m not sure what you mean with this. Are you talking about the PlayCanvas UI button?

The code was a difference ,I just added a new entity and added the code to it

Everything worked perfectly
Note (these were the settings previously but they don’t worked without script)
the cam was alpha with color to 00000
the transparent Canvas button was ticked

With button I mean
Settings/Rendering/transparent canvas button

Here my game screen shot

the green screenshot I posted was from, so I think the difference was due to settings of that webpage ,and has nothing to do with the game

1 Like

The transparent canvas option in the Project Rendering settings along with a fill colour on the camera being transparent will allow DOM elements behind the canvas to be seen

This is used by 8th Wall, Zappar etc to allow a video feed to be placed behind the canvas and be seen.

For the body/html, we haven’t had a request for this as it’s been not a common user path with a few exceptions. Generally developers have been fine modifying the CSS of the build for self hosting.

If you would like this to be considered though, please add a feature request and use case to the repo: Issues · playcanvas/editor · GitHub