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:
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

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: