Turbowarp Transparent Stage

Cookiebuns

hi! i'm working on a project for my desktop but i need the stage to be transparent for it to fully work. i have a prototype using a screenshot of my desktop but it's only temporary until i can find a solution. here's the original forum post inside of script help.

this is the message that made me come here for help):

EpicGhoul993 wrote:
There is probably something you can do if you look into the project files before packaging. I would advise asking people in Advanced Topics forum, they probably know what line to edit.

any help would be greatly appreciated!

Last edited by Cookiebuns (March 6, 2025 14:21:08)

Maximouse

The only way to do this is to make a modified version of the packager with transparency support.

Cookiebuns

Maximouse wrote:
The only way to do this is to make a modified version of the packager with transparency support.

but in the packager there's a part for custom javascript or CSS code. surely there's something you could put in there to make it work

Cookiebuns

here's some pictures of the prototype i have in the “Sprinkles” sprite of my comments and news project if you wanna look at him

Maximouse

Cookiebuns wrote:
Maximouse wrote:
The only way to do this is to make a modified version of the packager with transparency support.
but in the packager there's a part for custom javascript or CSS code. surely there's something you could put in there to make it work

No, that wouldn't work. The packager uses Electron, which has a separate main process that creates the window and a render process that draws the project inside the window. Custom JS and CSS runs in the render process, but making the window transparent can only be done in the main process.

Cookiebuns

Maximouse wrote:
Cookiebuns wrote:
Maximouse wrote:
The only way to do this is to make a modified version of the packager with transparency support.
but in the packager there's a part for custom javascript or CSS code. surely there's something you could put in there to make it work
No, that wouldn't work. The packager uses Electron, which has a separate main process that creates the window and a render process that draws the project inside the window. Custom JS and CSS runs in the render process, but making the window transparent can only be done in the main process.

well can i edit the code of the project instead after it's packaged or something?

Maximouse

The following seems to work: first, add the following custom CSS in the packager options.

:root, body.is-fullscreen {
  background-color: transparent;
}

And custom JS:

const renderer = vm.runtime.renderer;
renderer.setBackgroundColor(0, 0, 0);
renderer._backgroundColor4f[3] = 0;
renderer.draw();

Package the project as an “Electron Windows application”. In “Application Settings”, set “Window controls” to “Hidden (frameless)”. After packaging, extract the zip. The resources/app folder inside it contains two files that you'll need to edit: electron-main.js and index.html.

In electron-main.js, find the createProjectWindow function. Replace this line:

backgroundColor: "#000000",

with:

transparent: true,

In index.html, find this line:

<script src="script.js"></script>

Add the following code before it:

<script>
  const oldGetContext = HTMLCanvasElement.prototype.getContext;
  HTMLCanvasElement.prototype.getContext = function (type, attrs) {
    return oldGetContext.call(this, type, {
      ...attrs,
      alpha: true,
    });
  };
</script>

Cookiebuns

Maximouse wrote:
The following seems to work: first, add the following custom CSS in the packager options.
:root, body.is-fullscreen {
  background-color: transparent;
}
And custom JS:
const renderer = vm.runtime.renderer;
renderer.setBackgroundColor(0, 0, 0);
renderer._backgroundColor4f[3] = 0;
renderer.draw();
Package the project as an “Electron Windows application”. In “Application Settings”, set “Window controls” to “Hidden (frameless)”. After packaging, extract the zip. The resources/app folder inside it contains two files that you'll need to edit: electron-main.js and index.html.

In electron-main.js, find the createProjectWindow function. Replace this line:
backgroundColor: "#000000",
with:
transparent: true,
In index.html, find this line:
<script src="script.js"></script>
Add the following code before it:
<script>
  const oldGetContext = HTMLCanvasElement.prototype.getContext;
  HTMLCanvasElement.prototype.getContext = function (type, attrs) {
    return oldGetContext.call(this, type, {
      ...attrs,
      alpha: true,
    });
  };
</script>

wow thanks! do i use google to edit the html file though or no? what do i edit it with?

(edit: i found notepad works fine)

Last edited by Cookiebuns (March 11, 2025 10:10:41)

Cookiebuns

Maximouse wrote:
The following seems to work: first, add the following custom CSS in the packager options.
:root, body.is-fullscreen {
  background-color: transparent;
}
And custom JS:
const renderer = vm.runtime.renderer;
renderer.setBackgroundColor(0, 0, 0);
renderer._backgroundColor4f[3] = 0;
renderer.draw();
Package the project as an “Electron Windows application”. In “Application Settings”, set “Window controls” to “Hidden (frameless)”. After packaging, extract the zip. The resources/app folder inside it contains two files that you'll need to edit: electron-main.js and index.html.

In electron-main.js, find the createProjectWindow function. Replace this line:
backgroundColor: "#000000",
with:
transparent: true,
In index.html, find this line:
<script src="script.js"></script>
Add the following code before it:
<script>
  const oldGetContext = HTMLCanvasElement.prototype.getContext;
  HTMLCanvasElement.prototype.getContext = function (type, attrs) {
    return oldGetContext.call(this, type, {
      ...attrs,
      alpha: true,
    });
  };
</script>

i got good news and bad news. the good news is that it worked but the bad news is that the background color was set to green in the turbowarp code and now it's blending with the desktop background. at least it works though! i have to go outside for a bit so i'll fix it when i get back. thanks for helping!

Cookiebuns

IT WORKED! since this problem's sorted now, i'm gonna close this topic

Discuss Scratch