Game Transparent Background

[Nofil_khan]

How to make a Game transparent background??
Here you can see my game
https://nimagin13.wixsite.com/my-site/robo-and-gears

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

[Albertos]

Hi @Nofil_khan!

The topic below may be helpful.

[SOLVED] How to set a transparent background

Hey everyone, I am trying to set my project’s background to transparent to only have the cube visible and be able to display HTML elements under it. I tried setting the clear color to transparent by setting the alpha to 0. I also enabled the transparent canvas option in the project settings. I am trying to run the project within a frame in another page. I tried to figure out by following the steps in this post: ( How to set canvas transparent?) but either I didn’t do something right or it no …

[Nofil_khan]

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

[Nofil_khan]

I actually get it working perfectly

https://nimagin13.wixsite.com/my-site/robo-and-gears

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];
    bd.style.backgroundColor="transparent";
    ht.style.backgroundColor="transparent";
    cv.style.backgroundColor="transparent";

};

[Albertos]

@Nofil_khan

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

@Nofil_khan

Here on my web ,Now it merges seamlessly with web

What was the cause of the different?

@Nofil_khan

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

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

[Nofil_khan]

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 itch.io, so I think the difference was due to settings of that webpage ,and has nothing to do with the game

[yaustar]

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