[UPDATED: 25.07.2018] The Big NW.js Roundup - Tips & Tricks

    • Topic Overview

      Introduction

      Hi, my name is TheRealDannyyy and I've decided to create this topic in order to keep track of the latest changes, bugs and workarounds for C2's desktop exporting method.

      Table Of Contents

      Getting Started

      • Installing & Updating
      • The Use Of Custom Builds

      Main Structure

      • Important Files & File Paths
      • How To: Modify The Package Manifest Files
      • How To: Add Chromium-Args & Js-flags

      Bugfixes & Workarounds

      • How To: Workaround Recording Issues & Canvas Flickering
      • How To: Workaround Steam Overlay Not Appearing (Refresh)
      • How To: Workaround Steam Overlay Not Appearing (In-Process)
      • How To: Workaround Steam Overlay Issues With Letterbox Scaling
      • How To: Open Multiple NW.js Preview Windows
      • How To: Force GC To Instantly Unload Audio From Memory

      Custom Features & Debugging Tools

      • How To: Speed Up The Startup Time Of Your Game
      • How To: Set Your Own Application Icon
      • How To: Hide/Prevent Chrome Devtools For The End-User
      • How To: Test Your Game On Higher Framerates Than 60FPS
      • How To: Use The Built-in NW.js FPS Counter
      • How To: Secure/Hide Your Game Assets
      • How To: Modify/Remove Right-Click Context Menus
      • How To: Fetch & Make Use Of Command-line Arguments

      References

      • Helpful Links
      • External Bugreports
    • NW.js - Basics

      Getting Started

      Installing & Updating

      Since Construct 2's r187 update, all NWjs related files can be downloaded from THIS place. The installer will do the job for you and install all the necessary files and runtime components you need.

      The Use Of Custom Builds

      If you don't want to wait for the latest stable NWjs installer or would like to test out the latest beta builds of NWjs, you also have the option to visit THIS website and do everything on your own.

      Main Structure

      Important Files & File Paths

      The following is a list of all files and paths that you will surely have to visit at some point while working with C2 and NWjs. Everything is based on default paths so they might be different on your end.

      • NWjsForC2 Source Folder (C:\Program Files\NWjsForC2):

      Here you can find all the base files that C2 uses for the export. This is also the path where you have to paste in any custom builds if you decided to use them.

      • C2 Folder For NWjs Files (...\Construct2\Construct2-Win...\exporters\html5\nwjs):

      This path holds important ".json" files and usually 2 folders "win32" and "win64" with images inside.

      • "package.json" & "package-win.json" (...\Construct2\Construct2-Win...\exporters\html5\nwjs):

      These json files contain important commands that the exported version of NWjs can make use of. It's recommened not to add any debugging related "Chromium-Args" in those files.

      • "package-preview.json" (...\Construct2\Construct2-Win...\exporters\html5\nwjs):

      This json manifest for NWjs is only being used while previewing your games inside Construct 2. It's recommended to add all the debugging related "Chromium-Args" in this file only.

      How To: Modify The Package Manifest Files

      Modifying or adding chromium args is a thing that every NWjs user has to learn and do at some point. The most common misconception is that you're required to do it manually for each export but that's not the case! Since Construct 2 is copying over the package.json files, it's actually easier to just edit the source files directly.

      How To: Add Chromium-Args & Js-flags

      The majority of features or bugfixes found in this topic will require chromium-args or js-flags to be added to the package manifest files manually. Below you will find examples on how to do it.

      Steps To Add Chromium-Args To Package.json File(s):

      1. Open the "package.json" file(s)
      2. Find the "chromium-args" property (Example ➚)
      3. Add a Chromium-Arg with 1 empty space in between other args (Example ➚)

      Steps To Add JS-Flags To Package.json File(s):

      1. Open the "package.json" file(s)
      2. Find the "js-flags" property, manually add it if it's not available (Example ➚)
      3. Add a JS-Flag with 1 empty space in between other flags (Example ➚)
    • NW.js - Workarounds

      Bugfixes & Workarounds

      How To: Workaround Recording Issues & Canvas Flickering

      Game canvas is occasionally flickering and going black for a second or two. Recording software randomly stops because of unknown technical reasons.

      Steps To Add/Fix/Workaround:

      1. Open the "package.json" file(s)
      2. Add --disable-direct-composition to the "chromium-args" properties

      How To: Workaround Steam Overlay Not Appearing (Refresh)

      Steam Overlay doesn't appear at all or certain features aren't working. The game has no moving elements that trigger a refresh on the current layout.

      Steps To Add/Fix/Workaround:

      1. Add a small 2x2 sprite into one of your layouts (e.g. loader layout)
      2. Add a movement behavior like rotate
      3. Set the sprite opacity to 0% and make it global

      How To: Workaround Steam Overlay Not Appearing (In-Process)

      Steam Overlay doesn't appear at all or certain features aren't working. The game canvas refreshes constantly but it's still not working as expected.

      Steps To Add/Fix/Workaround:

      1. Open the "package.json" file(s)
      2. Add --in-process-gpu to the "chromium-args" properties

      How To: Workaround Steam Overlay Issues With Letterbox Scaling

      The Steam Overlay doesn't scale correctly on games with letterbox scaling enabled. Black bars around the game canvas glitch out and the Steam Overlay is still visible.

      Steps To Add/Fix/Workaround:

      1. Download and install THIS plugin
      2. Set the events up based on your Steam plugin (Example HERE)

      (Bugfix/Workaround provided by BackendFreak.)

      How To: Open Multiple NW.js Preview Windows

      NWjs doesn't allow multiple application instances running at once. Previewing with multiple NWjs windows in Construct 2 doesn't work.

      Steps To Add/Fix/Workaround:

      1. Add the browser and keyboard plugins
      2. Add the condition on button pressed
      3. Add the execute javascript action and execute this code:
      "window.open('" & Browser.URL & "');"

      How To: Force GC To Instantly Unload Audio From Memory

      Garbage Collector is not doing the job and bloats memory usage. Frequent game crashes related to reaching the system's memory limit.

      Steps To Add/Fix/Workaround:

      1. Open the "package.json" file(s)
      2. Add --expose-gc to the "js-flags" properties
      3. Execute the following JS code using the browser plugin:
      "global.gc();"
    • NW.js - Features

      Custom Features & Debugging Tools

      How To: Speed Up The Startup Time Of Your Game

      Game takes a long time to start up. Game files are heavily compressed. The "package.nw" file is very large and contains a lot of assets.

      Steps To Add/Fix/Workaround:

      1. Go to your exported Win32/Win64 folder(s)
      2. Rename "package.nw" to "package.zip" and unzip it
      3. Rename the unzipped folder to "package.nw" and remove all the old files

      How To: Set Your Own Application Icon

      Game is using the default NWjs icon as the window icon on Windows or OSX. The application icon seen inside the file browser is not using the game's custom icon.

      Steps To Add/Fix/Workaround:

      Windows only:

      1. Start ResHack
      2. Open the nw.exe file(s)
      3. Go to "Action" and then "Replace Icon"
      4. Select and replace the application icon(s)

      MacOSX only:

      1. Go to THIS website
      2. Select and upload your icon (PNG format)
      3. Convert and receive your new icon (ICNS format)
      4. Paste your new icon into *.app/Contents/Resources

      How To: Hide/Prevent Chrome Devtools For The End-User

      Dev-tools can be accessed by pressing "F12". Users can also access dev-tools in right click menu's or similar.

      Steps To Add/Fix/Workaround:

      Prevent most ways to access dev-tools:

      • Add --disable-devtools to the "chromium-args" properties

      Completly remove dev-tools access:

      • Install the custom "Normal" build from the NWjs downloads website

      How To: Test Your Game On Higher Framerates Than 60FPS

      Game runs at a higher framerate than 60fps. The user's monitor runs at more than 60hz. Noticeable bugs for certain behaviors or game mechanics without dt (delta-time) in use.

      Steps To Add/Fix/Workaround:

      Bugfix for game eventing:

      Testing on higher framerates:

      1. Open the "package.json" file(s)
      2. Add --disable-gpu-vsync to the "chromium-args" properties
      3. Add --limit-fps=X to the "chromium-args" properties (X = FPS, e.g. --limit-fps=144)

      How To: Use The Built-in NW.js FPS Counter

      Too lazy to add a simple FPS counter to the game.

      Steps To Add/Fix/Workaround:

      1. Open the "package.json" file(s)
      2. Add --show-fps-counter to the "chromium-args" properties

      How To: Secure/Hide Your Game Assets

      Game assets (package.nw) are out in the open. Possible risk of theft or malicious modifications.

      Steps To Add/Fix/Workaround:

      1. DOWNLOAD and unzip the files (NW.js Secure Assets.bat & Readme.txt)
      2. Move "NW.js Secure Assets.bat" into your exported Win32/Win64 game folder(s)
      3. Execute "NW.js Secure Assets.bat" once and it will tell you when everything is done
      4. Notice that your "nw.exe" file is bigger now (feel free to remove the "package.nw" file now)
      5. Your game will run as usual and all your assets are now hidden inside the executable

      How To: Modify/Remove Right-Click Context Menus

      Customized textboxes show a right-click menu, ruining the immersion of the game.

      Steps To Add/Fix/Workaround:

      Completly remove right-click menus:

      1. Add the browser plugin to your project
      2. Select an event which only triggers once (e.g. inside the loader layout)
      3. Add the browser action execute javascript
      4. Execute the following code:
      "document.addEventListener('contextmenu', function(e){e.preventDefault();}, false);"

      Leave "Cut", "Copy", "Paste" in right-click menus:

      1. Add the browser plugin to your project
      2. Select an event which only triggers once (e.g. inside the loader layout)
      3. Add the browser action execute javascript
      4. Execute the following code:
      "var gui=require('nw.gui'),menu=new gui.Menu;menu.append(new gui.MenuItem({label:'Cut',click:function(){document.execCommand('cut')}})),menu.append(new gui.MenuItem({label:'Copy',click:function(){document.execCommand('copy')}})),menu.append(new gui.MenuItem({label:'Paste',click:function(){document.execCommand('paste')}})),document.addEventListener('contextmenu',function(a){a.preventDefault(),(a.target instanceof HTMLInputElement||a.target instanceof HTMLTextAreaElement||a.target.isContentEditable)&&menu.popup(a.x,a.y)});"

      (Code provided by Colludium.)

      How To: Fetch & Make Use Of Command-line Arguments

      NWjs plugin can't fetch and make use of any command-line arguments.

      Steps To Add/Fix/Workaround:

      1. DOWNLOAD the example project
      2. Define the command-line argument (use the global variable)

      (Example provided by armaldio.)

    • NW.js - Archive

      References

      Helpful Links

      External Bugreports

      • NW.js [v0.29.0 - ?]: Custom cursor CSS not preserved in window (Open Link ➚)
      • NW.js [v0.17.5 - ?]: Window Size Bug (Open Link ➚)
      • NW.js [v0.30.0 - v0.31.5]: Video Media Playback Causes Apphang/Appcrash (Open Link ➚)
      • NW.js [v0.14.0rc1 - v0.19.0]: Critical Screen Flickering Bug (Open Link ➚)
      • NW.js [v0.22.0 - v0.26.0]: "--in-process-gpu" Causes Severe Problems With Application Instancing (Open Link ➚)
      • NW.js [v0.19.0 - v0.28.0]: Mouse Pointer Problem When Right-Clicking (Open Link ➚)
      • NW.js [v0.27.0 - v0.27.1]: Regression in 0.27 user agent handling breaks Construct 2 content (Open Link ➚)
      • NW.js [v0.18.1 - v0.18.4]: Gamepad API not working on Windows 10 (Open Link ➚)
      • NW.js [v0.29.0 - Before C2 r256]: passing --disable-software-rasterizer appears to disable hardware acceleration (Open Link ➚)
  • Great job. I'm sure I'll be visiting this thread often

  • Great post. If you'd make a tutorial of it I think more users would find it.

    Edit: In my humble opinion, the workarounds should be included in the manual. Ashley I think it's important to keep the manual up to date with information like this to inform the developers about how they can make their game working in certain situations. I don't think that it's a good practice to have them dig through forum topics or find tutorials for things that they think should work out of the box. What do you think?

  • There are two more things worth to mention.

    1. You should remove the current version of the NW.js you have currently installed before installing the new one. Otherwise your OSX export size will be huge. Some more info here: viewtopic.php?f=146&t=181578

    2. Changing the Mac icon.

    a) convert your PNG to ICNS (here for example: https://iconverticons.com/online/)

    b) copy ICNS file to [yourGameName].app/Contents/Resources

  • So the single process thing was resolved, too?

  • So the single process thing was resolved, too?

    If you mean the issue with screen recording and/or screen flickering, it was not about multi processing, but yes it is resolved. Please see this post for more details:

  • BackendFreak

    Yes, this means that "--in-process-gpu" is off the table and not needed anymore?

    Btw: thanks for taking the heroic effort and putting up with all the bug reports. We were really in a tight spot with these NW.js shenanigans and now we seem to approach a point where stuff is actually usable for mass deployment again.

  • --in-process-gpu is needed for greenworks to work though, as far as I'm aware, however I've never been able to get greenworks to work.

  • Prominent

    I must say I never had a problem using Madspy's Steam plugin.

  • Prominent

    I must say I never had a problem using Madspy's Steam plugin.

    Did you try the experimental greenworks version prior to using madspy's, did you have problems with that one?

  • The experimental one never worked for me (not fully anyway).

  • Yes, this means that "--in-process-gpu" is off the table and not needed anymore?

    It is possibly not needed any more. I'm currently not able to test it, I think MadSpy might know more about that?

  • Are there more than one package.json files? I only edit the one inside package.nw o.O

    EDIT: nevermind i'm retard as always, they're in exporters\html5\nwjs

    I always used to directly edit the exported file...

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Updated the Roundup with the following change(s):

    • Easy Way To Modify "Chromium-Args"
    • How To: Set Your Own Application Icon
    • How To: Fix Unusual NW.js MacOSX Exporting Size

    Thanks for your suggestions, keep'em coming!

  • Someone stick this post plz

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