How To Achieve TRUE Background Transperancy In Exported Projects?

  • Hi, I've been experimenting around with NWjs and its native-like application features. Inspired by some classic applications, I would like to create a non-traditionally sized click through window.

    While the NWjs side of things in order to achieve this is done, I can't get Construct 2 to behave right. Despite setting all my layers to "transparent" and switching "clear background" on/off, C2 always sets the HTML background to black instead of transparent.

    My question is: How can I set the background color to transparent, without manually editing it after export? (The CSS code for this can be found inside the index.html file.)

    Observed/Expected Results:

  • Open your Construct 2 installed directory like this.

    %PROGRAMFILES%\Construct 2\exporters\html5\templates

    Open export-nwjs.html if you want change anythink for NWJS export.

    Edit what you want and save.

    When you export NWJS it will using your edited file.

    You can change preview-nwjs.html file for preview.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Open your Construct 2 installed directory like this.

    > %PROGRAMFILES%\Construct 2\exporters\html5\templates

    Open export-nwjs.html if you want change anythink for NWJS export.

    Edit what you want and save.

    When you export NWJS it will using your edited file.

    You can change preview-nwjs.html file for preview.

    While this is one solution, I'd prefer to do it per-project instead of applying it for all projects.

  • Someone from the Construct Community Discord gave me an easy solution.

    1. Add trigger event (e.g. on start of layout)
    2. Add the browser plugin
    3. Execute the following JS code:
    4. "$('html,body').css('background','rgba(0,0,0,0)');"

    Cheers!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)