Change the Background-Color to transparent

How do I...?
1

I have seen several posts on how people wanted to make the game canvas transparent. The closest approach was to hardcode the pixi engine, but i thought that this was too brute.
So for the last two days i was trying to find a solution for this, without luck, but my approach is different than others as i am trying to change the PIXI renderer.

The easiest way would be, if possible, to set the transparency from within the scene properties, but here it is fixed to RGB without Alpha.

How do I…

How do i make the layer or layers of a game transparent. Currently i am trying to find a way to remove the background, so that an iFrame can bee seen. I have the iframe on z-index 0 and would love to put the canvas on top of it.

What is the expected result

So that you can “see through” the back of the layer and show what is beneath the main canvas. Imagine setting the body background of the index.html to a seamless pattern background and that you want that to be seen “behind” the game.

What is the actual result

The forced transparency that you can set in the PIXI renderer is ignored.

My A.I. approach

I have been a developer for nearly 4 decades and it is absolutly crazy how AI is helping me out to find solution. So when i requested the BING Co-Pilot AI to help me out with this problem, it gave me this result (but it does not work somehow):

Absolutely! If you’re looking to modify the background of your GDevelop game to be transparent using JavaScript and PixiJS, here’s a concise way to achieve that. GDevelop allows you to inject custom JavaScript code, which can be very handy for such customizations.

Here’s a snippet of JavaScript code you can use to make the background transparent:

// Access the PIXI renderer from GDevelop
const renderer = runtimeScene.getRenderer().getPIXIRenderer();

// Set the background color to transparent
renderer.backgroundColor = 0x000000; // Black color
renderer.transparent = true; // Make it transparent
To use this code in GDevelop:
2

It’s not possible to make the default background fully transparent using just standard GDevelop events.

By default, layers in GDevelop are transparent. However, if you have objects on a layer, they’ll block the transparency. You can hide or show the layer as needed in GDevelop using its built-in features.

I’m a bit unclear on why you’d want to have a transparent default background, though.

This sounds like you’re asking about layering in a way that allows the background to show through. Isn’t that essentially just stacking multiple layers? If you could share a reference or example of what you’re aiming for, I might be able to offer a more precise solution.

1 Like
3

I am trying to things out, to see if they are possible.

FIRST EXAMPLE
Let’s say you put a seamless texture on the body via CSS. Either through a javascript code or hardcoding it into the index.html
Now i want to put the gDevelop CANVAS on top of that so if it is transparent, you could have the seamless texture on the back of the actual game (ignore that it would do nothing but be there, it’s just an idea i have).

SECOND AND FOR MY PROJECT MORE IMPORTANT EXAMPLE.
At the beginning of the scene i create an iframe via Javascript.
This iFrame is always put on top of the game aka all layers.
I now managed to give the canvas an ID, so that i - again via JS - can put it to the back. The problem is that the Canvas has always a black background covering the whole HTML. I can use the DEV Inspector and switch the z-index thus putting the canvas behind or on top of the iframe, but what i seek is to make the canvas transparent so that you can see the iframe in the back.

Imagine this: you have an iframe with a youtube video running in the back and the gDevelop game above it.

I even thought about implementing jCanvas or FabricJS to see if i can “talk” to the game canvas and make the background remove, but that does not work either.

4

This is what the Bing Co-Pilot A.I. suggest me to do, but none of this work.

Option 1: Directly Accessing the Renderer

const runtimeScene = gdjs.RuntimeScene.getGame().getRenderer().getPixiRenderer();
runtimeScene.background.alpha = 0.5; // Set alpha to 50%

Option 2: Using Scene Methods

const runtimeScene = gdjs.RuntimeScene.getGame().getRenderer().getPixiRenderer();
const background = runtimeScene.stage.children.find(child => child.name === 'background');
if (background) {
    background.alpha = 0.5; // Set alpha to 50%
}

Option 3: Through GDevelop’s API

const runtimeScene = gdjs.RuntimeScene.getGame().getRenderer().getPixiRenderer();
const backgroundLayer = runtimeScene.getLayer('');
backgroundLayer.setAlpha(0.5); // Set alpha to 50%
5

[UPDATE]
From within PixiJS it seems to be possible as far as i have understood on this documentation page. The question is if this also affects the base layer of gDevelop.

Transparent Background | PixiJS

6

Hi,

I now have a better understanding of what you’re trying to achieve. I took some time to experiment with the index.html as well, and I encountered the same issue, the canvas background remains black. When I tested it locally, I found that the video embed covered the full screen, but the canvas stayed behind it and didn’t appear transparent. Additionally, the video itself wasn’t playing correctly in that setup.

Unfortunately, I wasn’t able to find a solution to make the canvas transparent directly, but you might find further insights in the GDevelop JavaScript documentation, which could help clarify how to achieve your goal within the engine:
GDevelop JavaScript Game Engine Documentation

That said, I was able to simulate something quite similar to what you’re aiming for using standard events. While the buttons aren’t transparent in the simulation, you can see that the video layer appears transparent, giving the illusion that you’re “seeing through” the game to the background layer.

Here’s a quick GIF of that effect:

GIF+24-04-2025+18-42-56

In this case, the video itself is transparent, while the buttons are simply placed on different layers. This effect gives the impression that the buttons are transparent, but in reality, they’re just overlaid on top of the video, without any transparency applied to the buttons themselves. The “transparent” button is seen through the layer due to the video being transparent underneath.

I hope this helps in some way, though I realize it’s not quite the exact solution you were hoping for.

1 Like
7

UPDATE 25.04.2025 at 11:58

I am step by step getting more to where i think one must go to make the base layer transparent. i am not sure, but at least i was able to make the pixirenderer background transparent through this code:

const renderer = runtimeScene.getRenderer().getPIXIRenderer();
console.log(renderer.width, renderer.height);
renderer.backgroundAlpha = 0.1; // Adjust the value as needed (0.0 to 1.0)
console.log("Background Alpha now is:"+renderer.backgroundAlpha);

With the width and height i wanted first to check if i can “talk” to the renderer.
As this is all new to me i needed to know, and still do not understand, the differences between each renderer, but that is another problem.
So now that i know that PIXIrenderer can be read, i modified the backgroundAlpha and the console shows me that it worked.

But still i have a black background.
Currently i tink that i need to get to the scene layer now and make that transparent.
I think this, because as gDevelop asks me to choose a background color of the scene, it is fixed to that background color. What i seek now is the way to tell the canvas that this scene-backgroundcolor is transparent.

Anyone knows how to archive this?

8

UPDATE 25.04.2025 at 12:15

I just found out that with the renderer i can set the backgroundcolor and the alpha.
But with the runtimescene i can only change the backgroundcolor without alpha.

This is sad :frowning: