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

Discussion and feedback on Construct 2

Post » Wed Nov 23, 2016 3:19 pm

Image

Image
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.
(If you can't see any images or just an "image" placeholder, please disable all your script/adblockers for this website!)

Image
1. Getting Started
  • Installing & Updating
  • The Use Of Custom Builds
2. Main Structure
  • Important Files & File Paths
  • How To: Modify The Package Manifest Files
  • How To: Add Chromium-Args & Js-flags
3. 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
Image
4. Custom Features & Debugging Tools
  • How To: Speed Up The Startup Time Of Your Game By Up To 20%
  • 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
Image
5. NW.js Bugreports (Github)
  • NW.js Window Size Bug
  • NW.js [v0.14.0rc1 - v0.19.0] Critical Screen Flickering Bug
  • NW.js [v0.22.0 - v0.26.6] "--in-process-gpu" Causes Severe Problems With Application Instancing
  • NW.js Mouse Pointer Problem When Right-Clicking
  • NW.js Regression in 0.27 user agent handling breaks Construct 2 content
  • NW.js 0.29.0: passing --disable-software-rasterizer appears to disable hardware acceleration
6. References & Helpful Links

Image
Image
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.

Image
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.

Image
Image
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 (based on default paths).

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.)

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 (also called manifest) 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.

Image
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 file(s), it's actually easier to just edit the source files directly.
(These files can be found inside C2's Folder For NWjs Files.)

Image
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.
(If you would like to reset everything back to default, HERE are all files as they come with Construct 2.)

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

Image
  1. Open the "package.json" file(s)
  2. Find the "js-flags" property, manually add it if it's not available (Screenshot)
  3. Add a JS-Flag at the correct place with 1 empty space in between other flags (Screenshot)

Image
Image
Game canvas is occasionally flickering and going black for a second or two.
Recording software randomly stops because of unknown technical reasons.
Image Fixed for all NW.js versions starting from 0.19.1, use only for versions from 0.14.0rc1 to v0.19.0! Image

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

Image
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.
Image This is an optional workaround and most games probably won't require this at all. Image

Image
  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

Image
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.
Image Steam4C2 users, please read the "Quick_Start.pdf" first before doing these steps! Image

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

Image
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.
Image The Steam4C2 plugin will have this workaround included in future releases. Image

Image
  1. Download and install THIS plugin
  2. Set the events up based on your Steam plugin (Example HERE)
(Bugfix/Workaround provided by @BackendFreak.)

Image
NWjs doesn't allow multiple application instances running at once.
Previewing with multiple NWjs windows in Construct 2 doesn't work.
Image WARNING: There are known issues and you might experience unexpected behavior.Image

Image
  1. Add the browser and keyboard plugins
  2. Add the condition on button pressed
  3. Add the execute javascript action and execute this code:
    Code: Select all
    "window.open('" & Browser.URL & "');"
  4. Open as many windows as you like by pressing the selected button

Image
Garbage Collector is not doing the job and bloats memory usage.
Frequent game crashes related to reaching the system's memory limit.
(HERE is an example to test if it works correctly.)

Image
  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
    Code: Select all
    "global.gc();"
Image

Image
Image
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.
(All your assets including textures, audio and code are inside the "package.nw" file.)

Image
  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

Image
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.
Image More recent versions of NWjs automatically use and apply the "icon-128.png" file found inside your project. Image

Image
  1. ~ Windows Only ~
  2. Start ResHack
  3. Open the nw.exe file(s)
  4. Go to "Action" and then "Replace Icon"
  5. Select and replace the application icon(s)
  1. ~ MacOSX Only ~
  2. Go to THIS website
  3. Select and upload your icon (PNG format)
  4. Convert and receive your new icon (ICNS format)
  5. Paste your new icon into *.app/Contents/Resources

Image
Dev-tools can be accessed by pressing "F12".
Users can also access dev-tools in right click menu's or similar.
(Dev-tools could allow execution of malicious code to modify your game.)

Image
  • Add --disable-devtools to the "chromium-args" properties (prevents the most ways to access dev-tools)
  • Install the custom "Normal" build from the NWjs downloads website (completly removes dev-tools)

Image
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.
(V-sync is always on by default and synchronizes the game's framerate with your monitor's refresh rate.)

Image
  1. ~ Bugfix For Game Eventing ~
  2. Add missing dt (delta time) multiplications (tutorial)
  1. ~ Testing On Higher Framerates ~
  2. Open the "package.json" file(s)
  3. Add --disable-gpu-vsync to the "chromium-args" properties

Image
Too lazy to add a simple FPS counter to the game.
(Chromium got you covered with a built-in FPS counter.)
Image The FPS counter might not work in combination with "--disable-gpu-vsync"! Image

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

Image
Game assets (package.nw) are out in the open. Possible risk of theft or malicious modifications.
(It is possible to merge your game files with the executable and "hide" them for the end-user.)
Image Your game might take a little longer to startup. Don't like my code? Learn how to do it yourself HERE. Image

Image
  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

Image
Customized textboxes show a right-click menu, ruining the immersion of the game.
(Below are two possible options to deal with the right-click context menus.)

Image
  1. ~ Completly Remove Them ~
  2. Add the browser plugin to your project
  3. Select an event which only triggers once (e.g. inside the loader layout)
  4. Add the browser action execute javascript
  5. Execute the following code:
    Code: Select all
    "document.addEventListener('contextmenu', function(e){e.preventDefault();}, false);"
  1. ~ Leave "Cut", "Copy", "Paste" ~
  2. Add the browser plugin to your project
  3. Select an event which only triggers once (e.g. inside the loader layout)
  4. Add the browser action execute javascript
  5. Execute the following code:
    Code: Select all
    "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.)

Image
NWjs plugin can't fetch and make use of any command-line arguments.
(The example can and is perfect in combination with Steam's launch option feature!)
Image The example only allows the use of a single command-line argument! Image

Image
  1. DOWNLOAD the example project
  2. Define the command-line argument (use the global variable)
(Example provided by @Armaldio.)

Image

Image
NW.js Window Size Bug
> https://github.com/nwjs/nw.js/issues/5337
NW.js [v0.14.0rc1 - v0.19.0] Critical Screen Flickering Bug
> https://github.com/nwjs/nw.js/issues/5477
NW.js [v0.22.0 - v0.26.6] "--in-process-gpu" Causes Severe Problems With Application Instancing
> https://github.com/nwjs/nw.js/issues/6059
NW.js Mouse Pointer Problem When Right-Clicking
> https://github.com/nwjs/nw.js/issues/5851
NW.js Regression in 0.27 user agent handling breaks Construct 2 content
> https://github.com/nwjs/nw.js/issues/6321
NW.js 0.29.0: passing --disable-software-rasterizer appears to disable hardware acceleration
> https://github.com/nwjs/nw.js/issues/6498

Image
https://www.scirra.com/blog/ashley/30/y ... -sizes-now
https://www.scirra.com/tutorials/1276/e ... ode-webkit
https://www.scirra.com/tutorials/67/del ... dependence
https://www.scirra.com/nwjs
https://nwjs.io/downloads/
http://docs.nwjs.io/en/latest/For%20Use ... e-your-app
https://www.scirra.com/store/construct2 ... am4c2-2545
https://en.wikipedia.org/wiki/Analog_te ... ronization
experimental-greenworks-plugin_t117833
developers-who-ever-published-on-steam-hear-ye-hear-ye_t181752?start=30
change-the-node-webkit-icon_t77740?start=10
viewtopic.php?f=152&t=180550
screen-flashing-with-nwjs-audio-related_t181268
recording-gameplay-issue-nwjs-youtubers_t183440
viewtopic.php?f=146&t=181578
Last edited by TheRealDannyyy on Tue Mar 27, 2018 2:20 pm, edited 135 times in total.
ImageImageImage
B
81
S
30
G
78
Posts: 751
Reputation: 46,391

Post » Wed Nov 23, 2016 3:52 pm

Great job. I'm sure I'll be visiting this thread often ;)
B
46
S
13
G
3
Posts: 279
Reputation: 4,631

Post » Wed Nov 23, 2016 4:29 pm

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?
B
141
S
34
G
17
Posts: 1,561
Reputation: 21,065

Post » Wed Nov 23, 2016 7:25 pm

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
ImageImageImage
B
45
S
23
G
89
Posts: 1,098
Reputation: 50,607

Post » Wed Nov 23, 2016 8:09 pm

So the single process thing was resolved, too?
B
83
S
29
G
32
Posts: 488
Reputation: 20,034

Post » Wed Nov 23, 2016 8:32 pm

Eisenhans wrote: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: screen-flashing-with-nwjs-audio-related_p1081822?#p1081822
ImageImageImage
B
45
S
23
G
89
Posts: 1,098
Reputation: 50,607

Post » Wed Nov 23, 2016 8:58 pm

@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.
B
83
S
29
G
32
Posts: 488
Reputation: 20,034

Post » Wed Nov 23, 2016 10:47 pm

--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.
B
51
S
24
G
70
Posts: 1,196
Reputation: 41,370

Post » Wed Nov 23, 2016 10:49 pm

@Prominent

I must say I never had a problem using Madspy's Steam plugin.
B
83
S
29
G
32
Posts: 488
Reputation: 20,034

Post » Wed Nov 23, 2016 10:51 pm

Eisenhans wrote:@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?
B
51
S
24
G
70
Posts: 1,196
Reputation: 41,370

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 0 guests